How to prevent html div from expanding when text size is changed
To fix the horizontal pushing:
Instead of using padding
to space the items apart, one solution is to use width
and text-align: center;
so that the items don't push the other items after them.
To fix the vertical pushing:
One solution is to specify a line-height
equal to the largest font-size
(which would be your :hover
size)
#navigation{
background-color:black;
width:98%;
font-family:calibri;
padding:1%;
margin-left:0px;
position:absolute;
top:0;
left:0;
display:block;
}
#nav{
list-style-type:none;
}
ul#nav li{
float:left;
width: 15%;
text-align: center;
}
.navlink{
display:block;
background-color:black;
text-decoration:none;
color:white;
line-height:14pt;
}
.navlink:hover{
font-weight:bold;
font-size:14pt;
}
<!DOCTYPE html>
<html>
<body>
<div id = "navigation">
<ul id = "nav">
<li><a href = "mechadogs.org/home" class = "navlink">Home</a></li>
<li><a href = "mechadogs.org/team" class = "navlink">Our Team</a></li>
<li><a href = "mechadogs.org/gallery" class = "navlink">Gallery</a></li>
<li><a href = "mechadogs.org/community" class = "navlink">Community</a></li>
<li><a href = "mechadogs.org/first" class = "navlink">FIRST</a></li>
</ul>
</div>
</body>
</html>
Add a max-height: 30px;
to #navigation
.
In general, if you are looking for something that transform shape/size aesthetically, it's easier to work with min/max width in pixels, rather then %.