Menu Tabs (Part 2)
July 4th, 2009Drawing from the previous tutorial, I want to place the menu tabs in the following arrangement.
Working from the outside in, let’s position the page content. In the following HTML document, I’ve assigned ids to two elements.
- A container – This constrains the width of the page and centers it.
- The page – Houses the banner and page content
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="page">
<p>The page content will be placed here.</p>
</div>
</div>
</body>
</html>
Here is the corresponding style sheet named style.css:
body {
background-color: #334;
}
#container {
/* Centers on the page */
margin: 0 auto;
/* Width of container */
width: 500px;
}
#page {
background-color: #fff;
border: solid 1px #000;
padding: 0 10 0 10px;
}
The # directive targets an id. For example, #page looks for an html tag with an id of page and applies the style to it.
To center container I had to use margin: 0 auto;. Using text-align: center does not work as this centers the content within the container.
The four numbers in padding: 0 10 0 10px; correspond to padding top (north), right (east), bottom (south) and left (west), respectively.
This gives us the following web page. Everything outside of the page content is filled in with a dark grayish-blue color.
Adding the header image, we could place an img tag within the page div, but let’s using CSS to accomplish this.
Modify the html page to use another div with an id of header.
<div id="container">
<div id="header">
</div>
<div id="page">
The header graphic that I’m working with has a height of 122 pixels and a width of 596 pixels. The width of the container is 500 pixels and will truncate anything to the right of it.
Add the following CSS style:
#header {
background: url('131.jpg') no-repeat -25px;
height: 122px;
}
This gives us a header image:
All that is remaining is adding the menu tabs and we are done. Including the menu_tabs.css file from the previous tutorial and change the tab labels slightly we have.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="menu_tabs.css">
</head>
<body>
<div id="container">
<div id="header">
<ul class="menu_tabs rounded_top beige_tabs">
<li>Donald</li>
<li>Mickey</li>
<li>Goofy</li>
</ul>
</div>
<div id="page">
<p>The page content will be placed here.</p>
</div>
</div>
</body>
</html>
And…
We need to move the tabs to the bottom of the header image. Using vertical-align: bottom; did not produce the desired result. I had to scour the internet for the correct solution which is:
- Give the div housing the element in question relative positioning.
- Move the element to the bottom by giving it absolute positioning locating it at the bottom.
Without giving the housing element relative positioning, the menu tabs will be forced down to the bottom of the web page. I added height: 100% to the #page style (not shown below) to expand the page into fill the entire document to the bottom of the screen.
#header {
background: url('131.jpg') no-repeat -25px;
height: 122px;
position: relative;
}
.bottom {
bottom: 0px;
margin: 0 0 0 -20px;
position: absolute;
}
[/code
Add the style to the even-growing classes listed in the <code>ul</code> tag.
[code lang="html"]
<ul class="menu_tabs rounded_top beige_tabs bottom">
Now, the menu tabs appear in the correct position.
Source files: menu_tabs_20090704.zip