SitePoint.com

lethalrose · Oct 11, 2009, 01:16

Ok, I'm new to this so I apologize to all the veterans if my code is to sloppy. I've done a few CSS/HTML websites before, but I have never done something with rollovers. I would love to learn but I'm finding them to be very confusing. Right now, they seem to be working -- but for some reason they seem to be interfering with my "CSS sprites"? They just aren't working properly. They won't animate, and I can't get them to reposition no matter what I do. The left button just seems to be on top of the right button and I have no clue why. I've been looking at this for so long now and I'm running out of ideas. If someone could take a look at this and give me a bit of direction that would be truly appreciated.

CSS Code:

/* Template CSS stylesheet created 10/9/09 */
 
/*Top Template */
 
body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 100%;
    color: #64250a;
    background-color: #000000;
    margin-left: 20px;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    border: thin;
    border-color: 64250a;
}
 
 
#template{
    width: 770px;
    margin: 0 auto 0 auto;
    background-image: url(_images/Template_bg.png);
}
 
#header{
    position: absolute;
    top: 0px;
    width: 770px;
    height: 457px;
    background-color: #FFFFFF;
}
 
/*Main Navigation */
 
<!--
 
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
 
.navwrapper {
    position: absolute; 
    top: 59px;
    left: 105px;  
    width: 700px;
    height: 20px; 
}
 
 
#nav a {
    font-weight: normal;
    font-size: 11px;
    color: #64250a;
}
 
#nav a {
    text-decoration: none;
}
 
#nav a:hover {
    padding: 0.2em 5px;
    color: #FFFFFF;
    background-color: #64250a;
    border: 5px solid #64250a;
    border-width: 0 5px;
}
 
#nav li li a {
    display: block;
    font-weight: normal;
    font-size:11px;
    color: #64250a;
    padding: 0.2em 10px;
}
 
#nav li li a:hover {
    padding: 0.2em 5px;
    color: #FFFFFF;
    background-color: #64250a;
    border: 5px solid #64250a;
    border-width: 0 5px;
}
 
li {
    float: left;
    position: relative;
    width: 10em;
    text-align: center;
    cursor: default;
    background-color: #FFFFFF;
}
 
 
li ul {
    display: none;
    position: avsolute;
    top: 100%;
    left: 0;
    font-weight: normal;
    padding: 0.5em 0 1em 0;
    border: solid 1px #7d6340;
}
 
li>ul {
    top: auto;
    left: auto;
}
 
li li {
    display: block;
    float: none;
    background-color: transparent;
    border: 0;
}
 
li:hover ul, li.over ul {
    display: block;
}
 
/*Residential/Commericial Switch*/
 
#switchtabwrapper{   
    position: absolute; 
    top: 425px;
    left: 75px;  
    width: 770px;
    height: 26px;                        
}
 
ul#switchtab {
    list-style: none;
    }
    ul#switchtab li {
        display: inline;
    }
        ul#switchtab li a.commercial:hover, ul#switchtab li a.commercial:active,
        ul#switchtab li a.residential:hover, ul#switchtab li a.residential:active {
            background-position: center center;
        }
    body#commercial ul#switchtab li a.commercial,
    body#residential ul#switchtab li a.residential {
        background-position: top center;
    }
    ul#switchtab li a {
        text-indent: -9999px;
        display: block;
        height: 26px;
        float: right;
        }
        
        ul#switchtab li a.commercial {
        background: url(_images/tab_commercial.png) no-repeat bottom center;
        width: 357px;
        }
    
        ul#switchtab li a.residential {
        background: url(_images/tab_residential.png) no-repeat bottom center;
        width: 357px;
        }
 
 
 
    
/*Body Copy*/

And here is my HTML:

HTML4Strict 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" />
<meta name="description" content="" />
        
<meta name="keywords" content="" />
 
        <meta name="author" content="" />
        <meta name="robots" content="all" />
        <meta name="googlebot" content="index,follow" />
<title>Test Page</title>
<link REL="stylesheet" HREF="stylesheet_template.css" TYPE="text/css"> 
</head>
 
<body id="residential">
 
<div id="template">
    
  <div id="header">
    <div class="navwrapper">
<ul id="nav">
 
    <li id="first">
        <div><a href="">ABOUT US</a></div>
    </li>
 
    <li>
        <div><a href="">GENERIC LINK</a></div>
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
            <li><a href="">Link 6</a></li>
            <li><a href="">LINK 7</a></li>
        </ul>
    </li>
    
    <li>
        <div><a href="">GENERIC LINK</a></div>
    </li>
 
    <li id="last">
        <div><a href="">GENERIC LINK</a></div>
    </li>
</ul>
</div>
 
<div id="switchtabwrapper">
            <ul id="switchtab">
                <li><a class="commercial" href="commercial.html">Commercial</a></li>
                <li><a class="residential" href="index.html">Residential</a></li>      
            </ul>
         </div>
  </div>
 
</div>
 
</div>
</body>
</html>

Any ideas? I'm really stuck right now, so any tips would be a huge help.

Thank you in advance!

chreo · Oct 13, 2009, 17:50

Validate your css and html before you go any further: you have spelling mistakes in your css and could have other problems like that in your html too.

validator.w3 dot org/ for html
jigsaw.w3 dot org/css-validator/ for css

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Oct 13, 2009, 17:50	#2
chreo SitePoint Member Join Date: Aug 2007 Location: Stockholm, Sweden Posts: 3	Validate your css and html before you go any further: you have spelling mistakes in your css and could have other problems like that in your html too. validator.w3 dot org/ for html jigsaw.w3 dot org/css-validator/ for css