CSS Forum

**pkohn11** · 07-08-2009, 01:40 AM

for some reason I can't get my menu to display horizontally. all the images start on a new line. an example can be found at: www.download.mxcomputersolutions.com/TheMovement/menu.php

Here is the code for the css:

Code:

body {
    text-align: center;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 12px;
    font-family: Helvetica;
    background-color: #000000;
}
.menu-b {
    width: 233px;
    height: 420px;
    color: #ffffff;
    font-family: Helvetica;
    background-color: #000000;
    margin: 0px;
    padding: 0px;
}
.displace {
    position: absolute;
    left: -500px;
    }
    
a.rollover1 {
    padding: 0px;
    margin: 0px;
    display: block;
    width: 101px;
    height: 63px;
    text-decoration: none;
    background: url("images/lala/site-layout_03.png");
    }
a.rollover1:hover {
    background-position: -101px 0;
    }
a.rollover2 {
    padding: 0px;
    margin: 0px;
    display: block;
    width: 117px;
    height: 63px;
    text-decoration: none;
    background: url("images/lala/site-layout_05.png");
    }
a.rollover2:hover {
    background-position: -117px 0;
    }
a.rollover3 {
    padding: 0px;
    margin: 0px;
    display: block;
    width: 107px;
    height: 63px;
    text-decoration: none;
    background: url("images/lala/site-layout_07.png");
    }
a.rollover3:hover {
    background-position: -107px 0;
    }
a.rollover4 {
    padding: 0px;
    margin: 0px;
    display: block;
    width: 325px;
    height: 63px;
    text-decoration: none;
    background: url("images/lala/site-layout_09.png");
    }
a.rollover4:hover {
    background-position: -325px 0;
    }
a.rollover5 {
    padding: 0px;
    margin: 0px;
    display: block;
    width: 153px;
    height: 63px;
    text-decoration: none;
    background: url("images/lala/site-layout_11.png");
    }
a.rollover5:hover {
    background-position: -153px 0;
    }
.break-left {
    padding: 0px;
    margin: 0px;
    display: block;
    width: 55px;
    height: 63px;
    text-decoration: none;
    background: url("images/lala/site-layout_02.png");
}
.break-right {
    padding: 0px;
    margin: 0px;
    display: block;
    width: 54px;
    height: 63px;
    text-decoration: none;
    background: url("images/lala/site-layout_12.png");
}
.break-dash {
    padding: 0px;
    margin: 0px;
    display: block;
    width: 22px;
    height: 63px;
    text-decoration: none;
    background: url("images/lala/site-layout_04.png");
}

and the php file:

Code:

<body>
<div class="menu-b">
<div class="break-left"></div>
<a href="#" class="rollover1" title="Home"><span class="displace">Home</span></a>
<div class="break-dash"></div>
<a href="#" class="rollover2" title="About"><span class="displace">About</span></a>
<div class="break-dash"></div>
<a href="#" class="rollover3" title="Media"><span class="displace">Media</span></a>
<div class="break-dash"></div>
<a href="#" class="rollover4" title="Join The Movement"><span class="displace">Join The Movement</span></a>
<div class="break-dash"></div>
<a href="#" class="rollover5" title="Contact"><span class="displace">Contact</span></a>
<div class="break-right"></div>
</div>


</body>

**Joshy D** · 05:43 AM

okay, thats not a good way to do it, you shouldn't use div's for each section.
try doing it with a list

try something like:

Code:

.menu{margin:0 auto; padding:0; display:block;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; display:block;}

.menu li.first a{background: url("http://www.webmaster-talk.com/images/lala/site-layout_03.png");}
.menu li.first a:hover{background-image: url("http://www.webmaster-talk.com/images/lala/site-layout_03.png"); background-position: -101px 0;}

.menu li.second a{background: url("http://www.webmaster-talk.com/images/lala/site-layout_05.png");}
.menu li.second a:hover{background-image: url("http://www.webmaster-talk.com/images/lala/site-layout_05.png"); background-position: -117px 0;}

.menu li.third a{background: url("http://www.webmaster-talk.com/images/lala/site-layout_07.png");}
.menu li.third a:hover{background-image: url("http://www.webmaster-talk.com/images/lala/site-layout_07.png"); background-position: -107px 0;}

.menu li.fourth a{background: url("http://www.webmaster-talk.com/images/lala/site-layout_09.png");}
.menu li.fourth a:hover{background-image: url("http://www.webmaster-talk.com/images/lala/site-layout_09.png"); background-position: -325px 0;}

Code:

<ul class="menu">
<li class=”first”><a href="#" class="active">Home</a></li>
<li class=”second”><a href="#">Products</a></li>
<li class=”third”><a href="#">About</a></li>
<li class=”fourth”><a href="#">Contact</a></li>
</ul>

