Web Hosting Talk







View Full Version : css nav help


RichPixel
08-31-2009, 07:06 AM
http://i251.photobucket.com/albums/gg313/ReaperUK32/nav.jpg

as you can see on this pic, the red outline is where the contact button clickbox is, it's the same for them all they are slightly off, here's the css code that controls the nav etc, but i can't seem to get it right so you click the names and the hitbox is dead on..

/*menu*/

#menu_container {
width:896px;
height:60px;
margin:9px 5px 0px 40px;
float:left;
padding:0;
}
#menu_container ul {
list-style:none;
margin:0;
padding:0;
height:20px;
width:896px;
float:left;
}
#menu_container ul li {
list-style:none;
margin:0;
padding:0;
float:left;
}
#menu_container ul li a, #menu_container ul li a:link, #menu_container ul li a:visited {
display:block;
float:left;
height:39px;
background:url(../images/menu_sprite.png) no-repeat;
text-indent:-9999px;
overflow:hidden;
}
/** FIRST MENU ITEM **/
#menu_container ul li a.m1, #menu_container ul li a:link.m1, #menu_container ul li a:visited.m1 {
width:124px;
background-position:0 0;
}
#menu_container ul li a.m1:hover {
background-position:0 -44px;
}
/** SECOND MENU ITEM **/
#menu_container ul li a.m2, #menu_container ul li a:link.m2, #menu_container ul li a:visited.m2 {
width:128px;
background-position:-128px 0;
}
#menu_container ul li a.m2:hover {
background-position:-128px -44px;
}
/** THIRD MENU ITEM **/
#menu_container ul li a.m3, #menu_container ul li a:link.m3, #menu_container ul li a:visited.m3 {
width:128px;
background-position:-256px 0;
}
#menu_container ul li a.m3:hover {
background-position:-256px -44px;
}
/** FOURTH MENU ITEM **/
#menu_container ul li a.m4, #menu_container ul li a:link.m4, #menu_container ul li a:visited.m4 {
width:128px;
background-position:-384px 0;
}
#menu_container ul li a.m4:hover {
background-position:-384px -44px;
}
/** FIFTH MENU ITEM **/
#menu_container ul li a.m5, #menu_container ul li a:link.m5, #menu_container ul li a:visited.m5 {
width:128px;
background-position:-512px 0;
}
#menu_container ul li a.m5:hover {
background-position:-512px -44px;
}
/** SIXTH MENU ITEM **/
#menu_container ul li a.m6, #menu_container ul li a:link.m6, #menu_container ul li a:visited.m6 {
width:128px;
background-position:-640px 0;
}
#menu_container ul li a.m6:hover {
background-position:-640px -44px;
}
/** SEVENTH MENU ITEM **/
#menu_container ul li a.m7, #menu_container ul li a:link.m7, #menu_container ul li a:visited.m7 {
width:128px;
background-position:-768px 0;
}
#menu_container ul li a.m7:hover {
background-position:-768px -44px;
}


any help very much appreciated.

RichPixel
08-31-2009, 07:24 AM
got someone working on it now