Sunday, May 29, 2011

Moving text in an LI while leaving background image alone.

I recently needed to move the text in an li to the left and down, while leaving the background image alone.

Here's the css:
nav ul li {
width:136px;
height:81px;
color:#FFF;
float:left;
font-size:.9em;
}
nav ul li blockquote {
width:50px;
margin-left:78px;
margin-top:25px;
}
.homeButton {
background:url(/images/home_up.gif) no-repeat;
}
.homeButton a:hover, .homeButton:hover {
background:url(/images/home_down.gif) no-repeat;
}
And here's the HTML:

< ul >
< li class="homeButton" >
Home< / blockquote > < / li > ...
I'm moving single line text down 30px; while double-line text only 25px;

Notice that I'm using < blockquote >to move the text around... now need to add the links. Wish me luck. ;)

No comments:

Post a Comment