Help in CSS

mlotfi · May 30, 2006

Hi,
I am trying to use this code to have a toolbar that has tabs, when I put 8 tabs they overlaped, how to change this css so all the tabs stay in one line :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"

http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>%%% Proposal Dev %%%</title>

<link rel="SHORTCUT ICON" href="/images/listamatic.ico">
<style type="text/css">
#navcontainer
{
background: #f0d7d7;
margin: 0 auto;
padding: 0.6em 0 0 0;
font-family: georgia, serif;
text-transform: lowercase;
}

/* to stretch the container div to contain floated list */
#navcontainer:after
{
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}

ul#navlist
{
list-style: none;
padding: 0;
margin: 0 auto;
width: 80%;
font-size: 0.8em;
}

ul#navlist li
{
display: block;
float: left;
width: 15%;
margin: 0;
padding: 0;
}

ul#navlist li a
{
display: block;
width: 100%;
padding: 0.2em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
{
background: #f0e7d7;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}
</style>
</head>
<body>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.html" id="current">Proposal</a></li>
<li><a href="index2.html">Organization</a></li>
<li><a href="#">Mailing Info</a></li>
<li><a href="#">Invistigator</a></li>
<li><a href="#">Key Person</a></li>
<li><a href="#">Special Review</a></li>
<li><a href="#">Science Code</a></li>
<li><a href="#">Other</a></li>
</ul>
</div>

Page one 111111111111111111111111111111111111111111111111

</body>
</html>

Thank you.

mbrooks · May 30, 2006

Here you go.

Code:

ul#navlist {
	[b]display: inline;[/b]
	font-size: 0.8em;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: 80%;
}

M. Brooks

http://mbrooks.info

mlotfi · May 30, 2006

Thank you for your help, but it's not working.

mbrooks · May 30, 2006

If you change this from 15% to let's say 100px, it works. Tested in Firefox and IE.

Code:

ul#navlist li {
display: block;
	float: left;
	[b]width: 100px;[/b]
	margin: 0;
	padding: 0;
}

M. Brooks

http://mbrooks.info

mlotfi · May 30, 2006

Thank you, it works, the only thing that does not work is :
always the first tab is highlited even if you click the others.

thank you again.

ca8msm · May 30, 2006

That's because only the first li element has an ID of "active". Rather than use an ID, use a class and set whichever element is "active" to that class.

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

mlotfi · May 30, 2006

I have 8 pages :

every page has it's current id set, for example
in the file organization.html I have :

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="proposal.html" >Proposal</a></li>
<li><a href="organization.html" id="current">Organization</a></li>
<li><a href="mailinginfo.html">Mailing Info</a></li>
<li><a href="invistigator.html">Invistigator</a></li>
<li><a href="keyperson.html">Key Person</a></li>
<li><a href="specialreview.html">Special Review</a></li>
<li><a href="sciencecode.html">Science Code</a></li>
<li><a href="other.html">Other</a></li>
</ul>
</div>

But always the proposal tab is selected !!!!!!

HDRules · May 30, 2006

Probably because you still have li id="active" in the first line. Try moving the id-"active" to the li before the organization.html. I did not see where you defined the id of current?

Motorcycle Rallies and Events

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Help in CSS

mlotfi

Programmer

mbrooks

Programmer

mlotfi

Programmer

mbrooks

Programmer

mlotfi

Programmer

ca8msm

Programmer

mlotfi

Programmer

HDRules

Programmer

Similar threads

Part and Inventory Search

Sponsor