I have a questions about a horizontal navigation bar. I want to create a page with an image as header (height:100px), a horizontal navigation bar and finally the content area ( height:768px). I wonder why the navigation bar taks place in the content area (that means that the content area gets smaller than 768px). How can I avoid this behaviour? Instead, I'd like to shift the content area downwards about the size of the navigation bar.This is my css code:\[code\]* { margin:0; padding:0;}body { background:#FFFFFF;}#frame { margin: auto; width: 1024px; height: 768px;}#header { width:100%; height:100px; background-image:url(image.jpg);}#navigation { width: 100%; float: left; list-style: none; background: #f2f2f2;}#navigation li { list-style: none; display: inline; float: left;}#navigation a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px solid #ccc;}#navigation a:hover { color: #c00; background-color: #fff;}#content { background: #EBF7FF; width: 1024px; height:768px; text-align: justify;}\[/code\]and this is the html code:\[code\]<html><head><title>test</title><link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/13787237/style.css"></head><body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"><div id="frame"><div id="header"></div> <ul id="navigation"> <li><a href="http://stackoverflow.com/questions/13787237/main.html" target="_self">text1</a></li> <li><a href="http://stackoverflow.com/questions/13787237/text2.html">text2</a> <li><a href="http://stackoverflow.com/questions/13787237/text3.html">text3</a></li> <li><a href="http://stackoverflow.com/questions/13787237/text4.html">text4</a></li> </ul><div id="content"><font size="+3">Title</font><br><br>Content...<br><br></div></div></body></html>\[/code\]
Why does my horizontal navigation bar take the space of the content area?
- Thread starter TimA
- Start date