A Flash Developer Resource Site

Results 1 to 2 of 2

Thread: A ccs html problem when using <ul> as menu navigation

  1. #1
    Junior Member
    Join Date
    Aug 2000
    Posts
    11

    A ccs html problem when using <ul> as menu navigation

    This is my html code
    Code:
    <html>
    <head>
    <title>XXX company</title>
    <link rel='stylesheet' media="screen" type='text/css' href='style.css' />
    </head>
    <body>
    <div id="container">
    <div id="header">
    <div id="logo">
      <h1>XXX company</h1>
    </div>
    
    <div id="menu_bar">
    <ul>
      <li><a href="#"><img src="img/but_home.jpg"></a></li>
      <li><a href="#"><img src="img/but_company.jpg"></a></li>
      <li><a href="#"><img src="img/but_service.jpg"></a></li>
      <li><a href="#"><img src="img/but_calculation.jpg"></a></li>
      <li><a href="#"><img src="img/but_news.jpg"></a></li>
      <li><a href="#"><img src="img/but_message.jpg"></a></li>
      <li><a href="#"><img src="img/but_partner.jpg"></a></li>
      <li><a href="#"><img src="img/but_contact.jpg"></a></li>
    </ul></div>
    
    /div>
    </body>
    </html>
    This is the style.css
    Code:
    body {
      text-align:center;
    }
    
    div {
      margin:0;
      padding:0;
      outline:1px solid red;
    }
    #header {
      height:174px;
      padding:0px;
     
      
    }
    
    #logo {
      height:140px;
      background:url(img/top.jpg) no-repeat;
    }
    .spacer {
    clear:left;
    }
    #menu_bar {
      
      float:left;
      height:34px;
      padding:0px;
      margin:0px;
      text-align:left;
    }
    
    li img {
      border:0px;
      margin:0px;
      padding:0px;
    }
    #lang_bar {
      float:left;
      text-align:left;
    }
    
    #menu_bar ul {
      list-style:none;
      margin:0px;
      padding:0px;
    }
    #menu_bar li {
      display:inline;
      margin:0px;
      padding:0px;
    }
    #menu_bar li a:link, #menu_bar li a:visited {
    text-decoration:none;
    font-weight:bold;
    }
    
    #lang_bar ul {
      list-style:none;
      margin:0px;
      padding:0px;
    }
    
    #lang_bar li {
      display:inline;
      margin:0px;
      padding:0px;
    }
    
    #content {
      float:right;
      width:711px;
      text-align:left;
    }
    
    #left_col {
      float:right;
      width:291px;
      height:400px;
      background:url(img/left_col.jpg) no-repeat;
      text-align:left;
    }
    
    #address {
    text-align:left;
    }
    #container {
      width:1024px;
      margin:20px auto;
    }
    #footer {
      clear:both;
      height:56px;
      background:url(img/footer.jpg) no-repeat;
      text-align:left;
    }
    The result is there is a gap between each button image as show below


    I have set all stuffs related to element spacing and positioning like margin , padding to zero px.

  2. #2
    Senior Member ihoss.com's Avatar
    Join Date
    Oct 2004
    Location
    Norway
    Posts
    581
    Its because you have a newline character at the end of each line inside the <ul>. HTML interprets this as a space. Put everything on a single line, and there should be no spaces. Alternatively you can make the <li>'s float to the left.

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center