CODEWITHSUNDEEP
htmlcss
so bbqpork
so bbqpork

Reputation: 25

UL/LI positioning spacing

I have been in this problem for a while now, everytime I resize the navigation bar it keeps on adding 1 line at the bottome if the size ddint match. can anyone help me delete that little space after the contact me tab? thanks in advance. this is the link of the outcome

enter image description here

my codes is this obj.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" type="text/css" href="obj1.css">
<title>Objective 1</title>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li class="navbutton"><a href="">About Us</a></li>
<li class="navbutton"><a href="">Our Team</a></li>
<li class="navbutton"><a href="">Education</a></li>
<li class="navbutton"><a href="">Health Care</a></li>
<li class="navbutton"><a href="">Advertising</a></li>
<li class="navbutton"><a href="">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>

obj1.css

body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

ul {
    display: inline-block;
    list-style-type:none;
    margin:0;
    padding:0;
}

li {
    float: left;
}

.header{
width: 900px;
height: 385px;
background-image: url(header.jpg);
}
.navbutton {
position: relative;
top: 310px;
width: 145px;
height: 75px;
margin-left: 0px;
margin-right: 5px;
background-image: url(link.png);
}

.navbutton a {
text-decoration:none;
}

.navbutton:hover{
background-image: url(linkselected.png);
}

Upvotes: 0

Views: 643

Answers (4)

Ejaz
Ejaz

Reputation: 8872

Check this jsfiddle for a fluid layout solution.

This solution uses the display: table, display: table-row, and display: table-cell property values.

Markup

 <div class="header">
     <div class="nav">
        <ul>
           <li class="navbutton">
              <a href="">About Us</a>
           </li>
           <li class="navbutton">
              <a href="">Our Team</a>
           </li>
           <li class="navbutton">
              <a href="">Education</a>
           </li>
           <li class="navbutton">
              <a href="">Health Care</a>
           </li>
           <li class="navbutton">
              <a href="">Advertising</a>
           </li>
           <li class="navbutton">
              <a href="">Contact Us</a>
           </li>
        </ul>
     </div>
  </div>

CSS

     body{
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
     }

     .nav ul{
        display: table-row;
        list-style-type: none;
        margin: 0;
        padding: 0;
     }

     .header{
        width: 900px;
        height: 385px;
        background: #f00 url(header.jpg);
        overflow: hidden;
        border: 1px solid #000
     }

     .nav{
        display: table;
        width: 100%;
        margin-top: 310px;
     }

     .navbutton{
        display: table-cell;
        height: 75px;
        background-image: url(link.png);
        padding: 0 4px;
     }

     .navbutton a{
        background: none repeat scroll 0 0 #FFFFCC;
        color: #FF0000;
        display: block;
        height: 100%;
        line-height: 75px;
        text-decoration: none;
        text-align: center;
     }

     .navbutton:hover{
        background-image: url(linkselected.png);
     }

     li:last-child, li.the_last_child{ padding-right: 0; }
     li:first-child, li.the_first_child{ padding-left: 0; }

Upvotes: 0

cimmanon
cimmanon

Reputation: 68319

You have 2 problems going on here. First, you have margins being applied where you don't actually want them. Even when you correct this, your header's width still causes the appearance of the undesirable "space"

http://tinker.io/0191d/2

Include the following modifications:

.header {
    width: 895px; /* or modify the width of the button elements */
}

ul {
    margin: 0 0 0 -5px;
}

.navbutton {
    margin-left: 5px;
    margin-right: 0;
}

You could use the :last-child selector to remove the margin on the last element, but it doesn't work very well in instances where you actually want your elements to wrap (see: http://codepen.io/cimmanon/pen/dwbHi). Also, IE8 doesn't support it.

Upvotes: 0

Hai Nguyen
Hai Nguyen

Reputation: 4059

You can fix this by adding the following rules:

//Change the header width to 901px to fit all the tabs
.header{
width: 901px;
height: 385px;
background-color: #ccc;
}

//Change the navbutton to be 146px wide
.navbutton {
position: relative;
top: 310px;
width: 146px;
height: 75px;
margin-left: 0px;
margin-right: 5px;
background-color: white;
}

//Remove the margin on the last child
.navbutton:last-child {
    margin-right:0;
}

Here is the jsFiddle in case you need it - http://jsfiddle.net/XXczL/

Upvotes: 1

Naman Attri
Naman Attri

Reputation: 1

place all the <li> tags in a <div> set css for that <div id="customDiv">

#customDiv { margin-left:auto; margin-right:auto; }

this will make the left and right margin equal and the extra space is distributed equally on both sides..

Upvotes: 0

Related Questions