Home/ Questions/Q 8965551
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T16:49:44+00:00

I have a questions about a horizontal navigation bar. I want to create a

  • 0

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:

* {
         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;
}

and this is the html code:

<html>
<head>
<title>test</title>

<link rel="stylesheet" type="text/css" href="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="main.html" target="_self">text1</a></li>
          <li><a href="text2.html">text2</a>
          <li><a href="text3.html">text3</a></li>
          <li><a href="text4.html">text4</a></li>          
 </ul>


<div id="content">

<font size="+3">Title</font>

<br>
<br>

Content...

<br>
<br>

</div>

</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want #navigation to display as float, you may add clear:both to your #content.

    #content {
   background: #EBF7FF;
   width: 1024px;
   height:768px;       
   text-align: justify;
   clear:both;
}

    But to my mind better solution would be displaying it as block and li as inline-block or display it as table and li as table-cell

    • 0