XHTML 1.0 Strict выравнивание по высоте?

stm7884696

Как выровнять по центру для данной спецификации 5 div'ов которые составляют прямоугольник 500 х580 в окне 1024х768?
По ширине выровнял, отображжается корректно в IE, Opera и FireFox. А вот по высоте как это сделать - вопрос!

dedwowan

РТФМ
http://htmlcoder.visions.ru/CSS/?22

stm7884696

RTFM?
читай пост внимательно!
во порвых - дивы, во вторых - не текст, а они сами, в третих -совместимость со стандартом xhtml1.0 strict...
Ессно, у меня высота в стилях для боди и html прописана...
И выравнивание по центру по горизонтали делаю через них же...
ЗЫ Вот код:
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" xml:lang="en" lang="en">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

	<title></title>

	<link href="style.css" type="text/css" rel="stylesheet" />

	<>

</head>



<body>

<div class="header" id="center">123</div>

<div class="menu_top" id="center">456</div>

<div class="main" id="center">789</div>

<div class="menu_bottom" id="center">91011</div>

<div class="footer" id="center"><script type="text/javascript">

document.write(document.body.clientWidth+"-"+document.body.clientHeight);

</script></div>

</body>

</html>

CSS

 html,body{

	margin: 0px;

	padding: 0px;

	width: 100%;

	height: 580px;

	text-align: center;

	vertical-align: middle;

	background-image: url(img/bg_body.gif);

	background-repeat: repeat-x;

}

/*common propertis*/

#center{

	width: 500px;

	margin-right: auto; /* Îòñòóï ñïðàâà ñ÷èòàåòñÿ àâòîìàòè÷åñêè */

	margin-left: auto;  /* Îòñòóï ñëåâà ñ÷èòàåòñÿ àâòîìàòè÷åñêè */

}

/*header*/

div.header{

	height: 100px;

}

/*menu top*/

div.menu_top{

	height: 27px;

}

/*main*/

div.main{

	height: 393px;

}

/*menu bottom*/

div.menu_bottom{

	height: 40px;

}

/*footer*/

div.footer{

	height: 20px;

}

sidorpost

Тэкс, на первый просмотр
1. Ты задал у html и body высоту 580px, надеятся после этого, что 4ре дива с общей высотой 580 пикселей будут висеть посередине экрана глупо. Они ессно будут прилепленны сверху. Попробуй задать высоту 100% и vertical-align: middle;
2. Нельзя написать валидный html давая нескольким обьектам одинаковый ID.
3. Если тебе надо на один объект повесить несколько классов, то достаточно их в атрибуте class записать через пробел. Т.е. class="menu_top center".
//

stm7884696

Да, срубает код на проверке...
Ну тогда и правда придется заавать по 2 класса, правда их будет срубать в шкафе 4м и раннее, причем вообще ни один не будет работать...
пробовал и с высотой в 100%, и вертикал аллигн миддле тоже..
Ща просто уже начал пытаться маргины вставлять.

stm7884696

Ща поставил js на лоад и ресайз, глючит в фаерфокс... Как правильно определить, что это фаерфокс?
что бы по условию дописать к переменной там еще значение одно...

ava3443

может лучше ошибку в своём js исправить?

Ivan826

Да, рзботай JS получше, если написать как надо, он везде работать будет

dedwowan

Нда, похоже боди не понимает директиву vertical-align. Ну а таблицы тебе религия юзать не позволит )

Ivan826

Таблицы - калище!

ava3443

Ага, помнится, я для этого делал таблицу с width=100% и height=100% и <tr valign=middle>, в которую вписывал весь остальной контент. С тех пор перешёл от табличного дизайна к CSS, но как делать это на CSS - не разбирался, так как не надо было...

artimon

AFAIK на текущий момент нет ни одного нормально решения этой проблемы, так что если действительно нужно что-то выровнять по вертикали, то таблица. Для Mozilla можно использовать

display: table-cell

stm7884696

 function v_align

	{

	var h=document.body.clientHeight;

	h=(h-500)/2;

	if (h > 0)

		{		document.body.style.marginTop=h;//='margin-top: '+h+'px;';

}}

пытаюсь юзать что то наподобе этого..
При этом, если указываешь просто значение h, то работает в IE и opera, а если h+'px;', то только в фаерфоксе...
вот и хочу сделать разделение для браузеров...

stm7884696

Таблицы не кал, корян, зря ты так..
А вот насчет религии - незнаю..
Просто захотелось проботать решение проблеммы с помощью дивов...
Типа развлекаловки...
И для самоудовлетворения

)
А в таблицах то и корян сделать сможет...

dedwowan

Попробуй просто top менять

stm7884696

в смысле?
можно кодом?

dedwowan

 <html>

<head>

</head>

<script>

function divPosition(objId) {

obj = document.getElementById(objId);

obj.style.left=document.body.clientWidth/2-250;

obj.style.top=document.body.clientHeight/2-50;

}

</script>

<body style="" onload="divPosition('divId')">

<div id="divId" style="position: absolute; height: 200px; width: 500px; border: 1px solid black">Контент дива</div>





</body>

</htl>

В ИЕ, Mozilla 1.7 и Опере Version 7.11 работает. На фаерфоксе не тестил.

martin5124956

Итак, поговорили и хватит. Теперь к делу.... :-)
<?xml version="1.0" encoding="windows-1251"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Virtual Library</title>
<style type="text/css">
/*<![CDATA[*/
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
text-align: center;
}
div {
border: 1px solid red;
width: 200px;
height: 200px;
position: relative;
top: 50%;
margin: -100px auto 0px;
}
/*]]>*/
</style>
</head>
<body>
<div>Всем приве! :-)</div>
</body>
</html>

martin5124956

Также другой пример: http://www.c-41.com/construction.html

stm7884696

лол... не катит
Эту тему я давно знаю...
А вот теперь прикинь, что будет, если у меня прямоугольник 900х580, и пользователь открывает в маленьком окошке... 800х600
Смотрел, что будет?
ну или для примера поменяем стиль div на:

div {

border: 1px solid red;

width: 500px;

height: 580px;

position: relative;

top: 50%;

margin: -290px auto 0px;

}

и попробуем посмотреть не в полноэкранном режиме, а просто в окошке...

Оставить комментарий