Tabs in CSS?

[Blue445]

Hello all.
I'm having some trouble in CSS. I'm trying to make tabs on top of a webpage, and was told to make each tab a Div. So I did that, and they end up getting stacked up on eachother.


Heres the code for my tabs:

#tabs
{
backgound-color: white;
height: 20px;
width: 950px;
margin-left: auto;
margin-right: auto;
}

#tab1
{
text-aline: left;
backgound-color: white;
height: 0px;
width: 95px;
padding-left: 20px;
}

#tab2
{
text-aline: left;
backgound-color: white;
height: 0px;
width: 95px;
padding-left: 115px;
}

#tab3
{
text-aline: left;
backgound-color: white;
height: 0px;
width: 95px;
padding-left: 230px;
}

#tab4
{
text-aline: left;
backgound-color: white;
height: 0px;
width: 95px;
padding-left: 345px;
}

#tab5
{
text-aline: left;
backgound-color: white;
height: 0px;
width: 95px;
padding-left: 560px;
}

I wrote the tab divs in that one big dive, but its still not working.

Any help plz?
Thanks.

[dm01]

If the navbar is working as planned, aside from this little problem, just add {display: inline} under div in the CSS.

Please keep in mind that spelling does count for all kinds of programming.

If not: we can create the navbar from a list of items. We just have to do some basic CSS tweaks to make it display the way we want.

This site should give you the basic idea: http://www.456bereastreet.com/archiv...avigation_bar/

[Blue445]

Cool man, thanks. It works now.

[Blue445]

Quick thing, i have a image of tabs, and would like to put that behind my actual tabs. Could you help?

[dm01]

Just add {background-image: url(relative_url_of_image)} to div.

[Blue445]

No matter what i do, it refuses to show.

[dm01]

Sorry, that should be background, not background-image. I was thinking of something else at the time and it screwed me up.

[Blue445]

Gah, its still not showing up :(

[dm01]

Are you using a relative URL or a complete URL? The relative URL begins in the FTP upload folder, and continues from that point. If you put the site address, it stuffs up.

[Blue445]

Well, I'm using a local image. Lets say I had two folders.
-Website
-CSS
-Images

I would type in my css: url(images/header.png)
Correct? The website is one folder, and has two separate folders, the css and another the images.

[dm01]

All right, I've got myself all tied up in knots. Let me try to debug this for you.

background: #FFFFFF url(../images/header.png) no-repeat center;

This will set the background image to a images/header.png, non-repeating, and centred. If images/header.png is unavailable, a white background is displayed (#FFFFFF is the hexadecimal equivalent of white. Browsers like hexadecimal best, followed by rgb, and then the English colour names).

I'm sorry for any confusion and inconvenience that may have resulted from my screwing up.

[Blue445]

It still being silly and not showing up

Heres the small HTML gallary

<!--TABS SECTION-->
<div id="tabs">
	
<ul id="nav">
	<li id="nav-home"><a href="#">Home</a></li>
	<li id="nav-about"><a href="#">Services</a></li>
	<li id="nav-archive"><a href="#">Gallery</a></li>
	<li id="nav-lab"><a href="#">About Us</a></li>
	<li id="nav-reviews"><a href="#">Contact Us</a></li>
   </ul>
</div>

And the CSS:

#tabs
{
width: 950px;
height: 26px;
margin-left: auto;
margin-right: auto;
background: #FFFFFF url(../images/header.png) no-repeat center;
}

[dm01]

How about a little test. Replace the #FFFFFF with #0600FF and see if there is a difference. If there is, check the URL. If there isn't, check your speling.

[Blue445]

I got it. Thanks man. :)

Cheers