Forum Moderators: not2easy
Here's my styling:
/*Top Navigation styles*/
#mainnav {height: auto;
width: 810px;
font-family: "Comic Sans MS", Verdana, sans-serif;
font-size: .90em;
font-weight: bold;
text-align: center;
font-variant: small-caps;
line-height: 71px; /*For Safari for Windows broswer*/
margin: 0;
padding: 0;
background-color: black;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
border-left: 1px solid gray;
}
#mainnav ul{list-style: none;
padding: 0;
margin: 0;
}
#mainnav li {display: inline;
}
#mainnav a.left {background-image: url(Nav/NavButtonL.png);
background-repeat: no-repeat;
background-color: inherit;
height: 65px;
width: 120px;
color: rgb(133,207,159);
text-decoration: none;
margin: 3px 3px auto 3px;
display: inline-block;
line-height: 65px;
}
#mainnav a:hover.left {background-image: url(Nav/NavButtonR.png);
background-repeat: no-repeat;
background-color: inherit;
width: 120px;
height: 65px;
color: rgb(192,192,192);
text-decoration: none;
margin: 3px 3px auto 3px;
display: inline-block;
line-height: 65px;
}
#mainnav a.right {background-image: url(Nav/NavButtonR.png);
background-repeat: no-repeat;
background-color: inherit;
height: 65px;
width: 120px;
color: rgb(133,207,159);
text-decoration: none;
margin: 3px 3px auto 3px;
display: inline-block;
line-height: 65px;
}
#mainnav a:hover.right {background-image: url(Nav/NavButtonL.png);
background-repeat: no-repeat;
background-color: inherit;
width: 120px;
height: 65px;
color: rgb(192,192,192);
text-decoration: none;
margin: 3px 3px auto 3px;
display: inline-block;
line-height: 65px;
}
.firstletter {font-size: 1.5em;
color: inherit;
background-color: inherit;}
/*End Top Navigation styles*/
And here is my html markup:
<div id="mainnav">
<ul>
<li><a href="#" class="right"><span class="firstletter">C</span>arvings</a></li>
<li><a href="#" class="left"><span class="firstletter">F</span>unctional<span class="firstletter">A</span>rt</a></li>
<li><a href="#" class="right"><span class="firstletter">A</span>bout <span class="firstletter">D</span>an</a></li>
<li><a href="#" class="left"><span class="firstletter">L</span>inks</a></li>
<li><a href="mailto:somebody@somewhere.com" title="Opens Your eMail Program" class="right"><span class="firstletter">C</span>ontact</a></li>
<li><a href="#" class="left"><span class="firstletter">H</span>ome</a></li>
</ul>
</div>
Doctype:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Is this something so easy to fix, I'm missing something? Or am I going about this totally wrong?
Both CSS and HTML mark-up validated per W3C...
If you need any more info, please let me know.
Thanks in advance...
[edited by: Lori_Corbett at 10:24 pm (utc) on Dec. 16, 2007]
/*Top Navigation styles*/
#mainnav {height: 71px;
width: 810px;
font-family: "Comic Sans MS", Verdana, sans-serif;
font-size: .90em;
font-weight: bold;
text-align: center;
font-variant: small-caps;
line-height: 71px; /*For Safari for Windows broswer*/
margin: 0;
padding: 0;
color: white;
background-color: black;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
border-left: 1px solid gray;
}
#mainnav ul{list-style: none;
padding: 0;
margin: 0 1.5em 0 1.5em;
}
I also changed my doctype to:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
But now I have a whole new set of problems.
I'm going to start a new topic on the new nasties. :-)
so instead of having two different images - one for the original state and one for the rollover - have one image for both.
half of the image will be hidden each time.
that way you don't have to wait for the second image to download when they hover the mouse over it, because it is already there. you just shift its position with CSS.
and it will speed up your page display as well because there's one less HTTP request.
it sounds complicated when i explain it...
but if you do a google search for "background sprites CSS" you'll get it.
