Submitted by BillB on 10/15/2009
(If you have a minute, please add a comment when you're done so I know if I'm presenting this well enough.)
Custom Underline with CSS Sliding Doors
Try it Out
Enter some text into the input field below.
How it Works
CSS Sliding Doors is a technique I first read about in David Sawyer McFarland's "CSS Missing Manual" book but, as I learned from McFarland, was originally described by Douglas Bowman in an article by him at A List Apart, (http://www.alistapart.com/articles/slidingdoors/). Both resources describe how to create a tab navigation menu where the tabs have rounded corners and need grow to accomodate the tab text. Sliding doors allows the left end of the image that creates the tab to show at all times; if it were to disappear beyond it's container the rounded left corner would be missing. I figured I could use the same technique to create a custom underline that could accomodate any length text; this would be handy for listing out user supplied content, like forum post titles.
It takes two images to make this work:
Since you can only have one background image in a tag, you also need two tags. The very long image of the tape won't extend outside of it's container, so because I've positioned to the far right, as it's container grows, more of the left end of the image shows. The tape pulls out as you type more letters.
Here's one way I coded the html, using a span within a div:
<span class='tapeHeader'>CSS Sliding Doors Pulls out the Tape</span>
</div>
Bowman uses a list in his example because he's making a navigation menu. The first time I created my tape measure underline, I used a list too. Then I decided a list was stupid for this application, because there is no actual list, so I changed it to a span and a div. I present both solutions here; the css is the same for all, except the span-and-div method doesn't need the ul styling. A third version uses an anchor tag so the text that's underlined can be a link.
Implemented using a list
- Implemented With a List
Implemented as link
Here's all the code:
/* tapeHeader class is applied to the image of the tape measer body and
whatever is used as the container for the heading text; either
a span or a link, depending on the implementation */
.tapeHeader {
padding-left: 65px; /* Keep text to the right of the tape body */
padding-bottom: 21px; /* increase to move text UP relative to tape body*/
padding-top: 11px; /* Pad to accomodate the tape body.
Less than 9px will cut the top off the tape body */
margin-left:-10px; /* Move Tape body left 10px to hide the yellow tape
extending out the back */
background: url("images/tapeBody.gif") no-repeat left bottom;
height:67px; /* Height of tapeBody.gif */
font-size:25px; /* Text Size */
color: #000;
}
/* class applied to the image of the tape */
#tapeMeasure {
display:inline; /* Prevents gap between tapeBody and ruler */
/* Use bottom padding to line up the yellow tape with the bit of tape
thats part of the tape body image */
padding-bottom: 23px;
background:url("images/tapeRuler.gif") no-repeat right bottom;
}
/* I used this tapeHeadingSpace div to make some room above and below the heading
so the text doesn't sit directly on the tape image.*/
.tapeHeadingSpace {
padding-top: 20px;
padding-bottom : 20px;
}
/* Style the ul tag, (if you're using the list method) */
ul {
padding: 0;
margin-left: 0;
}
</style>
<!-- Implemented with a div and span -->
<div class='tapeHeadingSpace'>
<div id="tapeMeasure">
<span class='tapeHeader spanDemo'>CSS Sliding Doors Pulls out the Tape</span>
</div>
</div>
<!-- Implemented with a list and a span -->
<div class='tapeHeadingSpace' >
<ul>
<li id='tapeMeasure'>
<span class='tapeHeader listDemo'>Implemented With a List</span>
</li>
</ul>
</div>
<!-- Implemented with a div and an anchor -->
<div class='tapeHeadingSpace'>
<div id="tapeMeasure">
<a style="text-decoration:none;border-bottom:none;" class='tapeHeader' href="#" >
I'm a link
</a>
</div>
</div>
Average
Rating 
(based on 4 reviews)
Views (676)
Comments (1)