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!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Menu Using CSS List

Status
Not open for further replies.
Teamgc

Teamgc

Programmer
Feb 15, 2006
37
IE
I have a menu using an unordered list in css (the css and html are below).

I now want one of my menu items to look different than the rest to stand out and I have no idea how to do this. Is it possible to create 2 styles for list items in an unordered list?

any ideas would be great

thanks


Code: 
ul.navigation {
	list-style:none;
	margin:0;
	padding:0;
    width: 100%;
}

ul.navigation li a {
	background-color:#000000;
	color:#FFFFFF;
	text-transform:uppercase;
    text-align: center;
	padding:2px;
    padding-right: 72px;
	border:2px solid white;
	margin:0 5px 0px 0;
	float: left;
	display: block;
    z-index: 0;
}
Code: 
<ul class="navigation">

<li><a href="index.html">HOME</a></li>
<li><a href="aboutus.html">ABOUT</a></li>
<li><a href="location.html">LOCATION</a></li>
<li><a href="tickets.html">TICKETS</a></li>
<li><a href="speakers.html">SPEAKERS</a></li>
<li><a href="links.html">EXTRA!</a></li>
</ul>

</div>
 
Sort by date Sort by votes
scratch that. I just did this, I don't know why it took me so long!

Code: 
#active a:link, #active a:visited, #active a:hover
{
    background-color:#1111ff;
	color:#FFFFFF;
	text-transform:uppercase;
    text-align: center;
	padding:2px;
    padding-right: 72px;
	border:2px solid white;
	margin:0 5px 0px 0;
	float: left;
	display: block;
    z-index: 0;
}

ul.navigation {
	list-style:none;
	margin:0;
	padding:0;
    width: 100%;
}

ul.navigation li a {
	background-color:#000000;
	color:#FFFFFF;
	text-transform:uppercase;
    text-align: center;
	padding:2px;
    padding-right: 72px;
	border:2px solid white;
	margin:0 5px 0px 0;
	float: left;
	display: block;
    z-index: 0;
}

Code: 
<ul class="navigation">

<li><a href="index.html">HOME</a></li>
<li><a href="aboutus.html">ABOUT</a></li>
<li><a href="location.html">LOCATION</a></li>
<li><a href="tickets.html">TICKETS</a></li>
<li><a href="speakers.html">SPEAKERS</a></li>
<li id="active"><a href="links.html">EXTRA!</a></li>
</ul>
 
Upvote 0 Downvote
I think you're missing the point of the C in CSS ("Cascading"). All of those anchor properties will be inherited, so you don't need to specify them again:

Code: 
<html>
<head>
	<style type="text/css">
		ul.navigation {
			list-style: none;
			margin: 0;
			padding: 0;
			width: 100%;
		}

		ul.navigation li a {
			background-color: #000000;
			color: #FFFFFF;
			text-transform: uppercase;
			text-align: center;
			padding: 2px;
			padding-right: 72px;
			border: 2px solid white;
			margin: 0 5px 0px 0;
			float: left;
			display: block;
			z-index: 0;
		}

		#active a:link,
		#active a:visited,
		#active a:hover {
			background-color: #1111FF;
		}
	</style>
</head>

<body>
	<ul class="navigation">
		<li><a href="index.html">HOME</a></li>
		<li><a href="aboutus.html">ABOUT</a></li>
		<li><a href="location.html">LOCATION</a></li>
		<li><a href="tickets.html">TICKETS</a></li>
		<li><a href="speakers.html">SPEAKERS</a></li>
		<li id="active"><a href="links.html">EXTRA!</a></li>
	</ul>
</body>
</html>

Hope this helps,
Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Snippets & Info:
The Out Atheism Campaign
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
560
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
456
PeDa
PeDa
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
998
spamjim
spamjim
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
464
198709km
198709km
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
478
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top