CSS Tables: Formatting a Web Page with CSS Part 2
This is part two of the Formatting a Web Page with CSS tutorial. If you missed part one, make sure you complete it prior to viewing this CSS tutorial.
Our next step will be to add our navigation section to our HTML page. We will be adding the following CSS code between the <body> and </body> tags:
<div id="navigation">
<h1>Website Name</h1>
</div>
This CSS code will specify where our navigation menu is to be displayed within the web page.
Navigation HTML Code
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<div id="header">
<h1>Website Name</h1>
</div>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</body>
</html>
Notice we have added <div id="navigation"> to our HTML code.
Our next step will be to add some CSS code to our page to format our new navigation section.
Place the following code between the <head> and </head> tags:
Navigation CSS Code
<style type= "text/css" title="styleid" media="all">
<!–
#header
{
background: #ddd;
padding: 25px;
}
#header h1
{
margin: 0;
font-family: Verdana, Geneva, sans-serif;
}
#navigation
{
float: left;
width: 100%;
background:#808080;
font-family: Verdana, Geneva, sans-serif;
font-size:12px
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color:#fff;
text-decoration: none;
border-right: 2px solid #fff;
}
#navigation li a:hover
{
background: #afadad;
}
–>
</style>
The id #navigation within the above CSS matches the <div id="navigation"> we placed within our HTML code.
The id #navigation ul enables us to format the text within our navigation menu.
The id #navigation ul li enables us to further format the text within our navigation menu.
The id #navigation li a enables us to format the navigation links within the menu.
The id #navigation li a:hover is used to create the color change on mouseover within the navigation menu.
When using this navigational menu, you will need to edit the text and URL’s to suit your needs.
This concludes part two of the CSS tables lesson. In the next lesson, we will continue with part three of how to format your web page with CSS.