SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Hover problem

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hover problem

    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?
    Attached Files Attached Files

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.)
    Last edited by Dan Schulz; Sep 25, 2007 at 01:40.

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •