...

View Full Version : html css menu issue



evilgandhi
01-25-2013, 10:28 PM
hey there awesome people!!

i'm having problem on my rollovers to get my menu working?

the text and image seem to move a few pixels to the left on hover?

any help would be greatly appreciated...

http://gandhiproductions.herobo.com/martanitest/menu.html

thank you

Gandhi

Excavator
01-25-2013, 11:34 PM
Hello evilgandhi,
Do you like it better when you remove that negative margin? See highlighted in red -
nav li a:hover {
position:absolute;
height:100px;
width:100px;
margin:-2px;
border:2px solid #a3a3a3;
}

Excavator
01-25-2013, 11:46 PM
Maybe more like this?
nav li {
height: 100px;
width: 100px;
background:#6194aa;
float:left;
list-style:none;
margin-left:5px;

}
nav li a {
height: 90px;
width: 90px;
position:absolute;
padding: 5px;
line-height:165px;
text-decoration:none;
color:#FFF;
background-image:url(image/martani-icons.png);
border: 2px solid transparent;
display: block;
}

nav li a:hover {
margin: -2px 0 0 -2px;
border:2px solid #a3a3a3;
}

evilgandhi
01-26-2013, 02:14 AM
the above code isn't right either........ i don't want any movement....... the only thing that should appear is the 2px border around each box on hover.....

if you have a hotmail/outlook account login and click the arrow to the right of the outlook logo see the menu and drop from the top..

that what i what it to look like and function like (with out it dropping down)

here is a screenshot of said menu

http://gandhiproductions.herobo.com/martanitest/Screen%20shot%202013-01-26%20at%2001.09.45.png

thank you for help, and the speed of your response

G

Excavator
01-26-2013, 02:33 AM
I see what you're wanting. Have a look at it this way -
nav li {
height: 100px;
width: 100px;
background:#6194aa;
float:left;
list-style:none;
margin-left:5px;

}
nav li a {
height: 86px;
width: 86px;
position:absolute;
padding: 5px;
line-height: 155px;
text-decoration:none;
color:#FFF;
background-image:url(image/martani-icons.png);
border: 2px solid #fff;
display: block;
}

nav li a:hover {border:2px solid #a3a3a3;}

Here's why that works - See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

evilgandhi
01-26-2013, 02:36 AM
legend.

thank very much!!!!

G



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum