PDA

View Full Version : Cascading problem in UL menu



ksquires
Mar 12th, 2008, 05:38 PM
Could someone please explain what I'm doing wrong here? I want the first 4 links with red backgrounds, and the last with cyan, but they all stay red:
------------------------------------------------
<html>
<head>
<title>title</title>
<style type="text/css">

.mainmenu {
padding:0px;
margin:0px;
}

.mainmenu li {
list-style-type:none;
float:left;
display:block;
padding:0px 13px 0px 13px;
background:#dd0000;
white-space:nowrap;
}


.mainmenulast {
background:#00ffff;
}

</style>

</head>
<body>

<ul class="mainmenu">
<li><a href="our_story.html">Our Story</a></li>
<li><a href="why_choose_us.html">Why Choose Us?</a></li>
<li><a href="industry_affiliations.html">Industry Affiliations</a></li>
<li class="mainmenulast"><a href="contact_us.html">Contact Us</a></li>
</ul>

</body>

</html>

------------------------------------------------
All help greatly appreciated!

jcdevelopment
Mar 12th, 2008, 06:04 PM
li.mainmenu {
list-style-type:none;
float:left;
display:block;
padding:0px 13px 0px 13px;
background:#dd0000;
white-space:nowrap;
}





change it to this!

effpeetee
Mar 12th, 2008, 06:06 PM
Try this.

You also need a DOCTYPE. as your first line of code.

Something like this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Frank


.mainmenu {
padding:0px;
margin:0px;
}

.mainmenu li {
list-style-type:none;
float:left;
display:block;
padding:0px 13px 0px 13px;
background:#dd0000;
white-space:nowrap;
}


.mainmenulast li{
list-style-type:none;
float:left;
display:block;
padding:0px 13px 0px 13px;
background:#00ffff;
white-space:nowrap;
}
</style>

</head>
<body>

<ul class="mainmenu">
<li><a href="our_story.html">Our Story</a></li>
<li><a href="why_choose_us.html">Why Choose Us?</a></li>
<li><a href="industry_affiliations.html">Industry Affiliations</a></li></ul>
<ul class="mainmenulast"><li><a href="contact_us.html">Contact Us</a></li>
</ul>

dome90uk
Mar 12th, 2008, 06:07 PM
OR you could add this



.mainmenu li.mainmenulast {
background-color:#00ffff;
}

_Aerospace_Eng_
Mar 12th, 2008, 06:26 PM
Sighs. None of those solutions will work (other than dome9uk's) and one forces you to add another unordered list in there for no reason. CSS is all about cascading. Being specific helps.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.mainmenu {
margin:0;
padding:0;
list-style:none;
}
.mainmenu li {
float:left;
display:block;
padding:0px 13px 0px 13px;
background:#D00;
}
.mainmenu li.mainmenulast {
background:#0FF;
}
</style>
</head>
<body>
<ul class="mainmenu">
<li><a href="our_story.html">Our&nbsp;Story</a></li>
<li><a href="why_choose_us.html">Why&nbsp;Choose Us?</a></li>
<li><a href="industry_affiliations.html">Industry&nbsp;Affiliations</a></li>
<li><a href="#">Some&nbsp;Other&nbsp;Link</a></li>
<li class="mainmenulast"><a href="contact_us.html">Contact Us</a></li>
</ul>
</body>
</html>

Also white-space:nowrap; is IE only.(

ksquires
Mar 12th, 2008, 06:26 PM
wow, this is an insanely helpful forum!

Thank you all for the speedy help!

(btw, I do have a doctype on the page, I just cropped the code down to the basics for posting here)

_Aerospace_Eng_
Mar 12th, 2008, 06:28 PM
Don't know if you saw the last solution posted which is what you wanted in the first place.

effpeetee
Mar 12th, 2008, 06:35 PM
Don't know if you saw the last solution posted which is what you wanted in the first place.
Aero, I did put the last posted code into my PC but it didn't work.
I forgot to amend my html.

Dozey Frank


(btw, I do have a doctype on the page, I just cropped the code down to the basics for posting here)

You should include all your code.

The Doctype is very important and can affect the final outcome.

ksquires
Mar 12th, 2008, 06:40 PM
white-space:nowrap; seems to work in FF also...

ksquires
Mar 12th, 2008, 06:42 PM
Aero, I did put the last posted code into my PC but it didn't work.
I forgot to amend my html.

Dozey Frank



You should include all your code.

The Doctype is very important and can affect the final outcome.
I understand that, but in this case, I tested it and it really made no difference - what I posted was just a very small portion of a larger page

effpeetee
Mar 12th, 2008, 06:53 PM
I understand that, but in this case, I tested it and it really made no difference - what I posted was just a very small portion of a larger page

Not to be pedantic, but we would not know that and may require two more posts to find out.

Anyway, Glad you got the help you needed, and welcome aboard.

Frank