Menu
I want to make an html/css menu in my webpage that contain four links (horizontally in top center of page).
and I want the menu link font size to increase when hovering the mouse over (a:hover).
but the problem I have is the menu item change its place(down a little) when font size increases (in IE 8, and Chrome)
and I don't want that to happen, note that I am using a background image (152 * 52) for the link
I tried doing a table instead of the inline-block but it made a bigger mess.
I also tried playing with margin and padding which didn't work either.
I am new to html/css so any advice about anything in html/css would be appreciated and forgive my bad english.
Here is my code:
<html>
<head>
<title>Home page</title>
<style type="text/css">
body {
font-family:Palatino, ‘Book Antiqua’, Georgia, Garamond, ‘Times New Roman’, Times, serif;
font-size: 13px;
color: #000060;
background-color: #005070;
background-repeat:repeat-x;
text-align:center;
}
.menu
{
height:64px;
width:100%;
background-image:url(img/bglb2.png);
background-repeat:repeat-x;
text-align:center;
}
.menuLink, .menuLink:visited
{
color:#FFFFFF;
background-image:url(img/btk.png);
text-decoration:none;
font-size: 20px;
width:132px;
height: 32px;
padding: 10px;
display:inline-block;
margin-left: 10px;
margin-right: 10px;
margin-top: 6px;
}
.menuLink:hover
{
color:#CC7011;
background-image:url(img/bto.png);
font-size: 26px;
}
</style>
</head>
<body>
<div class="menu">
<a class="menuLink" href="index.html">Home</a>
<a class="menuLink" href="page1.html">Page1</a>
<a class="menuLink" href="page2.html">Page2</a>
<a class="menuLink" href="page3.html">Page3</a>
</div>
</body>
</html>
569
asked Nov 16 '25 17:11
Try to add a fixed line-height to your menu links (for example, line-height:26px;).
That way, when you increase the font-size, the height of the line of text will not change. Default value of line-height is normal, which means the height of each line of your menu will adjust with the font-size.
More information: http://www.w3.org/wiki/CSS/Properties/line-height
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
