Dave Shea Rollovers and :hover

squaredeye · 2006-01-12 21:39:32

I was admiring mezzoblue.com as usual :) and I began wondering how Dave Shea got that nice rollover going on the “articles..”, “Projects”,and “related sites”.

Here’s his code:

<code>
<ul id=“contentNav”> <li class=“li1”><a href=”/articles/”>Articles & Archives</a></li> <li class=“li2”><a href=”/projects/”>Projects</a></li> <li class=“li3”><a href=”/related/”>Related Sites</a></li> </ul>
</code>

Any clue how he might style it?

Is he hiding the span? (notice that the titles on those list items are graphic not type)

Any ideas?

Matthew

alexandra · 2006-01-12 23:09:16

Are you asking for the hovering images?

squaredeye · 2006-01-13 01:35:06

ahh, no :)

Just how he may have styled that?
Maybe its just been a long day, but has he just styled the < a > tag to fill the < li >?

For instance:
<code>
li {
width: 300px;
list-style-type: none;
padding: 0;
margin: 0;
display: inline;
}

a, a:visited {
width: 300px;
padding: 0;
margin: 0;
background: url(someimage.jpg) #FFF no-repeat;
}
a:hover {
background: url(adifferentimage.jpg) #FFF no-repeat;
}
</code>
Obviously, he didn’t apply the :hover to the list element right?
That’s hard to pull off without some fancy JS.

Any ideas. Thanks Alexandra.

Last edited by ma_smith (2006-01-13 01:53:24)

misterk · 2006-01-13 01:45:36

</code>

It’s all in his css :

<hr/>
<code> /* — contentNav — */ #contentNav {width: 697px; height: 94px; margin: 0 4px; padding: 0; position: relative; top: -1px; background: url(/i/ice/contentnav-panels.gif) 0 0 no-repeat;} #contentNav li {list-style: none; padding: 0; margin: 0; position: absolute; width: 231px; height: 94px;} #contentNav li a:link, #contentNav li a:visited {width: 231px; height: 94px; display: block;} #contentNav li a:hover {background: transparent url(/i/ice/alphafake-red.gif);} html>body #contentNav li a:hover {background: transparent url(/i/ice/alpha-red-dr.png);} #contentNav .li1 {top: 0; left: 0;} #contentNav .li2 {top: 0; left: 233px;} #contentNav .li3 {top: 0; left: 466px;} #contentNav li a span {display: block; position: absolute; top: 69px; left: 14px; overflow: hidden; font-size: 1px; color: #E52C00; padding-top: 13px; height: 0;} #contentNav .li1 a span {width: 108px; background: url(/i/ice/contentnav-articles.gif) no-repeat;} #contentNav .li2 a span {width: 56px; background: url(/i/ice/contentnav-projects.gif) no-repeat;} #contentNav .li3 a span {width: 79px; background: url(/i/ice/contentnav-related.gif) no-repeat;}

</code><hr/>

The spans are used to replace the text they contain with images.

(and did someone forget to close a code tag?)

Last edited by misterk (2006-01-13 01:50:32)

squaredeye · 2006-01-13 01:51:39

Misterk
The spans are used to replace the text they contain with images.

ah, right, for accessibility. Makes sense.

~~(and did someone forget to close a code tag?)~~ EDIT oops, the </ code > tag :)

Wha?

Thanks,

Matthew

ps. where did you get a hold of his css? Does he make it available?

Last edited by ma_smith (2006-01-13 01:54:05)

alexandra · 2006-01-13 09:43:49

where did you get a hold of his css?

Matthew,
look up the source code of mezzoblue. in the headsection you find:
<link rel="stylesheet" type="text/css" href="/css/14oct05/wintermint.css" media="screen, projection" />

wet · 2006-01-13 11:16:25

Dave Shea describes various aspects of image replacement on his very own site. The transparency effects are described in greater detail here.

squaredeye · 2006-01-13 13:58:53

Wow, thanks for the detail :)

Alexandra, I should have thought to look at the linked style sheet.
I kind of thought the famous Dave Shea would have hidden his style behind ../../stylesheet kind of method, so I didn’t look :)

My mistake.

Wet, thanks for the links.

alexandra · 2006-01-13 14:16:56

> ma_smith wrote:

> I kind of thought the famous Dave Shea would have hidden his style behind ../../stylesheet kind of method, so I didn’t look :)

I already thought you must have been confused by something :)

However, is there something very exciting about Sheas stylesheet?? Do i miss something?

squaredeye · 2006-01-13 15:24:20

Alexandra, :0) ha, very funny !

One of my clients is wanting some rollover effects on his menu, and I got a bit confused about how to style them. Its easy enough for standards complient browsers who allow for the :hover effect on any element, but I was trying to figure out how to do it in a more cross browser fashion.

I was at Shea’s site and noticed the effect, and thought, hey that’s sorta what I’m after and I know mezzoblue is strict 1.0, so…

Anyhow that’s the schpiel.

I noticed you started posting a lot more over at the magazine. Well done. Its lookin hip.

M

Textpattern CMS

Textpattern CMS support forum

#1 2006-01-12 21:39:32

Dave Shea Rollovers and :hover

#2 2006-01-12 23:09:16

Re: Dave Shea Rollovers and :hover

#3 2006-01-13 01:35:06

Re: Dave Shea Rollovers and :hover

#4 2006-01-13 01:45:36

Re: Dave Shea Rollovers and :hover

#5 2006-01-13 01:51:39

Re: Dave Shea Rollovers and :hover

#6 2006-01-13 09:43:49

Re: Dave Shea Rollovers and :hover

#7 2006-01-13 11:16:25

Re: Dave Shea Rollovers and :hover

#8 2006-01-13 13:58:53

Re: Dave Shea Rollovers and :hover

#9 2006-01-13 14:16:56

Re: Dave Shea Rollovers and :hover

#10 2006-01-13 15:24:20

Re: Dave Shea Rollovers and :hover

Board footer