Блок выровнен по нижнему краю страницы, и по центру. Такое возможно?

Nuclear_soul · 08.01.2008, 08:21

Вот так вот извращаюсь!
По нижнему краю вроде выровнялся он в итоге, а как теперь всю эту конструкцию по центру выровнять? Вообще я мечтаю о блоке с высотой 100% такое возможно как-то имитировать? Х_х

Код:

<style type="text/css">
<!--
#bot {
	height: 0px;
	width: 800px;
	top: 100%;
	position: absolute;
}
#bott2 {
	background:#009900;
	height: 200px;
	width: 800px;
	position: absolute;
	bottom: 0px;
}
-->
</style>
</head>

<body>

<div id="bot"><div align="center"><div id="bott2">some some some some some some some some some some some some some some </div></div></div>
</body>

kotsie · 08.01.2008, 14:51

я могу порассуждать о пользе квирка и табличной вёрстки, но я вижу кто-то уже грузит помидоры в катапульту

по-моему отцентровать блок можно было поставив ему margin-left:auto, margin-right: auto; с баттомом это вы правильно.

У IE есть замечательная штука expression, но это только для IE, что вас видимо не устроит.

Nuclear_soul · 08.01.2008, 22:15

Что такое квирк? А что таблицу с высотой в 100% все браузеры поймут?

Цитата:

У IE есть замечательная штука expression, но это только для IE, что вас видимо не устроит.

а вас что, устраивает?

Skubent · 08.01.2008, 23:55

Не уверен, что минимальный набор, но как-то кажется так

Код:

<html>
<head><title>Test</title></head>
<body>
<style>
HTML
{
  width: 100%;
  height: 100%;
}

BODY 
{
  width : 100%;
  margin : 0px;
  padding : 0px;
  background-color : green;
  height: 100%;
}
</style>

<div align="center" style="position: absolute; bottom: 0px; width: 100%;">

<div style="width: 100px; border: 1px solid yellow;">a</div>                                           

</div>
</body>
</html>

Nuclear_soul · 09.01.2008, 03:15

Спасибо! Не знал что можно для тега "HTML" прописать что-то.

kotsie · 09.01.2008, 14:18

квирк - он же quirks mode. Режим совместимости или "неправильного" отображения ХТМЛа. включается, если не указан доктайп или указан, но с ошибкой. В этом режиме броузеры понимают высоту у таблиц, а в стандартном - нет.

а про expression.. ну если я уверен на все 100, что тулзой будут пользоваться только через ИЕ, то почему бы не использовать удобную возможность. А ещё с её помощью можно реализовать те свойства ЦСС, которые ИЕ по умолчанию не поддерживает.

KidsKilla · 09.01.2008, 16:10

на мой взгляд наиболее "правильный" вариант (работает и со стандартами и в квирке):

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Page</title>
<style type="text/css">
*{margin:0;padding:0;}
HTML,BODY{height:100%;text-align:center;}
#wrap{min-height:100%;_height:100%;margin:0 0 -100px;text-align:left;}
#foot{height:100px;background:pink;width:800px;text-align:left;margin:auto;}
</style>
</head><body>
<div id="wrap">
wrap
<div style="height:1000px;">распорка</div>
</div>
<div id="foot">foot</div>
</body>

Skubent · 10.01.2008, 00:05

Кид, а мой вариант где ломается ? А то под рукой только 6-й ослик и нет прав на установку софта

Nuclear_soul · 10.01.2008, 05:07

Skubent, твоя конструкция работает нормально в последних фоксе опере и эксплорере.
KidsKilla, твоя не работает у меня вообще =))
Спасибо вам за внимание, ну, раз уж вы тут такие профи, а как выровнять блок ровно по центру страницы?

KidsKilla · 10.01.2008, 13:06

Skubent, там все норм, ток это абсолют, а у мя аллергия на него + возможностей больше =).

Nuclear_soul, выровняй руки, раскрой глаза =)
я тебе дал полный код страницы (</html> ток забыл) но поставил в страницу распорку(она футер отодвигает ниже границы экрана). короче, так, надеюсь, будет понятнее:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Page</title>
<style type="text/css">
*{margin:0;padding:0;}
HTML,BODY{height:100%;text-align:center;}
BODY{background:#eee;}
.wrap{min-height:100%;_height:100%;margin:0 auto -100px;text-align:left;width:80%;background:#fff;}
.wrap_pad{padding:0 0 100px;}
.foot{height:100px;background:pink;width:800px;text-align:left;margin:auto;}
</style>
</head><body>
<div id="wrap" class="wrap"><div class="wrap_pad">
wrap
<div style="height:1000px;border:5px solid lightblue;">распорка</div>
</div></div>
<div id="foot" class="foot">foot</div>
</body>
</html>