Позиционирование бокса в основном боксе - HTML и CSS

keen_ · 28.06.2012, 00:40

Что-то не получается поставить бокс в нужное место внутри другого бокса - опустить вниз. В таблице это делается valign="bottom", а тут не знаю как сделать.

Код 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>

<style type="text/css">
#header {
 color: #333;
 width: 900px;
 float: left;
 padding: 10px;
 height: 100px;
 margin: 10px 0px 5px 0px;
 background: #cccccc;
}
#navigation {
 float: right;
 width: 600px;
 padding: 10px;
 border: 1px solid red;
 margin: 0px 0px 0px 0px;
 background: red;
}
</style>

</head>

<body>

<div id="header">

<div id="navigation">

Red Box
		 
</div>

</div>

</body>
</html>

rlib · 01.07.2012, 12:28

В #navigation:

Код:

position: relative;
top: 90px;

С топ надо поиграться: или вычислить высоту динамически, либо пропишите ее в стилях и top в соответствии.

keen_ · 01.07.2012, 13:07

А вот и не совсем правильно!

Правильно буде вот так:

добавить position: relative; для #header

а в #navigation добавить position: absolute; bottom: 0;

Но теперь нужно другое - не понимаю как выровнять #navigation посередине #header. Для таблицы это равно valign="middle" (оно вообще по умолчанию у таблиц).

rlib · 02.07.2012, 00:45

Цитата:

Сообщение от keen_

Но теперь нужно другое - не понимаю как выровнять #navigation посередине #header. Для таблицы это равно valign="middle" (оно вообще по умолчанию у таблиц).

Код:

width: 100px;
margin: auto;

chyvakoff · 02.07.2012, 09:46

Вместо valign используйте vertical-align в стилях...

keen_ · 02.07.2012, 13:17

Не получается. Можете привести реальный пример?

01.07.2012, 12:28	#2
rlib Форумчанин Регистрация: 22.05.2012 Сообщений: 352	В #navigation: Код: `position: relative; top: 90px;` С топ надо поиграться: или вычислить высоту динамически, либо пропишите ее в стилях и top в соответствии.

02.07.2012, 09:46	#5
chyvakoff Пользователь Регистрация: 10.12.2011 Сообщений: 91	Вместо valign используйте vertical-align в стилях... Мой блог о PHP и Drupal

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Отлов появления месседж-бокса с ошибкой.	StIX-S	Win Api	15	11.08.2017 19:30
Вопросы в основном по оптимизации быстродействия.	Morkonwen	Visual C++	24	15.07.2010 02:35
Как правильно запретить писать в комбо-боксе. А только выбирать?	TwiX	Общие вопросы Delphi	2	02.06.2010 01:34
Создание логических разделов на основном	Kreadlling	Операционные системы общие вопросы	3	12.09.2009 14:39
Файл в Лист боксе	Temka	Общие вопросы Delphi	11	23.05.2009 10:29

01.07.2012, 13:07	#3
keen_ Форумчанин Регистрация: 07.12.2011 Сообщений: 112	А вот и не совсем правильно! Правильно буде вот так: добавить position: relative; для #header а в #navigation добавить position: absolute; bottom: 0; Но теперь нужно другое - не понимаю как выровнять #navigation посередине #header. Для таблицы это равно valign="middle" (оно вообще по умолчанию у таблиц).

02.07.2012, 13:17	#6
keen_ Форумчанин Регистрация: 07.12.2011 Сообщений: 112	Не получается. Можете привести реальный пример?