Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 05.11.2012, 21:03   #1
keen_
Форумчанин
 
Регистрация: 07.12.2011
Сообщений: 112
По умолчанию Выровнять div по вертикали в другом div-е

Что-то запутался и не могу выровнять.



HTML

Код:
    <div id="wrapper">
        <div id="header">
            <div id="logo">Логотип</div>
            <div id="topinfo">RTYRETYER<br />
			<div class="companyname">ERTERTER<br />
			DRTRETRET</div>
			<div class="topcontact">56Y756Y546Y4</div></div>
        </div>
        <div id="navigation">
            <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">Услуги</a></li>
                <li><a href="#">Новости</a></li>
                <li><a href="#">О нас</a></li>
                <li><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div id="leftcolumn">Отзывы клиентов</div>
        <div id="content">Основной текст</div>
        <div id="rightcolumn">Новости</div>
        <div id="footer">&copy; 2012 DRTGRTFRDTGFEW</div>
    </div>
CSS

Код:
* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#navigation ul {
	list-style: none;
}
#navigation ul li {
    padding: 0 29px 0 0;
	display: inline-block;
}
#wrapper { 
 margin: 0 auto;
 width: 990px;
}
#header {
 color: #333;
 width: 968px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 margin: 10px 0px 5px 0px;
}
#logo {
 float: left;
 background: red;
}
#topinfo {
 float: right;
 text-align: center;
}
.companyname {
 font-family: Arial, Helvetica, sans-serif;
 padding-top: 9px;
 font-size: 16px;
 font-weight: bold;
 color: #313131;
}
.topcontact {
 padding-top: 9px;
}
#navigation {
 float: left;
 width: 968px;
 color: #333;
 padding: 10px;
 border: 1px solid #ccc;
 margin: 0px 0px 5px 0px;
}
#leftcolumn { 
 color: #333;
 border: 1px solid #ccc;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 195px;
 float: left;
}
#content { 
 float: left;
 color: #333;
 border: 1px solid #ccc;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 524px;
 display: inline;
}
#rightcolumn { 
 color: #333;
 border: 1px solid #ccc;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 195px;
 float: left;
}
#footer { 
 width: 968px;
 clear: both;
 color: #333;
 border: 1px solid #ccc;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}
Изображения
Тип файла: gif valign.gif (10.6 Кб, 148 просмотров)

Последний раз редактировалось keen_; 05.11.2012 в 21:11.
keen_ вне форума Ответить с цитированием
Старый 05.11.2012, 21:49   #2
MyLastHit
Очень суровый
Участник клуба
 
Аватар для MyLastHit
 
Регистрация: 17.12.2009
Сообщений: 1,988
По умолчанию

Чтоб было абсолютно по центру, нужно высоты задавать. К тому что было добавь это
Код:
#header{height: 90px;}
#logo{
  height: 20px;
  position: relative;
  top: 50%;
  margin-top: -10px;/*половина высоты элемента*/
}
Ненавижу быть как все, но люблю, чтобы все были как я.
MyLastHit вне форума Ответить с цитированием
Старый 05.11.2012, 22:11   #3
keen_
Форумчанин
 
Регистрация: 07.12.2011
Сообщений: 112
По умолчанию

Хотелось сделать без указания фиксированной высоты шапки.
Чтобы как в таблице было - если текста больше, то она растягивается вниз.
Там у меня справа текст (замазал серыми блоками).

Я что-то не вижу простоты и лёгкости с этими дивами. С таблицей всё проще намного, если нужно выравнять блок по центру.
keen_ вне форума Ответить с цитированием
Старый 05.11.2012, 22:18   #4
keen_
Форумчанин
 
Регистрация: 07.12.2011
Сообщений: 112
По умолчанию

Вот таблицей это просто делается без указания её высоты. Справа есть текст и он может иметь больше или меньше строчек и нужно чтобы логотип слева всегда был по центру вне зависимости от количества строк в правом блоке.



Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <table  border="1" width="990" cellpadding="19">
	<tr>
	<td width="495">logo</td><td width="495" align="right">uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt</td>
	</tr>
	</table>
