There is a menu, I try to make the logo on the same level as the link. Now it looks like this

alt text

Code itself

<div class="rub"> <div class="rubimg"> <img src="{THEME}/image/avto/audi.png" height="15" /><br /> <img src="{THEME}/image/avto/ford.png" height="15" /><br /> <img src="{THEME}/image/avto/audi.png" height="15" /><br /> <img src="{THEME}/image/avto/bmw.png" height="15" /><br /> <img src="{THEME}/image/avto/audi.png" height="15" /><br /> <img src="{THEME}/image/avto/mazda.png" height="15" /><br /> <img src="{THEME}/image/avto/audi.png" height="15" /><br /> </div> <div class="rublink"> <ul> <li><a href="http://127.0.0.1/sat/2/audi">Audi</a></li> <li><a href="http://127.0.0.1/sat/2/audi">Audi</a></li> <li><a href="http://127.0.0.1/sat/2/audi">Audi</a></li> <li><a href="http://127.0.0.1/sat/2/audi">Audi</a></li> <li><a href="http://127.0.0.1/sat/2/audi">Audi</a></li> <li><a href="http://127.0.0.1/sat/2/audi">Audi</a></li> <li><a href="http://127.0.0.1/sat/2/audi">Audi</a></li> </ul> </div> <div style="clear:both;"></div> </div>

and css

 .rub { background: url("../image/h_rub.jpg") no-repeat; padding-top: 50px; margin-bottom: 30px; } .rub ul { list-style: none; } .rub a { color: #565656; font-weight: bold; font: 18px Arial, Tahoma, Verdana, sans-serif; margin-right: 10px; } .rubimg { max-width:55px; float:left; } .rub img { max-width: 50px; height: 15px; } .rublink { margin-left:5px; max-width:245px; float:left; margin-right: 50px; }
  • padding not working ?? - Niki-Timofe

3 answers 3

You can try to add line-height

 .rublink li{ line-height: 15px; }

In general, I would change the markup.

UPD .rublink a {padding-left: 30px; }

  • If the markup can be changed, then this is how jsfiddle.net/invincible/bWCAF should work - invincible
  • So yes, but then the links are not located under each other are obtained, and this is the problem. - tranceman
  • How not under each other, they are all one under another? Formulate the question more precisely, what do you need? - invincible
  • Not under each other because the width of the pictures is different. This is how it looks like i009.radikal.ru/1205/f4/2e1527f2ae62.png - tranceman
  • Chu, well, right away, and it was necessary to draw. padding-left yuzayte. See UPD to answer. - invincible

It seems to me that it is better to put a picture in one div and a link to this margin corresponding to it to set the margin and place such divs in the container and the code will become less and the functionality will become clearer and cross-delivery guaranteed ...

UPD And if you change the layout and display: block; images and links, set display: block; and the same margin

  • I did it initially, but in this case the problem is to align the links so that the anchor links begin one after another - tranceman
  • And if you use UPD my answer? - Rules
  • I tried it now, it does not work out, everything remains almost the same - tranceman

I generally can not catch the essence of your typesetting. it is best to do the concept <br/> <ul> <li><img /><a href="#"></a></li> </ul> well, and you can set styles if you cann’t completely li zero as well as well as ul and li already set display: block