image-background behind li display ?

Discussing Html . Code , Software , other

Moderators: macek, egami, gesf

conor909
New php-forum User
New php-forum User
Posts: 4
Joined: Fri Dec 02, 2011 1:06 am

image-background behind li display ?

Postby conor909 » Mon Jun 18, 2012 12:00 am

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
New php-forum User
New php-forum User
Posts: 1
Joined: Mon Jun 18, 2012 12:00 am

Re: image-background behind li display ?

Postby puzzell » Mon Jun 18, 2012 12:19 am

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

conor909
New php-forum User
New php-forum User
Posts: 4
Joined: Fri Dec 02, 2011 1:06 am

Re: image-background behind li display ?

Postby conor909 » Mon Jun 18, 2012 1:24 am

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
New php-forum User
New php-forum User
Posts: 4
Joined: Fri Dec 02, 2011 1:06 am

Re: image-background behind li display ?

Postby conor909 » Mon Jun 18, 2012 1:26 am

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;
}


User avatar
freshnet
php-forum Active User
php-forum Active User
Posts: 283
Joined: Tue Feb 22, 2011 8:19 am
Location: Canada

Re: image-background behind li display ?

Postby freshnet » Fri Jul 27, 2012 5:43 am

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
New php-forum User
New php-forum User
Posts: 24
Joined: Sun Jul 29, 2012 5:38 pm

Re: image-background behind li display ?

Postby bliss » Sun Jul 29, 2012 5:46 pm

freshnet wrote: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.


Return to “HTML Basics”

Who is online

Users browsing this forum: No registered users and 1 guest