CODEWITHSUNDEEP
htmlcss
Ignatius_Gim
Ignatius_Gim

Reputation: 580

How to prevent html div from expanding when text size is changed

So, I have a navigation bar. I want each link text to grow and bold when on hover. I have achieved this using css, but now whenever teh mouse hovers over the link the text size grows,b ut so does the div to accomodate that text. Any ideas on how to fix this. Here is the jsfiddle link:

jsfiddle

CODE:

    <!DOCTYPE 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>

#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;
    padding:0 6%;
}
.navlink{
    display:block;
    background-color:black;
    text-decoration:none;
    color:white;
}
.navlink:hover{
    font-weight:bold;
    font-size:14pt; 
}

Upvotes: 12

Views: 18346

Answers (2)

jsea
jsea

Reputation: 4037

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>

Upvotes: 12

azochz
azochz

Reputation: 1055

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

Upvotes: 2

Related Questions