Header and list menu CSS and HTML
Update: Paceville.com is now online.
It’s time to take a look at the menu, before we begin, it should be noted that the following CSS is based on the YAML CSS framework. I’ve thrown out all unnecessary things and duplicates.
Before we start feel free to open today’s demo in a new tab/window, remember again that it will probably not work on IE, there will probably be quirks in other browsers aswell. We’ll take care of that later.
As you can see in the demo we have a main menu and a sub-menu. Let’s take a look at what’s required to accomplish the current look, from top to bottom:
* { margin:0; padding: 0 }
body {
font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
font-size: 75.00%;
color: #fff;
background: url(images/bkg_small2.jpg)
}
a{
color:#ff0096;
text-decoration:none;
}
a:focus, a:hover, a:active {
color: #ff0096;
text-decoration: underline;
}These are typical global settings that will set the tone for everything to come, their settings will cascade down to everything that will not overwrite them. Note that we want to have a kind of pink color per default for all anchor tags, with an underline on mouse over. Note also the * at the top, that means all applicable types of elements will have a zero margin and padding.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}The magic bullet, the class that makes everything possible, as noted here the :after thingy will create a pseudo element after the element which has the clearfix class applied to it and as you can see we have clear: both, the end result will be the same as noted here.
Too bad the :after pseudo element power is not available in IE, yet another thing we have to take care of later.
#header{
position:relative;
height:90px;
}
#page_margins{
width: 960px;
margin: auto;
}
#page{
padding: 5px;
}
#nav{
margin: 0 12px;
}As you can see we don’t have a dynamic setup here, if we would’ve wanted something like that we could’ve used a max-width and min-width combination.
The page_margins DIV is just used to position the page in the middle as noted in the prior article with the margin: auto attribute.
The page DIV is simply used to pad the main page here and the nav DIV is used to get some extra space between the menu and the page “edge”.
#nav_main ul{
display: inline;
}
#nav_main ul li {
display: inline;
float: left;
line-height: 0.9em;
padding: 0.5em 0.8em 0.5em 0.8em;
}
#nav_main ul li a{
color: #000;
font-weight: bold;
}Note the display: inline setting everywhere, it’s needed to make the lists horizontal, at the same time we need the list elements to float left.
I found a very good explanation of the em unit here. The biggest em change here is line-height: 0.9em, it’s used to fine tune the position of the anchor texts in each menu item, in the middle vertically. Without it they would be a little bit too high up, especially in the sub menu.
#nav_main ul li.current a,
#nav_main ul li.current a:focus,
#nav_main ul li.current a:hover,
#nav_main ul li.current a:active {
color: #ff0096;
cursor:default;
}A good example of CSS being cumbersome, some syntax to avoid the blatant redundancy visible in the above listing is sorely needed. Anyway, as you might have suspected already, this is the stuff making the currently selected item pink.
Note cursor:default, when we use it we will typically get the default arrow on mouse over, that way it looks like the link is not clickable. This is what we want since it’s the currently selected item anyway.
#nav_main_left{
float: left;
width: 9px;
height:45px;
background: url(images/main_menu_left.png) no-repeat;
}
#nav_main_center{
height: 45px;
background: url("images/main_menu_bkg.jpg") repeat-x;
margin: 0 9px;
}
#nav_main_right{
float:right;
width: 9px;
height:45px;
background: url(images/main_menu_right.png) no-repeat;
}Note in the HTML the required order they appear, first the left one, then the right one and finally the center one:
<div id="nav_main_cont" class="clearfix">
<div id="nav_main_left" class="clearfix"> </div>
<div id="nav_main_right" class="clearfix"> </div>
<div id="nav_main_center">
<ul>
<li class="current"><a href="#">Start</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Bars & Restaurants</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Magazine</a></li>
</ul>
</div>
</div>This is the main containers responsible for shaping the main menu. Note how one is floating left, the other right and the middle one having no float setting at all. If we put the clearfix class on left and right we get them to line up perfectly next to each other.
#nav_main_center ul li{
border-right: 1px #fff dotted;
margin: 10px 0 0 0;
}
#nav_main_center ul li a {color: #fff; }Some specific stuff needed in the main menu, the lines between each item and a top margin to push them down so that they are positioned in the middle of the main menu background vertically.
#nav_sub_left{
float: left;
width: 5px;
height:27px;
background: url(images/sub_menu_left.png) no-repeat;
margin-left: 1px;
}
#nav_sub_center{
height: 27px;
background: url(images/sub_menu_bkg.png) repeat-x;
margin: 0 5px;
}
#nav_sub_right{
float:right;
width: 5px;
height:27px;
background: url(images/sub_menu_right.png) no-repeat;
margin-right: 1px;
}We lather, rinse and repeat with the sub menu, note how the center piece needs to have its margins set left and right to not mess with its caps, it needs to stay clear of them and that is the way to do it. Note the margin-left and -right attributes of one pixel, they need to be there in order to line up with the main menu.
#nav_sub_center ul li{
margin: 3px 0 0 0;
padding-left: 20px;
}
#nav_sub_center ul li a{
display: list-item;
}
#nav_sub_center ul li a:focus,
#nav_sub_center ul li a:hover,
#nav_sub_center ul li a:active {
text-decoration: underline;
color:#222;
}The most important thing here is the display: list-item attribute of the anchor element inside each list element, it is responsible for the small black discs in between each element. That’s how to avoid background pictures and other more unclean solutions as has been suggested in some places.
The result will for all intents and purposes be a horizontal bullet list.
#logo{
background: url(images/logo.png) no-repeat;
width: 273px;
height: 84px;
position:absolute;
top:0px;
left:10px;
}
#flash_container{
margin: 10px 0px 0px 12px;
}Finally some positioning of the logo and what will become a gigantic flash banner, at the moment we just use an image instead as a placeholder.
And the HTML:
<html>
<head>
<title>Paceville - The best partying in Malta</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="step2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="bkg_foot">
<div id="bkg_top">
<div id="page_margins">
<div id="page">
<div id="header">
<div id="logo"></div>
</div>
<div id="nav">
<div id="nav_main">
<div id="nav_main_cont" class="clearfix">
<div id="nav_main_left" class="clearfix"> </div>
<div id="nav_main_right" class="clearfix"> </div>
<div id="nav_main_center">
<ul>
<li class="current"><a href="#">Start</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Bars & Restaurants</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Magazine</a></li>
</ul>
</div>
</div>
<div id="nav_sub_cont" class="clearfix">
<div id="nav_sub_left" class="clearfix"> </div>
<div id="nav_sub_right" class="clearfix"> </div>
<div id="nav_sub_center">
<ul>
<li class="current"><a href="#">Latest News</a></li>
<li><a href="#">New Blogs</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Party guide</a></li>
<li><a href="#">This is Paceville</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="flash_container">
<img src="uploads/flash.jpg" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>