Jump to content

maximuz

Newbie
  • Posts

    2
  • Joined

  • Last visited

Everything posted by maximuz

  1. Никак не могу отцентровать содержимое по вертикали. Можно превратить <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>
  2. Приветствую всех! У меня вопрос к специалистам. У меня есть шапка с группой горизонтальных 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; }
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy