Step 3: The HTML and CSS
7 April 2007 - 10:50am
All the graphics have been created, so it's now just a matter of putting them all together in a web page.
1. First the drop shadow background, which we'll attach to a div called "content". So we'll start with that:
The width of the background is 500 pixels, and we'll centre it vertically in the page. The CSS should be:
2. Now we'll add in the picture. It is 480 pixels wide and 300 high, and make it as the background to a new div called "banner":
The CSS for the picture looks like this:
Note that the picture is placed 10 pixels in from the left hand edge so that it doesn't hide the drop shadow background.
3. Next comes the blob itself. Remember that the blob comes in two sections - the stretchy left hand side, and the fixed width right-hand side. We will create a container to hold these two sections so that they can be positioned as one item.
Give the menubarcontainer div some top padding so that it appears in the body of the picture, and adjust according to taste. Notice that the height of the container is the same as the height of our blob images.
Both sections of the blob are left-floated within the menubarcontainer. The dimensions of the right hand section are identical to the dimensions of the image we created. The height of the left hand section is again identical to the height of the left hand image. The width, however, should be just a little wider than the width of our logo.
4. Finally we'll add in our logo and the menu itself. We'll put them in the container that holds the left hand section of the blob.
The logo is given a margin to position it accurately within its containing div:
The menu is hidden by default so has a "display: none" style. It is also given the same height as the blob images, and some top padding to position it centrally within the blob.
Now we have all our items in place, and positioned accurately, the next task is to animate it, and that's where Mootools and JavaScript come in.
Step 4: Using Mootools to animate the menubar
1. First the drop shadow background, which we'll attach to a div called "content". So we'll start with that:
<div id="content">
</div>
The width of the background is 500 pixels, and we'll centre it vertically in the page. The CSS should be:
#content {margin: auto; width: 500px; min-width: 500px; background: #fff url("bg.png") repeat-y; padding: 0px;}
2. Now we'll add in the picture. It is 480 pixels wide and 300 high, and make it as the background to a new div called "banner":
<div id="content">
<div id="banner">
</div>
</div>
The CSS for the picture looks like this:
#banner {width: 500px; height: 300px; min-height: 300px; background: transparent url("picture.jpg") no-repeat 10px 0px; padding: 0px;}
Note that the picture is placed 10 pixels in from the left hand edge so that it doesn't hide the drop shadow background.
3. Next comes the blob itself. Remember that the blob comes in two sections - the stretchy left hand side, and the fixed width right-hand side. We will create a container to hold these two sections so that they can be positioned as one item.
<div id="content">
<div id="banner">
<div id="menubarcontainer"><div id="blobleft"></div><div id="blobright"></div></div>
</div>
</div>
Give the menubarcontainer div some top padding so that it appears in the body of the picture, and adjust according to taste. Notice that the height of the container is the same as the height of our blob images.
#banner #menubarcontainer {padding-top: 50px; margin-left: 0px; height: 55px;}
Both sections of the blob are left-floated within the menubarcontainer. The dimensions of the right hand section are identical to the dimensions of the image we created. The height of the left hand section is again identical to the height of the left hand image. The width, however, should be just a little wider than the width of our logo.
#banner #blobleft {background: transparent url("blobleft.png") no-repeat 0px 0px; width: 106px; height: 55px; float: left; margin: 0px;}
#banner #blobright {background: transparent url("blobright.png") no-repeat 0px 0px; width: 26px; height: 55px; float: left;}
4. Finally we'll add in our logo and the menu itself. We'll put them in the container that holds the left hand section of the blob.
<div id="content">
<div id="banner">
<div id="menubarcontainer"><div id="blobleft"><div id="blobmenu">Menu goes here</div><img src="bloblogo.png" id="bloblogo" alt="logo here" width="96" height="26" /></div><div id="blobright"></div></div>
</div>
</div>
The logo is given a margin to position it accurately within its containing div:
#banner #bloblogo {margin: 9px 0px 0px 12px;}
The menu is hidden by default so has a "display: none" style. It is also given the same height as the blob images, and some top padding to position it centrally within the blob.
#banner #blobmenu {height: 55px; float: right; display: none; color: white; margin: 0px; padding-top: 14px;}
Now we have all our items in place, and positioned accurately, the next task is to animate it, and that's where Mootools and JavaScript come in.
Step 4: Using Mootools to animate the menubar