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
    Regular Coder
    Join Date
    Oct 2011
    Posts
    136
    Thanks
    4
    Thanked 0 Times in 0 Posts

    navigation and CSS

    I have this navigation and it was centered perfect until i decided to delete a link, and now i can't center it. can someone help?

    Code:
    #container {
    	height:330px;
        margin:0 auto;
        width:610px; 
     
    } 
    
    ul#list-nav {
     
        /*margin:20px;*/
    
        margin:20px auto 0;
     
        padding:0;
     
        list-style:none;
     
        /*width:525px;*/
    
        width:505px;
     
     } 
    
    ul#list-nav li {
     
        /*display:inline;*/
    
        float:left;
     
     }
      
    ul#list-nav li a {
     
        text-decoration:none;
     
        padding:5px 0;
     
        width:100px;
     
        background:#333;
     
        color:#fff;
     
        /*float: right;*/
     
        display:block;
     
        text-align:center;
     
        border-left:1px solid #fff;
     
     }
      
    ul#list-nav li a:hover {
     
        background:#666;
     
        color:#000;
    
     }
    
     #about {
    	  margin:0 auto;
    	  width:848px; 
     }
     
      #sites {
    	  height:auto;
    	  margin:0 auto;
    	  width:848px; 
     }


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"><html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Cj Web Consulting - Home</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    
    <body>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    
      <div id="container">
      <div id="banner">
     
     <img src="images/newbanner.jpg" width="610" height="330" alt="banner" >
    </div>
    
    <ul id="list-nav">
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About Us</a></li>
     <li><a href="portfolio.html">Portfolio</a></li>
     <li><a href="contact.html">Contact</a></li>
    </ul>
    
    </div>
    
    </body>
    
    </html>

  • #2
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Move width:100px; from ul#list-nav li a to ul#list-nav li and change the 100px to 25%.

  • #3
    Regular Coder
    Join Date
    Oct 2011
    Posts
    136
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you very much

  • #4
    Regular Coder
    Join Date
    Oct 2011
    Posts
    136
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I ran into a problem. I realized my logo was to big, and now it screwed up my navigation again. This is what i have now.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"><html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Cj Web Consulting - Home</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    
    <body>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    
      <div id="container">
      <div id="banner">
     
     <img src="images/newbanner.jpg" width="300" height="162" alt="banner" >
    </div>
    
    <ul id="list-nav">
     <li><a href="index.html">Home</a></li>
     <li><a href="about.html">About Us</a></li>
     <li><a href="portfolio.html">Portfolio</a></li>
     <li><a href="contact.html">Contact</a></li>
    </ul>
    
    </div>
    
    </body>
    
    </html>


    Code:
    #container {
    	height:162px;
        margin:0 auto;
        width:300px; 
     
    } 
    
    ul#list-nav {
     
        /*margin:20px;*/
    
        margin:20px auto 0;
     
        padding:0;
     
        list-style:none;
     
        /*width:525px;*/
    
        width:505px;
     
     } 
    
    ul#list-nav li {
     
        /*display:inline;*/
       
        float:left;
     
     }
      
    ul#list-nav li a {
     
        text-decoration:none;
     
        padding:5px 0;
     
         width:100px; 
     
        background:#333;
     
        color:#fff;
     
        /*float: right;*/
     
        display:block;
     
        text-align:center;
     
        border-left:1px solid #fff;
     
     }
      
    ul#list-nav li a:hover {
     
        background:#666;
     
        color:#000;
    
     }
    
     #about {
    	  margin:0 auto;
    	  width:848px; 
     }
     
      #sites {
    	  height:auto;
    	  margin:0 auto;
    	  width:500px; 
     }

  • #5
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    I don't get why you changed what you did back to what caused the problems.

    Again:
    Move width:100px; from ul#list-nav li a to ul#list-nav li and change the 100px to 25%.

    Also now that you changed the width of the banner you need to change the width oful#list-nav. Change the width there to width:100%;.

    You might find it easier to work with % rather than px. That will help keep everything relative to each other.


  •  

    Posting Permissions

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