horizontal navigation bar problem [Archive]

atearth

12-21-2009, 03:16 PM

Could someone please help with the problem that I have. Thank you.

The horizontal navigation bar does not fully appear. This one answered by abduraooft.

How to make the horizontal navigation bar appear across much like the red section that is above it?

How to make this horizontal navigation bar center across?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>Title of the document</title>
<style type="text/css">

</style>
</head>

<body>

<div id="page">
<div id="header">
<p> </p>
<p> </p>
</div>
<div id="nav">
<ul>
<li>
<a href="#">home</a>

<ul>
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
<li><a href="#">sub4</a></li>
</ul>

</li>
<li>
<a href="#">portolio</a>
<ul>
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
<li><a href="#">sub4</a></li>
</ul>
</li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a> </li>
</ul>
</div>

<p> </p>
<p> </p>
<p> </p>
<div id="container">
<div class="left">
<ul>
<li>
<a href="#">home</a>

<ul>
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
<li><a href="#">sub4</a></li>
</ul>

</li>
<li>
<a href="#">portolio</a>
<ul>
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
<li><a href="#">sub4</a></li>
</ul>
</li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a> </li>
</ul>
</div>
<div id="right">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="post">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>

<div id="footer">this is footer</div>
</div>

</body>
</html>

* {
margin: 0px;
padding: 0px;
}
#page{
background-color:
#33C
}

#header{
background-color: #F00;
padding: 5px;
margin: 5px
text-align: justify;
}

#nav {
padding: 0;
margin: 0;

}

#nav ul {
list-style-type: none;

}

#nav ul li {
position: relative;
float: left;

}

#nav ul li a {
display:block;
padding:10px 0;
width:100px;
background-color: #F90;
text-align:center;
text-decoration:none;
color: #000;

}

#nav ul li a:hover
{
display:block;
padding:10px 0;
width:100px;
background-color: #0CF;
text-align:center;
text-decoration:none;
}

#nav ul li ul {

display: none

}

#nav ul li:hover ul {

display: block;

position: absolute;

}

#nav ul li ul li a
{
background-color: #F00;
}

#container{
background-color: #C66;
padding: 5px;
margin: 5px;
position: relative
}

.left{
}

.left ul
{
padding:0;
position:absolute;
margin:0;
}

.left ul li
{
margin:0;
padding:0;
list-style-type: none;
position:relative;
}

.left ul li a
{
display:block;
padding:10px 0;
width:100px;
background-color: #F90;
text-align:center;
text-decoration:none;
color: #000;
}

.left ul li a:hover
{
display:block;
padding:10px 0;
width:100px;
background-color: #0CF;
text-align:center;
text-decoration:none;
}

.left ul li ul
{
display:none;

!important
;
}

.left ul li:hover ul
{
display:block; !important
position:absolute;
left:100px;
top: 0;
}

.left ul li ul li a
{
background-color: #F00;
}

#right{
background-color: #F90;
float: right;
width: 100px;
padding: 5px;

}

#post{
background-color: #FF0;
margin-right: 250px;
margin-left: 250px;
padding: 10;
}

#footer{
background-color: #09F;
clear: both;
background-position: bottom;
padding: 10px;
}

abduraooft

12-21-2009, 03:38 PM

I also want to know how to make the horizontal navigation bar appear across much like the red section that is above it.
<div id="nav">
<ul>
<li>
<a href="#">home</a>

<ul>
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
<li><a href="#">sub4</a></li>

</ul>

</li>
<li>
<a href="#">portolio</a>
<ul>
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
<li><a href="#">sub4</a></li>
</ul>
</li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a> </li>
<li class="last"></li>
</ul>
</div>

#nav {
padding: 0;
margin: 0;
background-color: #F90;
position:relative;
z-index:10;
}
#nav li.last{
float:none;
clear:left;
}
I also want to know how to make this horizontal navigation bar center across.It'll be a little tricky, since you have float applied on the list items. Take a look at http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support