I've heard from a friend that the upper navigation I built for his blog
does not work on Mac. My friend is non-technical and so I cannot tell
you what browser. (He's away for a week, I promised I'd look at it...)
Here's the HTML: Pretty straightforward, a basic UL with Spans to blow
away the text.
<div id="nav">
<ul>
<li><a id="home" href="/home.php"><span>Home</span></a></li>
<li><a id="arch" href="/archives.php"><span>Archives</span></a></li>
<li><a id="cats" href="/categories.php"><span>Categories</span></a></li>
<li><a id="cont" href="/contact.php"><span>Contact</span></a></li>
<li><a id="about" href="/about.php"><span>About</span></a></li>
</ul>
</div>
Here's the relevant CSS:
/* navigation rollovers
-------------------------*/
#nav a, #links a {
display:block;
height:30px;
border:0;
}
#nav a span, #links a span {
margin-left:-3000px;
}
a#home {
background:url(/images/home.gif) no-repeat top left;
width:73px;
}
a#home:hover, a#home:active {
background:url(/images/home.gif) no-repeat bottom left;
}
a#arch {
background:url(/images/archives.gif) no-repeat top left;
width:80px;
}
a#arch:hover, a#arch:active, li#current a#arch {
background:url(/images/archives.gif) no-repeat bottom left;
}
a#cats {
background:url(/images/cats.gif) no-repeat top left;
width:90px;
}
a#cats:hover, a#cats:active, li#current a#cats {
background:url(/images/cats.gif) no-repeat bottom left;
}
a#cont {
background:url(/images/contact.gif) no-repeat top left;
width:73px;
}
a#cont:hover, a#cont:active, li#current a#cont {
background:url(/images/contact.gif) no-repeat bottom left;
}
a#about {
background:url(/images/about.gif) no-repeat top left;
width:77px;
}
a#about:hover, a#about:active, li#current a#about {
background:url(/images/about.gif) no-repeat bottom left;
}
Essentially the rollover was simple enough. I use one image per link and
slide it down on rollover.
As tested it works in IE6, Firefox, and Opera on Windows. But on the Mac?
Caveats:-----------------------------------------------------------------
1. As of this writing, the homepage validated to HTML 4.01 Transitional.
2. Ignore the fact that I neglected to provide the active list items
with an ID of current
(eg. li id="current" to go with li#current a#arch),
as I never implemented my breadcrumb navigation... (whoopsie, I suppose
I should do that, eh?)
View the live site at http://www.bodybuildingsecrets.com/home.php
Curiously,
-------
Raymond A. van der Woning
http://vanderWoning.ca/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
