Naviga Problem ?

Discussion in 'CSS' started by Venus, Nov 11, 2007.

0
  1. #1
    Hi , Why there is space between (buttons) Our projects and contact in my Horizontal Navigation bar. Please Help me to find and solve the Problem

    The code is bellow: Html + Css:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>


    <head>
    <title>&lt;&lt;--Home Page--&gt;&gt;</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <style>

    /* CSS Document */


    * { padding: 0; margin: 0; }

    body{
    font-family: Arial , Helvetica , sans-serif;
    font-size: 13px;
    }

    #container{
    margin: 0px auto;
    width: 779px;
    background-color: silver;
    }

    #header{
    float: left;
    width: 779px;
    height: 70px;
    margin: 0;
    padding: 0;
    border: 1px solid black;
    background: #9c9;
    color: #333;
    }

    #nav{
    float: left;
    width: 779px;
    margin: 0px;
    height: 25px;
    padding: 0px;
    border: 1px solid black;
    background: #3cf;
    color: #333;
    }

    /* Navigation style begin from here*/



    ul#navlist {
    margin-left: 165px;
    padding-left: 0px;
    white-space: nowrap;

    }
    #navlist li {
    display: inline;
    list-style-type: none;
    paddingt: 0px;

    }
    #navlist a { padding: 7px 10px;}

    #navlist a:link, #navlist a:visited {
    color: #fff;
    background-color: #036;
    text-decoration: none;
    }

    #navlist a:hover{
    color: #fff;
    background-color: #3cf;
    text-decoration: none;
    }


    #leftmnu{
    float: left;
    width: 150px;
    height: 400px ;
    margin: 0px;
    padding: 0px;
    border: 1px solid black;
    background: #9c9;
    displat: inline;
    }

    #content{
    float: left;
    width: 478px;
    height: 400px ;
    margin: 0px;
    padding: 0px;
    border: 1px solid black;
    background: #fff;
    color: #333;
    }

    #rightmnu{
    float: left;
    width: 150px;
    height: 400px ;
    margin: 0px;
    padding: 0px;
    border: 1px solid black;
    background:#9c9;
    color: #333;
    display: inline;

    }

    #footer{
    width: 779px;
    height: 25px;
    clear: both;
    margin: 0px;
    padding: 0px;
    border: 1px solid black;
    background: #3cf;
    color: #333;
    }


    </style>
    </head>



    <div id="container">
    <div id="header"><h1>English Literature</h1> </div>
    <div id="nav">

    <ul id="navlist" >
    <li id="active"> <a href="sample_Div.html" id="current"> Home </a></li>
    <li><a href="about.html"> About us </a></li>
    <li><a href="intrest.html"> Our Intrests </a></li>
    <li><a href="projects.html"> Our Projects</a></li>
    <li><a href="contact.html"> Contact us</a></li>
    </ul>


    </div>

    <div id="leftmnu"><h3>Categories</h3>

    <ul>
    <li><a href="#"> Literary Criticsm </a></li>
    <li><a href="#"> Western Literature</a></li>
    <li><a href="#"> fiction </a></li>
    <li><a href="#"> Literary Essays</a></li>
    <li><a href="#"> Vivoce</a></li>
    </ul>


    </div>
    <div id="content"><h2> This is My Home Page</h2>


    </div>
    <div id="rightmnu"><h2>Right Mnu</h2> </div>
    <div id="footer">Footer</div>
    </div>
    <body>

    </body>
    </html>
     
    Venus, Nov 11, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    They're display:inline - that means the carriage return between </li> and <li> is treated as a space just like all other inline elements.

    If you move the close bracket from the </li> down to the next line next to the li thus:

    <li><a href="#"> Literary Criticsm </a></li
    ><li><a href="#"> Western Literature</a></li
    ><li><a href="#"> fiction </a></li
    ><li><a href="#"> Literary Essays</a></li
    ><li><a href="#"> Vivoce</a></li>

    The space gets inserted inside the tag, so the space goes away while you can still maintain a fairly easy to read formatting - which beats the hell out of the other solution of making them all one big long line.
     
    deathshadow, Nov 11, 2007 IP
  3. anions

    anions Notable Member

    Messages:
    4,840
    Likes Received:
    179
    Best Answers:
    0
    Trophy Points:
    275
    #3
    Now that you mention it, I do remember seeing it in a couple of templates, but never thought abuot it or realized why they were doing it - now I do. Thanks :D
     
    anions, Nov 13, 2007 IP