Text goes here and continues across the page - this is a flexible layout!
The navbar uses a LIST, the CSS displays the list horizontally - "inline".
You might even add a list that is not part of the navbar and thus is not displayed horizontally:
- first item in the list
- second item in the list
CSS Coding:
body { font-family: Arial, Helvetica, sans-serif; font-size: small; color: #990000; padding: 0; margin: 0; }
a:link { color: #0066FF; text-decoration: underline; }
a:visited { color: #663366; text-decoration: underline; }
a:hover { color: #0033CC; text-decoration: none; }
a:active { color: #FF0000; text-decoration: underline; }
#wrapper { width: 100%; }
#header { padding: 3px; }
#navbar { font-weight: bolder;
background-color: #000084;
text-align: center;
color: #FFFFFF;
width: 100%;
font-size: medium; }
#navbar ul { margin: 0; padding: 0; list-style: none; }
#navbar li { display: inline; padding-right: 20px; padding-left: 20px; }
#navbar a:link { color: #CCCCCC; text-decoration: none; }
#navbar a:visited { color: #999999; text-decoration: none; }
#navbar a:hover { color: #666666; text-decoration: none; }
#navbar a:active { color: #FF0000; text-decoration: underline; }
#content { margin-left: 10px; margin-top: 3px; }
#footer { color: #CCCCCC; background-color: #000084; font-size: x-small; text-align: center;}
How many DIVISIONS DOES THIS PAGE CONTAIN to create the layout?