Hover problem

**robives** · Sep 24, 2007 11:20

I'm a noob to CSS trying to make the break away from table based design.
I'm creating a page with a horizontal menu across the top (files attached)
I'm trying to make the whole of each list item change colour when the pointer is hovering but at the moment on the text bounding box changes colour. Any ideas what I am doing wrong?

Thanks

PS - Dreamweaver of Coda for writing web standards code?

**Dan Schulz** · Sep 24, 2007 14:14

Well, unfortunately I can't see your code until the attachment is approved, and I don't have the abilitly to do that (only Advisors and higher ups can do that stuff).

In the meantime, can you post the code you have here on the forum, making sure to enclose them inside bracketed (as in [ ] not < > ) HTML and CODE tags?

**robives** · Sep 24, 2007 23:03

Oops! You live and learn :-)
I have uploaded the page here

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="scripts/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">
<img src="images/piglogo.jpg" alt="Flying Pig" />
</div> <!-- End of header -->
<div id="menu">
<ul>
	<li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Printed</a></li>
    <li><a href="#">Downloadable</a></li>
</ul>
<br clear="left">
</div> <!-- End of menu-->

<div id="mainbody">
  <p>hello</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;  </p>
</div> <!-- End of mainbody -->

<div id="bodymenu">
</div> <!-- End of body menu -->

</div> <!-- End of container -->
</body>
</html>

Code:

@charset "UTF-8";
#menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #999999;
	width: auto;
}
#menu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#menu li {
	list-style-position: outside;
	line-height: normal;
	background-color: #999999;
	color: #FFFFFF;
	border-left-width: 5px;
	border-left-style: solid;
	border-left-color: #990000;
	font-style: normal;
	text-indent: 0px;
	float: left;
	padding-top: 3px;
	padding-right: 25px;
	padding-bottom: 3px;
	padding-left: 10px;
	height: auto;
	width: auto;
}
#menu li a, #menu li a:visited {
	color: #FFFFFF;
	text-decoration: none;
	display: block;
}


#menu li a:hover {
	color: #FFFF00;
	background-color: #666666;
	display: block;
}
#mainbody {
	background-image: url(../images/backgroundgradient.jpg);
	background-repeat: repeat-x;
}
#container {
	width: 750px;
	padding-left: 10px;
}

**Dan Schulz** · Sep 24, 2007 23:31

OopI'd go with something like this then:

Code XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Horizontal List Based Menu</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="description" content="A description of this page goes here." />
	<meta name="keywords" content="Keywords go here" />
	<style type="text/css" media="screen,projection">
 
	* {
		margin:0;
		padding:0;
	}
 
	body {
		background: #EEE;
		color: #000;
		font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif;
	}
 
	#menu {
		background: #CCC;
		color: inherit;
		height: 2em;								/* IE Haslayout - fix double margin */
		line-height: 2em;
		list-style: none;
	}
		#menu li {
			display: inline;
			white-space: nowrap;
		}
			#menu a {
				background: #0E0;
				color: inherit;
				float: left;
				height: 2em;
				margin-right: 1px;
				padding: 0 0.5em;
				text-decoration: none;
			}
 
			#menu a:active,
			#menu a:focus,
			#menu a:hover {
				background: #FF8;
				color: #000;
			}
 
	</style>
</head>
<body>
	<ul id="menu">
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
		<li><a href="#">Menu Item</a></li>
	</ul>
</body>
</html>

Note that the very first CSS rule resets the margins and padding of EVERYTHING (and their monkeys' uncles) to ZERO. This is very handy to use since you don't have to explicitly collapse margins or remove padding - just add them to the elements you want them to have.

This method (using the universal selector - which is what it's called, and no, it's not a hack) does have one major drawback: it can neuter (yes, that kind of neuter) form controls. So if you're going to be using a lot of forms and those forms are going to be critical to your site, I'd use another reset method instead.

(Ok, I took a closer look - I'd add a background color to the list items for your dark red effect, and then slide the anchors to the right a bit. But other than that, the principle is sound.)

**robives** · Sep 25, 2007 01:00

Hmm,
I've tried dropping this into dreamweaver and get nothing but a simple
vertical list with no backgrounds and no hover. Am I missing something?

Thanks

**robives** · Sep 25, 2007 01:23

Found the problem - the id of the menu was set to main-menu rather than menu.
Thanks for your help.
Rob

btw, could you tell me what the lines below are for?

Code:

   * {
        margin:0;
        padding:0;
    }

and what does the * mean?

**Dan Schulz** · Sep 25, 2007 01:43

Oops, sorry about that. I copied/pasted and cleaned up the code a bit from another project I've been working on. I'll take full responsibility for that SNAFU (by the way I fixed the code in my previous post).

As for the code snippet you provided, I already explained it in some detail earlier, bt I"ll do so again.

It's called the universal selector. It targets EVERYTHING on a Web page. In this case, it's resetting the margins and padding on every element (pair of HTML tags, basically) to zero.

It's very useful since each browser has its own defalults for certain elements, lists especially. So if you can take control and strip them out before resetting them manually yourself (giving elements margins and padding that need it, rather than adjusting for Browser X to make it look like it does in Browser Y, then having to hack for Browser Z and so forth), you'll be able to save yourself a lot of headaches.

**robives** · Sep 26, 2007 10:00

Thanks for your help!

User Tag List

Thread: Hover problem

Thread Tools

Display

Hover problem

Bookmarks

Bookmarks

Posting Permissions