Categories

Recent Articles

DOM Trick: de-thumb an image URL

When ExpressionEngine auto-creates a thumbnail image, it gives the option for creating the markup to display the full size image in a new, pop-up window or in a blank window.  If you’re like me, those options aren’t optimal.  So I put together a handy 4-line Javascript DOM trick to give me other choices.

Read on
 

Resource: Findable Websites

There’s many books and resources available on designing client- and server-side web sites, but few which focus on the practical methods of creating web sites that users can find.  This is one worth mentioning.

Read on
 

Converting URL to clickable link

Using a regex routine, we can find instances of URLs in a block of text and wrap them in <a> elements.

Read on
 

One Pixel Rounded Corners

An interesting technique is popping up—1-pixel rounded corners.

Read on
 

Creating a Great Web Site

There’s much to consider when creating a web site.  Audience, interface, design, and content are among the key things which need to be planned for.

Read on
 

One Pixel Rounded Corners

An interesting technique is popping up—1-pixel rounded corners.

Here’s example code for making this effect.  A more complete discussion of this is located here.  And a demo of the following code is found here.

<html>
<head>
<style>
<!--

ul {
    width:180px;
    list-style-type:none;
    margin:0 auto;
    padding:0;
}

li a {
    display:block;
    position:relative;
    border-width:1px 0;
    border-color:#ccc;
    border-style:solid;
    color:#555;
    text-decoration:none;
    margin:4px 1px;
}

li a span {
    display:block;
    position:relative;
    margin:0 -1px;
    border-width:0 1px;
    border-color:#ccc;
    border-style:solid;
    background-color:#eee;
    padding:2px 6px;
}

li a:hover {
    border-color:#aaa;
    color:#333;
}

li a:hover span {
    border-color:#aaa;
    background-color:#ddd;
}

//-->
</style>
</head>
<body>
<ul>
    <li>
        <a href="#"><span>Testlink</span></a>
        <a href="#"><span>Testlink</span></a>
        <a href="#"><span>Testlink</span></a>

    </li>
</ul>
</body>
</html>

04/30 at 09:11 PM

Comments

  No one's commented yet. Add yours!

Add Comment

Name:

Email:

Location:

URL:

Remember my personal information

Notify me of follow-up comments?

© 2002-2008 | carvingCode ™ | carving unique nooks in the web ™ | simple, but not simpler ™