Part 1: Slicing the PSD and Creating the XHTML
Part 2: CSS
I won’t lie to you. This video is a bit boring. It just isn’t fun to watch someone enter margin values for thirty minutes. 🙂 But it’s essential.
Part 3: Implementing a Bit of Javascript
Part 4: Kicking IE6′s Butt
Could we really call ourselves web developers if we didn’t have to fight with IE6? And is it a coincidence that “6″ is also the number associated with the devil? Who knows.
Mostly, the site looks just fine in IE6, but we should change a few quirks. Create a new stylesheet and call it “ie6.css”. Place it in your CSS folder. Then paste in the following.
#container #mainContent #tier2 { margin-bottom: 273px !important; } #tier3 #news { position: relative; left: .56em; } #header { height: 158px; } #header #login { top: 1em; right: 1.5em; }
There’s nothing that we really need to go over. Mostly, I’m adjusting the positioning of a few elements.
The last step is to reference our new stylesheet in the head tag of our document.
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="css/ie6.css" /> <![endif]-->
The PSD

The Website: 100% XHTML and CSS

I hope this helped you. Everyone has their own way of doing things; So I’d be interested to hear your thoughts. This tutorial was a huge undertaking. I’d appreciate a Digg if you found it to be beneficial.
Trả lời