Hope this works, untested. Incomplete, just got the important stuff on there.

Fitting the breakers in and the end clips on should be easy enough.

Josh.

**pkohn11** · 07-08-2009, 12:41 PM

now no images will show up: http://download.mxcomputersolutions....ment/menu2.php

Code:

.menu{margin:0 auto; padding:0; display:block;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; display:block;}

.menu li.first a{background: url("http://download.mxcomputersolutions.com/TheMovement/images/lala/site-layout_03.png");}
.menu li.first a:hover{background-image: url("http://download.mxcomputersolutions.com/TheMovement/images/lala/site-layout_03.png"); background-position: -101px 0;}

.menu li.second a{background: url("http://download.mxcomputersolutions.com/TheMovement/images/lala/site-layout_05.png");}
.menu li.second a:hover{background-image: url("http://download.mxcomputersolutions.com/TheMovement/images/lala/site-layout_05.png"); background-position: -117px 0;}

.menu li.third a{background: url("http://download.mxcomputersolutions.com/TheMovement/images/lala/site-layout_07.png");}
.menu li.third a:hover{background-image: url("http://download.mxcomputersolutions.com/TheMovement/images/lala/site-layout_07.png"); background-position: -107px 0;}

.menu li.fourth a{background: url("http://download.mxcomputersolutions.com/TheMovement/images/lala/site-layout_09.png");}
.menu li.fourth a:hover{background-image: url("http://download.mxcomputersolutions.com/TheMovement/images/lala/site-layout_09.png"); background-position: -325px 0;}

Code:

<ul class="menu">
<li class=”first”><a href="#" class="active">Home</a></li>
<li class=”second”><a href="#">Products</a></li>
<li class=”third”><a href="#">About</a></li>
<li class=”fourth”><a href="#">Contact</a></li>
</ul>

**konetch** · 07-08-2009, 01:15 PM

You're using you're classes wrong try this

css stylesheet

Code:


#menu li#first a{background: url("http://download.mxcomputersolutions.com/TheMovement/images/lala/site-

layout_03.png");}
#menu li#first a:hover{background-image: url

("http://download.mxcomputersolutions.com/TheMovement/images/lala/site-layout_03.png"); background-position: -

101px 0;}

#menu li#second a{background: url("http://download.mxcomputersolutions.com/TheMovement/images/lala/site-

layout_05.png");}
#menu li#second a:hover{background-image: url

("http://download.mxcomputersolutions.com/TheMovement/images/lala/site-layout_05.png"); background-position: -

117px 0;}

#menu li#third a{background: url("http://download.mxcomputersolutions.com/TheMovement/images/lala/site-

layout_07.png");}
#menu li#third a:hover{background-image: url

("http://download.mxcomputersolutions.com/TheMovement/images/lala/site-layout_07.png"); background-position: -

107px 0;}

#menu li#fourth a{background: url("http://download.mxcomputersolutions.com/TheMovement/images/lala/site-

layout_09.png");}
#menu li#fourth a:hover{background-image: url

("http://download.mxcomputersolutions.com/TheMovement/images/lala/site-layout_09.png"); background-position: -

325px 0;}

#menu, #menu ul {     
 padding: 0;     
 margin: 0;   
 list-style: none; 
} 
#menu a {     
 display: block;     
 padding-top:11px;
 width: 100px;
 color:#000; 
 text-decoration:none;
 font-size:17px;
 font-weight:bold;
 height:44px;
} 
#menu a:hover {     
 display: block; 
 padding-top:7px;    
 width: 100px;
 color:#000; 
 text-decoration:none;
 font-size:17px;
 font-weight:bold;
 height:44px;
} 
#menu a#active {     
 display: block; 
 padding-top:7px;    
 width: 100px;
 color:#000; 
 text-decoration:none;
 font-size:17px;
 font-weight:bold;
 height:44px;
} 
#menu li {   
 text-align:center;  
 float: left;     
 width: 100px; 
 height:44px;
}

html file

Code:

<div id="menu">
<ul id="menu">
<li id="first"><a href="#" id="active">Home</a></li>
<li id="second"><a href="#">Products</a></li>
<li id="third"><a href="#">About</a></li>
<li id="fourth"><a href="#">Contact</a></li>
</ul>
</div>

This should work. You may have to tweak the widths and heights a little but you'll get the idea

**LadynRed** · 07-08-2009, 02:57 PM

Quote:

You're using you're classes wrong try this

How do you figure that ? .menu li.first is perfectly acceptable.

**konetch** · 07-08-2009, 05:39 PM

He only uses .menu li.first once it her page correct? I tried philips code on my machine and it didn't work, so i tried using id's instead and it fixed it.