So, usually I would take months to come up with some long-winded and very informative tutorial on CSS for my fellow blog readers. However, today I am not feeling that kind…yet kind enough to post this.
I respect Apple for quite a few things. Design is one of them. I think that their site is very well layed out with a balance of images, text, video and interactivity. Some times I come across a page that I think looks great. But when I lift the hood, the insides are messed up. So, that…my friends is what pimp my apple.com is all about. I take a chunk of the site and redo it how I would want to do it.
Keep in mind that when I redo some crazy XHTML/CSS/Javascript, I am not making a statement about how my code should be put on their site. I understand that they have an audience and that their code needs to support as many browsers as possible, etc. My goal in this little excercise is to help show people what can be done with CSS, not neccessarily at this particular time. I would probably wait till more browsers were up to speed.
Ok, enough witless banter from me. Alright, because I’m an apple tool, I was checking out their webpage on the new iMacs’ graphics. I found this sweet little gem of a rollover image that showed all three models, like so:
Apple’s image thingy
And I like it. First thing, I turn off Javascript. It doesn’t work. Typical. So, quickly now I view source and get the code. Here is the code:
Apple’s XHTML
<dl id="features1">
<dt id="t1" class="hi">17-inch</dt>
<dd id="d1" class="hi"><img src="http://images.apple.com/imac/images/graphicscompareimac17.jpg" alt="17-inch iMac" width="290" height="270" border="0"></dd>
<dt id="t2">20-inch</dt>
<dd id="d2"><img src="http://images.apple.com/imac/images/graphicscompareimac20.jpg" alt="20-inch iMac" width="290" height="270" border="0"></dd>
<dt id="t3">24-inch</dt>
<dd id="d3"><img src="http://images.apple.com/imac/images/graphicscompareimac24.jpg" alt="24-inch iMac" width="290" height="270" border="0"></dd>
</dl>
Ok, honestly my first thought. Holy crap they used a definition list. That’s great! Semantic markup! Way to go apple! But, I’m not writing this to praise apple. I’m writing to use apple like they’ve used me. Quickly then I re-markup their markup to be more appealing and have much more betterness. Check it here:
My XHTML
<dl id="features-imac">
<div title="17 inch imac" class="show">
<dt>17-inch</dt>
<dd>
<img src="http://images.apple.com/imac/images/graphicscompareimac17.jpg" alt="17-inch iMac" width="290" height="270" />
</dd>
</div>
<div title="20 inch imac">
<dt>20-inch</dt>
<dd>
<img src="http://images.apple.com/imac/images/graphicscompareimac20.jpg" alt="20-inch iMac" width="290" height="270" />
</dd>
</div>
<div title="24 inch imac">
<dt>24-inch</dt>
<dd>
<img src="http://images.apple.com/imac/images/graphicscompareimac24.jpg" alt="24-inch iMac" width="290" height="270" />
</dd>
</div>
</dl>
Since this is a short article, let me give you the highlights of what I changed:
My Changes
- I indented the code in a way that was cooler aka readable
- I removed the superfluous ids on every tag
- I put some title attributes on the items
- I changed the main DL id to be more appropriate
- I added div’s you see to give structure to each definition list term and it’s definition. In a perfect world, I would use a DI, used exactly for that purpose, but some company’s browsers suck and don’t adhere to standards much. So, I decided to go with the oh-so-popular DIV.
- I added a class of “show” to the grouping of terms and definitions that needed focus from the start…the initial image to show.
After the code changes, I went all out writing some CSS to accomplish the behaviors (without Javascript). It worked like a gem, however, in one of the worst browsers ever, it failed…huh I wonder why? Well, like you guessed, Internet Explorer won’t support the :hover pseudo state on anything but the anchor tag. Now I could add some anchors and make it work or add links and link them to their specific model and that would fix that…maybe.
But I didn’t want to do that because this was more of an excercise for good browsers just to see what our future might hold. But alas, since I had to make it work in Internet Explorer 6, I wrote a little more CSS to do the trick. So, instead of using the CSS javascript :hover everything , I just wanted to use my own methods (which im sure others have done) and here’s the code:
The Simple CSS Hover Style for IE6
<!--[if IE 6]>
<style type=”text/css” media=”screen”>
body *{
unicode-bidi: expression(
this.onmouseover = function(){this.className += ‘ hover’;},
this.onmouseout = function(){this.className = this.className.replace(’hover’,”);}
);
}
</style>
<![endif]–>
Basically, this behavior (only in IE6) applies a onmouseover and onmouseout function to all elements. All the function does is add a class of hover and remove a class of hover to any element when it is mouseover’d and mouseouted. So, like a good little CSS jockey, we know that now we can add additional rules to target element:hover for good browsers and element.hover for evil browsers. And that’s that!
So here’s the CSS (you’ll have to figure this out yourself)
<style type="text/css" media="screen">
dl#features-imac{
width:290px;
margin:10px;
position:relative;
float:left;
}
dl#features-imac div,
dl#features-imac dt,
dl#features-imac dd{
padding:0px;
margin:0px;
display:block;
}
dl#features-imac dd{
width:290px;
height:270px;
border-bottom:2px solid #ccc;
position:absolute;
left:0px;
top:0px;
float:left;
z-index:1;
}
dl#features-imac dt{
float:left;
position:relative;
width:32%;
height:3em;
line-height:3em;
z-index:3;
text-align:center;
padding-top:270px;
cursor:default;
background:url(up_arrow.gif) center 267px no-repeat;
color:#ccc;
}
html>body dl#features-imac dt{
background:url(up_arrow.gif) center 263px no-repeat;
}
dl#features-imac dt:hover, dl#features-imac dt.hover{
background:url(up_arrow_over.gif) center 267px no-repeat;
color:#333;
}
dl#features-imac div:hover dd, dl#features-imac div.hover dd{
z-index:2;
border-bottom:2px solid #333;
}
html>body dl#features-imac dt:hover{
background:url(up_arrow_over.gif) center 263px no-repeat;
color:#333;
}
dl#features-imac div.show dd{
z-index:2;
}
</style>
The final product
I have the complete file for view here. Take it, use it, enjoy it…but not too much. Let me know if you can make it better. Go ahead…view source…you know you want to.
30 Comments »