PDA

View Full Version : Tabbed Navigation Images


WotNow
03-27-2011, 07:34 AM
Hi I am trying to place an image behind a list item for my navigation and as you can see not having great success. I would appreciate any help.

Here is my code

HTML

<div id="navigation">
<ul>
<li><a href="index.html" >Home</a></li>
<li><a href="aboutUs.html">About Us</a></li>
<li><a href="ourAircraft.html">Our Aircraft</a></li>
<li><a href="safaris.html">Air Safaris</a></li>
<li><a href="charterFlights.html">Charter Flights</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="photoGallery.html">Photo Gallery</a></li>
<li><a href="contactUs.html" class="first">Contact Us</a></li>
</ul>
</div><!--END of navigation-->
CSS
#navigation {
width:900px;
padding: 0 0 0 0;
margin: -28px auto 10px;
border-bottom-width: 20px;
border-bottom-style: solid;
border-bottom-color: #000;
}

#navigation ul{
margin:0 auto;
padding:0;
height:2em;
list-style:none;}

#navigation li{
display:inline;
background-image:url(../images/tabBg.png);
background-repeat: no-repeat;
margin:0;
padding:5px 12px 8px 12px;}

#navigation li a{
text-decoration:none;
font: .8em/1em Verdana, Arial, Helvetica, sans-serif;
color: #000;
height:30px;
padding: 10px;
margin: 0;}

http://i605.photobucket.com/albums/tt133/WhatNowThe2nd/Forums/TabbedNavigation.png

Ricky55
03-27-2011, 07:48 PM
You need to give li a width or all lis the same width if they are the same they do look the same actually. and then use text align centre.

You also need to use display: block on your li a to make sure the entire button is clickable.

When I'm doing these types of navs I just use background colours before I introduce the images I just find it easier to layout that way.

Hope that helps you if not come back.

One also note if they have an overstate make sure this is part of the same image and use background positioning to change it rather than changing the image or you'll get a nasty flash or white as the image first loads.

Finally, if you wanted to take these a step further you could not use the image at all and create the buttons using CSS3.

Ricky55
03-27-2011, 07:52 PM
Just read that back and it reads confusingly, you need to give the li a

The width and height and display block.

Also you dont really need the div just style the ul.

Use the shorthand border property:

border-bottom: 20px solid #000;

WotNow
03-28-2011, 12:34 AM
Hi, thanks for your response. I had already tried using the width and height but it made no difference. If I use display block my menu becomes vertical. Regarding using moz and web kit .. I was under the impression that this works only in safari and firefox and other compliant browsers but does not work for IE. Client is using IE. Thanks

http://i605.photobucket.com/albums/tt133/WhatNowThe2nd/Screenshot2011-03-28at95956AM.png

#navigation {
width:900px;
padding: 0 0 0 0;
margin: -28px auto 10px;
border-bottom: 20px solid #000;}

#navigation ul{
margin:0 auto;
padding:0;
height:2em;
list-style:none;}

#navigation li{
display:inline;
background-image:url(../images/tabBg.png);
background-repeat: no-repeat;
margin:0;
padding:5px 12px 8px 12px;}

#navigation li a{
text-decoration:none;
font: .8em/1em Verdana, Arial, Helvetica, sans-serif;
color: #000;
height:32px;
padding:5px 12px 8px 12px;
margin: 0;
width:95px;
text-align:center;
/*display:block;*/}

gentleone
03-28-2011, 07:08 AM
If you set display: block to the a tag then it's better to set the li tag to float: left instead of display: inline.
Also set the background image on the a tag instead of the li tag and left and right padding will give you also display differences. Remove them both on li and a. You already use text-align: center and this is enough.

Ricky55
03-28-2011, 10:00 AM
Yes thats right these must be floated and width must be used.

Regarding your css3 comments, only IE doesn't support border radius and that can either be omitted or added using CSS PIE which I use all the time for things like this.

Whenever i can I leave IE without such things I do but in this case your buttons may not look right without the cornered edge.

Don't let IE stop you using CSS3.

http://css3pie.com/

If you still can't get it working correctly come back and I'll fix it for you.

Ricky55
03-28-2011, 10:10 AM
for text align centre to look centred you need to remove your padding use margins to separate the li's

WotNow
03-28-2011, 12:08 PM
Many many thanks to you all! I finally have it working properly with background images to find out now that I can use pie for internet explorer. This knowledge will make me bless you guys for a long time to come.

Ricky55
03-28-2011, 01:17 PM
Nice one.

Yes PIE is excellent but try not to use it too heavily.

Remember your websites dont need to look exactly the same in every web browser. Your users won't compare what they see. As long as your design still works in IE that's fine.