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.
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.
