Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    horizontal navigation bar problem

    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?

    Code:
    <!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>
    Code:
    * {
    	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;
    }
    Last edited by atearth; 12-21-2009 at 03:34 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The horizontal navigation bar does not fully appear.
    Code:
    #nav {/*style.css (line 18)*/
    margin:0;
    padding:0;
    position:relative;
    z-index:10;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    atearth (12-21-2009)

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Code:
    #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?
    Last edited by atearth; 12-21-2009 at 03:37 PM.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I also want to know how to make the horizontal navigation bar appear across much like the red section that is above it.
    Code:
    <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>
    Code:
    #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/b...rowser-support
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •