CODEWITHSUNDEEP
htmlcss
CodeMonkey
CodeMonkey

Reputation: 2295

Background color set using CSS does not cover last element of list

I am designing a webpage where i have a navigation bar where i am keeping the background for the nav elements as dark blue. However, it keeps on missing the last element in my nav list and does not makes its color as blue.

Image looks like this:

Here is the html code:

<div id="content_block">
<div id="nav_bar">
<ul style="margin:0px; padding:10px 0px;" >
<li ><a  href="x.html#C1">PATENTS</a></li>
<li ><a  href="x.html#C2"><span style="position:relative;left:9px;">TRADEMARKS</span></a></li>
<li ><a  href="x.html#C3"><span style="position:relative;left:18px;">IP LAW &amp; POLICY </span></a></li>
<li ><a  href="x.html#C4"><span style="position:relative;left:27px;">PRODUCTS &amp; SERVICES</span></a></li>
<li ><a  href="x.html#C5"><span style="position:relative;left:36px;">INVENTORS</span></a></li>
<li ><a  href="x.html#C6"><span style="position:relative;left:45px;">NEWS &amp; NOTICES</span></a></li>
<li ><a  href="x.html#C7"><span style="position:relative;left:54px;">FAQs</span></a></li>
<li></li>
</ul>
</div>
</div>

Here is my CSS code

#content_block{
background-color:#FFFFFF;
margin:10px 0px
border:2px;
padding:10px 0px;
height:400px;
width:1024px;
}

#text{
max-height:400px;
max-width:900px;
margin:10px;
padding:5px}


#nav_bar{
margin:0px;
border:0px;
position:relative;
width:1024px;
}

ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}



li
{display:inline;
float:left;
background-color:#2E40AC;
color:#BAD2FF;
}

Upvotes: 0

Views: 291

Answers (1)

daniel.tosaba
daniel.tosaba

Reputation: 2563

It's because you've set background color to li elements but have text itself inside span element that is relatively positioned and being pushed by it's left property out of li element background color scope.

Rather then playing with position:relative and left:value you should achieve same thing using margin or padding property.

Once you have removed span add padding:0px 10px; property to li element.

Upvotes: 1

Related Questions