maximuz
-
Posts
2 -
Joined
-
Last visited
maximuz's Achievements
Explorer (1/14)
0
Reputation
-
Никак не могу отцентровать содержимое по вертикали. Можно превратить <a> в table-cell, тогда можно будет использовать vertical-align: middle; Будет работать в FF, Opera, Safari, IE8. Но как заставить встать по центру в IE6 и IE7. Ниже пример который хотелось бы обуздать. У кого есть опыт, подсобите! http://dc133.file.qip.ru/img/127077842/d59...059&sizeM=7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>Vertical align MIDDLE</title> <style type="text/css"> body {font: 11px Arial, Helvetica, sans-serif;} ul, li { list-style: none outside none;} ul {padding: 0;} li {float: left; background-color:#FFCC99; margin: 0 10px 0 0; width:130px;} a {display: block; background-color:#FF9900; height: 46px; text-align:center;} .left {padding-left: 10px;} .right {padding-right: 10px;} </style> </head> <body> <ul> <li><div class="left"><div class="right"><a href="#">Main page</a></div></div></li> <li><div class="left"><div class="right"><a href="#">Products</a></div></div></li> <li><div class="left"><div class="right"><a href="#">Interesting article about Mr. Brown</a></div></div></li> <li><div class="left"><div class="right"><a href="#">Hallo! How are You?</a></div></div></li> <li><div class="left"><div class="right"><a href="#">Feedback</a></div></div></li> </ul> </body> </html>
-
Приветствую всех! У меня вопрос к специалистам. У меня есть шапка с группой горизонтальных DIV-ов. Задача: Отцентрировать содержимое горизонтальной группы DIV-ов по вертикали (блоки разноцветные для наглядности) Высота блока 93px; Содержимое каждого такого блока должно быть отцентрировано по вертикали. Подскажите пожалуйста как действовать. Вот картинка: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML <div id="container"> <div id="header"> <div class="Top"> <div class="Logo"><img src="images/ru_logo.png" alt="ru" width="150" height="61"></div> <div class="Phone"><span>(999)</span> 123-456-789</div> <div class="Center"> <div class="Slogan">Интернет магазин компьютеров и комплектующих, цифровой и офисной техники</div> <div class="Online"> <div><img src="images/ico_skype_16.png" alt="skype" width="16" height="16" align="absmiddle"><a href="#">.ru</a></div> <div><img src="images/ico_icq_16.png" alt="icq" width="16" height="16" align="absmiddle"><a href="#">91819257</a></div> </div> </div> </div> <div class="DesMenuArea"> <ul id="mMenu"> <li><a href="#" title="" id="active">О компании</a></li> <li><a href="#" title="">Услуги</a></li> <li><a href="#" title="">Оплата</a></li> <li><a href="#" title="">Доставка</a></li> <li><a href="#" title="">Корпоративным клиентам</a></li> <li><a href="#" title="">Помощь</a></li> </ul> </div> </div> </div> CSS body { margin: 0; padding: 0; font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; } #container { min-width: 1000px; } #header { background-color: #506d90; height: 122px; background-image: url(../images/header_bg.png); background-repeat: repeat-x; color: #ffffff; position: relative; } #header .Top { height: 93px; overflow: hidden; background-color: #ff8c00; } #header .Logo { float: left; width: 210px; background-color: fuchsia; text-align: center; } #header .Logo IMG{ } #header .Phone { float: right; width: 210px; font-size: 18px; text-align: center; background-color: #ff69b4; } #header .Center { margin-left: 210px; margin-right: 210px; background-color: green; } #header .Slogan { float: left; width: 60%; background-color: olive; } #header .Online { float: right; width: 30%; background-color: #8fbc8f; } .DesMenuArea { clear: both; background-image: url(../images/mmenu_line_bg.png); background-repeat: repeat-x; background-position: bottom; height: 29px; }