image-background behind li display ?

[conor909]

I am trying to do something very simple in my navigation. Put a background image behind each List Item.

The problem is, the image is only visible directly behind the text. I have set the width and height of my li to be the same as my image, which is working but for some reason the text still dictates how much you can see of the image.. It seems to work when my nav is display as a block, but inline is not working. Iv now tried display:block with float:left, and that still isnt working. Any suggestions?

Here is my code:

Code: Select all

<div id="header">
  <div id="logo" style="float:left"><a href="index.php"><img src="/test/images/logo.jpg" /></a></div><!--Logo-->
 
  <div id="navigation" style="float:right;" ><!--Begin Navigation-->
    <ul>   
   <li style="list-style-image: url(/image/icn_interactive.jpg);"><a href="/interactive.php">interactive</a></li>    
      <li><a href="/print.php">print</a></li>
      <li><a href="/painting.php">painting</a></li>
      <!--<li><a href="#">branding</a></li>-->
      <li><a href="/personal.php">personal</a></li>
      <li><a href="/contact.php">contact</a></li>
      <li style="border:none"><a href="http://maosinteractive.blogspot.com/" target="_blank">blog</a></li>
    </ul>
 
  </div><!--End Navigation-->
</div><!--End Header-->


Here is my CSS:

Code: Select all

#header {
   margin: 0px auto; 
   position:relative;
   height:83px;
   width: 100%;
}

#navigation {
   position:absolute;
   margin: 0px auto;   
   padding: 3px 0px;
   bottom:0px;
   right:0px;
   text-align: center;
   height:83px;
}

#navigation ul {
   position:relative;
   font-family: Helvetica, Arial, Helvetica, sans-serif;
   font-size:14px;
   float:right;
   bottom:0px;
   margin: 0px;
   min-height:83px;
   }

#navigation ul li {
   position:relative;
   display: block;
   float:left;
   list-style-type: none;
   line-height: 40px;
   margin: 0px 20px;
   width:92px;
   min-height:51px;
}

#navigation ul li a {
   text-shadow: 1px 1px #000;
   color: #f4f4f4;
   margin-left: auto;
    margin-right: auto;
   text-decoration: none;
   background:url(/test/images/button_bknd.png) center  no-repeat;
   width:92px;
   min-height:51px;
}


[puzzell]

could you show us the design plz so that we could kno how you wanted your css...

[conor909]

Hi thanks for your quick reply! I realize it wasn't such a clear question so allow me to clear it up..

Here is a link to a screen shot of what I was getting..
http://screencast.com/t/TQk67JKVci

After mucking around with padding on my 'navigation ul li a', it seems to have opened up the spacing ("window") surrounding the text before.
It gave me this result..
http://screencast.com/t/6MO17WXgCuLz

So I have achieved what I wanted in terms of the visible button, but

1/ The spacing is not the same between each button

2/ I dont understand the margins / spacing code, so it just seems very messy

If anyone could clear it up for me it would be much appreciated. Thanks!

[conor909]

Oh and here is my updated css

Code: Select all


#header {
   margin: 0px auto; 
   position:relative;
   height:83px;
   width: 100%;
}

#navigation {
   position:absolute;
   margin: 0px auto;   
   padding: 3px 0px;
   bottom:0px;
   right:0px;
   text-align: center;
   height:83px;
}

#navigation ul {
   position:relative;
   font-family: Helvetica, Arial, Helvetica, sans-serif;
   font-size:14px;
   float:right;
   bottom:0px;
   margin: 0px;
   min-height:83px;
   }

#navigation ul li {
   position:relative;
   display: block;
   float:left;
   list-style-type: none;
   margin: 0px 20px;
   width:92px;
   height:51px;
   margin-top:40px;
}

#navigation ul li a {
   text-shadow: 1px 1px #000;
   color: #f4f4f4;
   margin-left: auto;
    margin-right: auto;
   text-decoration: none;
   text-align:center;
   background:url(/test/images/button_bknd.png) center center no-repeat ;
   padding:26 30 26 30;
}

#navigation ul li a  img{
   display:block;
   margin-left: auto;
    margin-right: auto;
}

#navigation ul li a:hover{
   color: #1a1a1a;
   text-shadow:none;
   text-decoration: none;
   background:url(/test/images/button_down_bknd.png) center center no-repeat;
   padding:26 30 26 30;
}



[freshnet]

I would say you're better off using margins, as these will keep the space between elements fixed. The padding sets the spacing within the borders of the element, which can then throw off the margins if the container element is a fixed size.

[bliss]

I would say you're better off using margins, as these will keep the space between elements fixed. The padding sets the spacing within the borders of the element, which can then throw off the margins if the container element is a fixed size.

My thoughts exactly. Try playing around with the margins to get the right positioning.