</body>
</html>
Изображения
Тип файла: gif header.gif (4.7 Кб, 158 просмотров)

Последний раз редактировалось keen_; 05.11.2012 в 22:25.
keen_ вне форума Ответить с цитированием
Старый 05.11.2012, 22:43   #5
alex4321
Пользователь
 
Регистрация: 23.07.2012
Сообщений: 77
По умолчанию

Пробовал применить к logo margin: auto 0px; ? (при этом нужно чтобы его предок и он были блочными элементами - т.е. или display:block или display:inline-block)
alex4321 вне форума Ответить с цитированием
Старый 05.11.2012, 22:55   #6
keen_
Форумчанин
 
Регистрация: 07.12.2011
Сообщений: 112
По умолчанию

Цитата:
Сообщение от alex4321 Посмотреть сообщение
Пробовал применить к logo margin: auto 0px; ? (при этом нужно чтобы его предок и он были блочными элементами - т.е. или display:block или display:inline-block)
Нифига не получается что-то ...
Вот снова даю код html и css:

Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
        <link href="styles.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                <div class="logo">
                    Логотип
                </div>
                <div class="top_info">
                    <div class="top_company">
                        Вваепкпкуепкепкуе
                    </div>
                    <div class="top_company_name">
                        Ввапкпвпвк<br/>
                        кенкуенкуенкуе
                    </div>
                    <div class="top_contact">
                        Пвапкапвкпквп<br/>
                        Ьквепкепкуепкен кепкекуеку кекуе<br/>
                        Нывак вкеапку ук<br/>
                        Цуауцка
                    </div>
                </div>
            </div>
            <div class="navigation">
                <ul>
                    <li><a href="#">Главная</a></li>
                    <li><a href="#">Услуги</a></li>
                    <li><a href="#">Новости</a></li>
                    <li><a href="#">О нас</a></li>
                    <li><a href="#">Контакты</a></li>
                </ul>
            </div>
            <div class="leftcolumn">
                Отзывы клиентов
            </div>
            <div class="content">
                Основной текст
            </div>
            <div class="rightcolumn">
                Новости
            </div>
            <div class="footer">
                &copy; 2012 Швапвеку кеауеауке
            </div>
        </div>
    </body>
</html>
Код:
* {
    margin: 0px;
    padding: 0px;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}
.navigation ul {
    list-style: none;
}
.navigation ul li {
    display: inline-block;
    padding: 0px 29px 0px 0px;
}
.wrapper {
    margin: 0px auto;
    width: 990px;
}
.header {
    border: 1px solid #ccc;
    color: #333;
    float: left;
    margin: 10px 0px 5px;
    padding: 10px;
    width: 968px;
}
.logo {
    background: red;
    float: left;
}
.top_info {
    float: right;
    text-align: center;
}
.top_company {
    font-size: 13px;
}
.top_company_name {
    color: #313131;
    font-size: 16px;
    font-weight: bold;
    padding-top: 9px;
}
.top_contact {
    padding-top: 9px;
}
.navigation {
    border: 1px solid #ccc;
    color: #333;
    float: left;
    margin: 0px 0px 5px;
    padding: 10px;
    width: 968px;
}
.leftcolumn {
    border: 1px solid #ccc;
    color: #333;
    float: left;
    height: 350px;
    margin: 0px 5px 5px 0px;
    padding: 10px;
    width: 195px;
}
.content {
    border: 1px solid #ccc;
    color: #333;
    display: inline;
    float: left;
    height: 350px;
    margin: 0px 5px 5px 0px;
    padding: 10px;
    width: 524px;
}
.rightcolumn {
    border: 1px solid #ccc;
    color: #333;
    float: left;
    height: 350px;
    margin: 0px 0px 5px;
    padding: 10px;
    width: 195px;
}
.footer {
    border: 1px solid #ccc;
    clear: both;
    color: #333;
    margin: 0px 0px 10px;
    padding: 10px;
    width: 968px;
}

