Geek Answers Handbook

CSS image in navigation bar pushes text

I am trying to align an image with CSS in a navigation bar. Even if I resize the image, it still pushes the text down.

My html div code:

<div id="menu"> <ul> <li><a href="#"><img src='images/tphome.png' border='0' width='24' height='24'> Home</a></li> <li><a href="#">Contact</a></li> </ul> </div>

http://jsfiddle.net/nuSLH/

Do you have it?

+4
source share
4 answers

I would suggest using the css class earlier, instead of putting an image, since it is a presentation and not very important for the content.

Changed this to add position: relative ...

 #menu li { float: left; position: relative; }

And then something like this ... you may have to add a residence permit to li.

 .icon-home:before { position: absolute; top: 0px; left: 0px; content: ""; background: url(http://i.imgur.com/1CRy2G5.png); width: 24px; height: 24px; }

To add a class ...

  <li><a class="icon-home" href="#">Home</a></li>
+1
source

Adding some css to the image can result in text alignment at the top of the image:

 #menu img { vertical-align: top;}

or in the middle:

 #menu img {vertical-align: middle;}

Another option is to use the background image of the a tag in combination with a small addition:

 #menu a { background: url('http://i.imgur.com/1CRy2G5.png') no-repeat left center; padding-left: 30px; padding-top: 5px; }
+2
source

change your html below

 <div id="menu"> <ul> <li><a class="home" href="#">Home</a></li> <li><a href="#">Contact</a></li> </ul> </div>

and add this to your css

 #menu a.home { padding: 4px 20px 9px 30px; background-image: url(http://i.imgur.com/1CRy2G5.png); background-repeat:no-repeat; }

demonstration

0
source

The size of the img tag got bigger because the requested img was not found. My suggestion is how about removing this img if requested img not found

you can use onerror="this.remove()"

here is the fiddle http://jsfiddle.net/nuSLH/14/

0
source

More articles:


All Articles