Здравствуйте. Учусь блочной верстки, заодно стараюсь придерживаться семантики, которую тоже изучаю. И заглох в реализации следующего примера: Увидел на сайте меню с помещенными поверх текста полупрозрачными png картинками. Решил попробовать ссылку в строку браузера, если не отображается картинка ссылку в строку браузера, если не отображается картинка Быстренько накидал такое вот текстовое меню. На цифрах сделал градиентную png картинку вот такую В итоге поместить градиентный png, вроде, получилось с помощью абсолютного позиционирования. И вроде все хорошо было, и hover работает, но вот проблема - 1. Не могу отцентрировать текст по высоте строки(пункт помечен галочкой). 2. И не получается убрать выступ(помечен галочкой) - выступ если пункт меню состоит больше чем из одной строки). К какому виду хочу привести - обведено красной линией Скриншоте форматирование текста убрал, т.к. начал переделывать. Буду благодарен за полезные мысли. <style type="text/css"> body { font-family:"Times New Roman", Times, serif; font-size:16px; } .inline { overflow:hidden; display:block; position:relative; } .menu { margin: 0px; padding: 0px; margin-left: 27px; } .menu li { } .num { font-family: "Times New Roman", Times, serif; font-size: 1.4em; color:#999; font-weight:bold; vertical-align: middle; } .inline a span.span_bg { position:absolute; width:22px; height:22px; top:4px; left:0; background:transparent url(mask.png) no-repeat left bottom; } .menu_link { margin-left: 10px; letter-spacing:0px; } .bpx { border: 1px solid #000; } a, a:visited { color:#000; text-decoration:none; } a:hover, a:hover span { color:#CC0; } .tt { vertical-align:middle; line-height:1.5; } </style> <div> <ul class="menu"> <li><div class="inline tt"><a href="#"><span class="num">01</span><span class="menu_link tt">In nascetur porta</span><span class="span_bg"></span></a></div></li> </ul> </div> P.S. В самом начале сбрасывал css стили на дефолтные (не * { margin: 0; padding: 0; })