Последний раз редактировалось keen_; 05.11.2012 в 22:58.
keen_ вне форума Ответить с цитированием
Старый 05.11.2012, 23:27   #7
MyLastHit
Очень суровый
Участник клуба
 
Аватар для MyLastHit
 
Регистрация: 17.12.2009
Сообщений: 1,988
По умолчанию

Код:
margin: auto 0px;
Что это за бредятина?

Автору - выровнять по высоте не задав самой высоты невозможно только лишь средствами css. Сделай там табличку. Я еще никогда не сталкивался с задачей, когда установка фикс высоты для не динамического элемента была бы проблемой. Вы же делаете сайт по макету и заранее знаете высоту. Нет никакой проблемы в случае чего ее изменить.

UPD: Могу предложить JS-решение. В CSS просто задать
Код:
#logo{
          position: relative;
          top: 50%;
        }
Код:
        window.onload = function(){
            var logo = document.getElementById('logo');
                logo.style.height = logo.clientHeight+'px';
                logo.style.marginTop = -logo.clientHeight/2+'px';
            var header = document.getElementById('header');
                header.style.height = header.clientHeight-20+'px';    
        }
Ненавижу быть как все, но люблю, чтобы все были как я.

Последний раз редактировалось MyLastHit; 05.11.2012 в 23:45.
MyLastHit вне форума Ответить с цитированием
Старый 05.11.2012, 23:44   #8
keen_
Форумчанин
 
Регистрация: 07.12.2011
Сообщений: 112
По умолчанию

Цитата:
Сообщение от MyLastHit Посмотреть сообщение
Автору - выровнять по высоте не задав самой высоты невозможно только лишь средствами css. Сделай там табличку. Я еще никогда не сталкивался с задачей, когда установка фикс высоты для не динамического элемента была бы проблемой. Вы же делаете сайт по макету и заранее знаете высоту. Нет никакой проблемы в случае чего ее изменить.
Нет фиксированной высоты в шапке и быть не должно, это принципиальный вопрос, иначе бы я тут не спрашивал о выравнивании

Нужно помнить, что в старых браузерах люди увеличивают размер шрифта. При этом все остальные элементы не увеличиваются. Это значит, что текст в правой стороне выйдет за границу шапки при увеличении шрифта, если задать размер высоты шапки. Т. е. весь дизайн сломается и будет выглядеть просто стрёмно
keen_ вне форума Ответить с цитированием
Старый 05.11.2012, 23:50   #9
alex4321
Пользователь
 
Регистрация: 23.07.2012
Сообщений: 77
По умолчанию

А что бредового в margin:auto 0px? :-)
Вроде как размеры верхнего и нижнего полей должны автоматом стать одинаковыми, нет?
alex4321 вне форума Ответить с цитированием
Старый 05.11.2012, 23:51   #10
MyLastHit
Очень суровый
Участник клуба
 
Аватар для MyLastHit
 
Регистрация: 17.12.2009
Сообщений: 1,988
По умолчанию

Цитата:
Вроде как размеры верхнего и нижнего полей должны автоматом стать одинаковыми, нет?
Нет) Было бы все так хорошо - работа упростилась во много раз.
Цитата:
Нужно помнить, что в старых браузерах люди увеличивают размер шрифта.
Железный аргумент) Жаль мне этого никогда не понять. Я людей с ИЕ9- шлю качать хром всегда. Ибо нефиг.
Ненавижу быть как все, но люблю, чтобы все были как я.
MyLastHit вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как выровнять по цетру вложенный div? valerka92 HTML и CSS 10 11.09.2012 08:13
как выровнить div внутри другого div'a по вертикали по центру Arassir HTML и CSS 4 12.03.2011 20:01
Div-овая верска тянущаяся по вертикали MarkStaver HTML и CSS 3 08.12.2010 16:52
div тег как нижний слой для второго div тега dadli HTML и CSS 2 30.07.2010 01:12
растянуть div в другом div-e slips HTML и CSS 2 27.11.2009 15:43