Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Css Navigation Question


  • Please log in to reply
5 replies to this topic

#1 EPerrier

EPerrier

  • Members
  • 2 posts
  • OFFLINE
  •  
  • Local time:05:54 AM

Posted 11 March 2007 - 11:15 PM

Hi,
I have created quite a few very simple sites for people, and for the latest one I decided to use CSS for the navigation, basically so the block changes color when rolled-over. I didn't really think it through, because I want the block to remain the roll-over color once clicked - and since I'm using <ul>, I can't just change the bg color of one block.. If I'm making any sense. Here's the code I'm using, which if you copy/paste it all should work to show you the navigation. The goal is to change the background of just one link to #993300. Anyone know how to do this? If not, I can always use images, but this would be easier & less hassle I think. Thanks so much for any input.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Navigation Bar w/Rollover Effect</title>
<style type="text/css">
#navcontainer ul
{
margin: 0px;
padding: 0;
list-style-type: none;
}

#navcontainer li
{margin: 0 0 1px 0; }

#navcontainer a
{
display: block;
color: #ffffff;
background-color: #999999;
text-decoration: none;
width: 150px;
padding-top: 8px;
padding-bottom: 8px;
}

#navcontainer a:hover
{ background-color: #993300;
color: #FFFFFF; }

.links
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align: middle;
text-indent: 10px;
text-align: left;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul class="links">
<li><a href="index.html">About Us</a></li>
<li><a href="#">Sponsers</a></li>
<li><a href="#">Memberships</a></li>
<li><a href="#">News and Events</a></li>
<li><a href="#">Race Results</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Dory Personals</a></li>
<li><a href="#">Contact Us</a></li>

</ul>
</div>
</body>
</html>

BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:03:54 AM

Posted 12 March 2007 - 12:35 AM

Perhaps use onclick instead?

#3 RADIUM-V Interactive

RADIUM-V Interactive

  • Members
  • 159 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Somewhere East of Where You Are (think about it)
  • Local time:04:54 AM

Posted 12 March 2007 - 11:21 AM

I think this is what you want, but I'm not sure.

#navcontainer a:active {
	background-color: #993300;
	color: #FFFFFF;
}


#4 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:03:54 AM

Posted 12 March 2007 - 12:28 PM

Ooh, I didn't think of that. Probably a better solution than mine. :thumbsup:

#5 RADIUM-V Interactive

RADIUM-V Interactive

  • Members
  • 159 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Somewhere East of Where You Are (think about it)
  • Local time:04:54 AM

Posted 12 March 2007 - 05:19 PM

If the hover and active are both the same, save space and time by combining them.

#navcontainer a:hover, #navcontainer a:active {
	background-color: #993300;
	color: #FFFFFF;
}

And another thing - if you're going to be using XHTML with CSS, you might want to use XHTML Strict DOCTYPE instead of Transitional. It's not required, but it's best to use Strict when using CSS extensively.

#6 EPerrier

EPerrier
  • Topic Starter

  • Members
  • 2 posts
  • OFFLINE
  •  
  • Local time:05:54 AM

Posted 12 March 2007 - 09:57 PM

Thanks to everyone, I'll definitely give it a shot!




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users