...

View Full Version : horizontal navigation bar problem



atearth
12-21-2009, 04: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>&nbsp;</p>
<p>&nbsp;</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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="post">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div><!-- end of container -->

<div id="footer">this is footer</div>
</div><!-- end of page -->

</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, 04:22 PM
The horizontal navigation bar does not fully appear.

#nav {/*style.css (line 18)*/
margin:0;
padding:0;
position:relative;
z-index:10;
}

atearth
12-21-2009, 04:26 PM
#nav {/*style.css (line 18)*/
margin:0;
padding:0;
position:relative;
z-index:10;
}

Thank you very much. Now I only have two problems to solve.

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?

abduraooft
12-21-2009, 04: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

atearth
12-21-2009, 05:05 PM
Thank you for answering part two.

Hopefully there will be a way to answer part 3.

or

If there was a code to solve part 3 before part 2 would that create the results?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum