How to Convert a Slick PSD Design to XHTML/CSS
Styling the #header
Now we need to style the header. We will make the #header
div 68px
in height with a dark gray/black background and a 2px bottom border. I decided to put the logo text to a negative -9999px
to make it so that you can make your own image the background. We then need to make the navagtion items float left so they are horizontal. Finally we make a .active
class to show the current page in the menu.
#header { background: #171717; border-bottom: 2px solid #252525; height: 68px; } #header #logo { float: left; text-indent: -9999px; } #header ul { float: right; height: 68px; padding: 17px 0; } #header ul li { color: #D1D1D1; display: block; float: left; font: bold 10px Verdana; padding: 10px 15px; } #header ul li a { color: #D1D1D1; text-decoration: none; } #header ul li a:hover { color: #FFF; } #header ul li:hover a { color: #FFF; } #header ul li.active { background: #252525; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; } #header ul li.active a { color: #FFF; } #header ul li:last-child { padding: 10px 0 10px 15px; }
Checkpoint
Your page should now look like this.
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14
This entry was posted on Thursday, September 16th, 2010 at 07:06 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Wow) this is a great tutorial!
Brilliant tutorial I will have to try it out asap.
Thanks alot ^^
Awesome Tutorial.
Thanks you for share.
Good tutorial for beginner like me, thank you 🙂
Very good tutorial, It covered a lot of things, thanks
Nice Tut 🙂
Dude, charset before title. 🙂
i’m going to have to take time on this one.thanks for sharing
Thanks you for share, great tutorial!
useful info. thanks..soon:)