Newbie help - image causing problems in my nav menu

HTML & CSS
1

Hi. I just started learning html and css in the past couple of weeks so please bear with me :wink:

I have been practicing creating a horizontal nav menu and got it working ok until i add an image to one of the menu items.

When the image is the same height as the text it looks ok. However if i resize the image height over 18px my text is no longer centered vertically on the menu items

(CSS line 54 is the image)
.nav-img {
margin-right: 20px;
height: 18px;
float:left;
}

Also when i resize the image height to over 32px, the grey borders do not extend to the bottom of the nav bar.

Iā€™m sure thereā€™s a very simple explanation of why this is happening, but i would like to know how to do this properly so that whenever i create a navbar (or anything else) and it has an image of any size i can be sure the text always aligns vertically and borders look right.

Thanks!

2

This happens because the height of your nav is determined by the biggest item it contains.
While the text is the biggest thing, its height the sum of font size and top/bottom padding, the text is centred vertically with the grey borders full height.
But when you make your image bigger than the text, the text does not magically get any bigger as a result of the image being bigger.
So the fix may be to also make the text bigger so the enlarged image is still not the biggest element.

its height the sum of font size and top/bottom padding

So increasing either or both of these can make the text element bigger than the image.
In this fork the image is 36px high, but the text has its padding put up to 18px.

Another way to stop the image interfering with the size would be to make it a background.

3

Hi @MMAgeek Welcome to the forums!

As @SamA74 explained, the image takes too much height.

There are several options to shrink the height it claims, one is to use negative margins top and bottom.

To, despite the negative margins, vertical centre the image on the text line, you can display it as an inline-block and use vertical align. This requires that itā€™s not floated.

Try this changes to the image rules:

      .nav-img {
        display: inline-block;
        height: 32px;
        margin: -20px 20px -20px 0;
        vertical-align: middle;
      }
4

Great! thank you for the help. Is there a way to adjust only the padding for the text? I noticed on your fork adjusting the padding to 18px also pushed the image down?

5

Thank you @Erik_J thats really helpful. Iā€™ll keep messing around. Seems like thereā€™s lots for me to still learn :slight_smile:

6

Yes that pushes the image down, off centre. To have separate padding, you would need to put them in separate elements, maybe a <span> around the text.
Or you could do as @Erik_J suggests and use a negative margin to nudge it up a bit, or use relative positioning instead.
Any of these will work, but not be 100% robust if people alter the font size in their browsers. Using em units over px may overcome that, but one step at a time for now.

7

My suggestion takes care of all possible font resizing, I think.

8

thanks both for your help

9

Youā€™re right, it does seem to handle font zooming. I was thinking that all those magic numbers and negative margins would be pretty fragile, but it appears to work. :smile:

1 Like
10

Yes it is very robust. But I think you had the semantically most correct solution in your first post:

The image is probably not content but presentational and should therefore, in that case, not be an image in the html.

The link image could be removed and instead as you said be used as a background to the first nav item link:

      .nav-tab-item:nth-child(1) a {
        padding-left: 60px;
        background-image: url("horizontal-nav-img.png");
        background-position: 10px center;
        background-repeat:  no-repeat;
}
1 Like
11

Never underestimate @Erik_J

2 Likes
12

Just for fun, Iā€™ll toss an entry into the party. The image is allowed to resize with the font.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/newbie-help-image-causing-problems-in-my-nav-menu/230449
MMAgeek
-->
    <style type="text/css">
body {
    padding:0;
    margin:0;
}
.nav-container {
    background-color:#333;
}
.nav-tabs {
    list-style-type:none;
    display:table;
    padding:0;
    margin:0;
}

/* change hover background colour except active page ??? */
.nav-tab-item a:hover:not(.active) {
    background-color:#1a1a1a;
}
.nav-tab-item {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.nav-tab-item + .nav-tab-item {
    border-left:1px solid #ccc;
}
.nav-tab-item a {
    display:block;
    text-decoration:none;
    color:white;
    padding:.625em;
}
.nav-tab-item:first-child a {
    padding-left:3em;
    position:relative;
}
a.active {
    background-color:#01760f;
    cursor:default;
}
.nav-img {
    width:2em;
    height:auto;
    position:absolute;
    left:8%;
    top:0;
    bottom:0;
    margin:auto;
}
.textarea p {
    margin:.25em 0;
}

    </style>
</head>
<body>

<nav class="navbar">
    <div class="nav-container">
        <ul class="nav-tabs">
            <li class="nav-tab-item"><a class="active" href="#"><img class="nav-img" src="https://dl.dropboxusercontent.com/u/9770561/horizontal-nav-img.png" alt="">Home</a></li>
            <li class="nav-tab-item"><a href="#">Services</a></li>
            <li class="nav-tab-item"><a href="#">About Us</a></li>
            <li class="nav-tab-item"><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>
<div class="textarea">
    <p>
        Bushwick brunch etsy sartorial stumptown affogato. Tote bag health goth bespoke cornhole. Williamsburg pug occupy, +1 authentic post-ironic flannel tote bag swag trust fund venmo bushwick pinterest pitchfork. Selvage XOXO cliche irony, keytar flexitarian
        vinyl microdosing listicle farm-to-table knausgaard heirloom vice vegan green juice. Sustainable literally green juice, williamsburg helvetica lo-fi distillery direct trade whatever celiac four loko fingerstache heirloom letterpress fashion axe.
        Tattooed viral pitchfork, farm-to-table hella irony tumblr williamsburg chillwave PBR&B scenester echo park normcore. Retro 8-bit knausgaard wolf literally hashtag whatever man bun pinterest, portland authentic tote bag slow-carb freegan.
    </p>
</div>

</body>
</html>
2 Likes
13

Joining the party.

And if we follow @SamA74ā€™s background option, we could move the image from html foreground to css background and use the CSS3 ā€œbackground resizingā€ property for browsers that support it and ems for horizontal space.

 .nav-tab-item:nth-child(1) a {
       padding-left: 4.5em;
       background-image: url("horizontal-nav-img.png");
       background-position: .5em center;
       background-repeat: no-repeat;
       background-size: contain;
 }
2 Likes
14

@Erik_J would you mind explaining the advantage of the last bit of code over this one you previously wrote?

  .nav-tab-item:nth-child(1) a {
    padding-left: 60px;
    background-image: url("horizontal-nav-img.png");
    background-position: 10px center;
    background-repeat:  no-repeat;

}

15

MMAgeek,

Have you tried both snippits of code in your browser? Did you try zooming the text size in Firefox to simulate different user preferences/browser font-size settings?

Did you not see a difference in the behavior of the icon in the snippits?

16

I just tried them both in chrome and FF. In the 2nd example the icon is slightly larger at 100%, but i see no difference in behaviour in zoom for either snippet

17

Let me clarify that I meant Zoom Text Only in Firefox, not just zoom the whole page.

18

ahh ok now i see it :slight_smile: i didnā€™t even know you could you do zoom text only. thanks for the help

1 Like
19

Let me ask you to copy the code that I posted in #12 to a file and open it in your browser and perform the same Zoom test. It is meant to be a standalone demo. Compare the behavior of the icon and text in that demo. I think it might be better behaved that Samā€™s and Erikā€™s, although the image is still in the foreground and not in the background. Semantically, background would probably be more appropriate, but just look at the behavior of the demo and see if that is close to you wish. The code with the image in the background can be tweaked. :slight_smile:

1 Like
20

ok yes i see it scales much better in the code you posted. thanks again :slight_smile: ill see if i can play around with yours and get the image in the background tomorrow

2 Likes