Как сделать такой шаблон блоками @ DeForum.ru

Здравствуйте. Помогите пожалуйста, сделать такой блочный шаблон. Суть в том, что блок A и блок В одинаковой высоты, блок С приклеен к подвалу блока В. Блок А - liquid, B и С - fixed

Заранее спасибо всем.

p.s.: Сделать блоки А и В у меня получается и все ок, но никак не могу сделать чтобы С был всегда снизу В

таблицей получится меньше кода

навскидку, не зная требований к темлейту, архитектуры и планируемого поведения блоков при изменении высоты/ширины:
«В» объявляется position:relative, внутри него сидит «С» position:absolute.

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

16 Сообщения: 862 Зарегистрирован: 16.04.01

Crazy, а какже садо-мазо?

оффтопик:

бла-бла.
Чел спросил «как сделать блоками?», а не «как оптимальней?»

0 Сообщения: 434 Зарегистрирован: 09.07.06

noway писал(а):

p.s.: Сделать блоки А и В у меня получается и все ок, но никак не могу сделать чтобы С был всегда снизу В

Ну если это уже вышло, то вам сюда.

karamba, я не зря упомянул про удаление зубов. Я ж не сравнивал с "укажите оптимальный способ удаления зубов". А равно "укажите самый концептуально правильный" или "рекомендуемый всемирной ассоциацией стоматологов". Все четко и конкретно: "как удалять зубы через задницу".

И ответ, заметь, дан совершенно конкретный.

Kurilshik писал(а):

таблицей получится меньше кода

не факт.

Можно вообще нарисовать картинку в 1px высотой и длинной, например 1600px (желто-розовую, ну можно и длиннее для верности), пустить фоном для body (всего то делов, и не надо делать таблицу, потом строку, потом 2 ячейки, которые еще и нарезать внутри). А блок "C" позиционировать, как и советовали, абсолютно.

Тоже вариант.

vashurin писал(а):

Kurilshik писал(а):

таблицей получится меньше кода

не факт.

Верно. А если хрустальную вазу выкинуть с крыши пятиэтажного дома на асфальт, то она вовсе не обязательно разобьется.

noway писал(а):

Здравствуйте. Помогите пожалуйста, сделать такой блочный шаблон. Суть в том, что блок A и блок В одинаковой высоты, блок С приклеен к подвалу блока В. Блок А - liquid, B и С - fixed

я не разбираюсь конечно в web-верстке, по-моему блок А больше блока В по высоте и елси вы хотите чтобы по высоте они были одинаковые, то нужно сделать блок D высотой как блок С, а шириной как блок А, и к нему же и прилепить блок С, нет?

Crazy писал(а):

Верно. А если хрустальную вазу выкинуть с крыши пятиэтажного дома на асфальт, то она вовсе не обязательно разобьется.

оффтопик:

Но ведь это же правда. Особенно, если учесть, что нет вводных, в виде высоты этажа, силы притяжения, силы сопротевление среды, через которую она будет падать и силы сопротивление поверхность, на которую ваза упадет.

А в моем варианте, кода действительно меньше.… много меньше... Да и потом разбираться проще.
noway, Дайте, еще хотя бы какие то вводные, а то я, ведь не телепат.

41 Сообщения: 6574 Зарегистрирован: 18.12.05

оффтопик:

xorvat, нет, - блок С лежит на блоке В, который в свою очередь одинаковой высоты с блоком А...

Как вариант (просто нету времени совсем) -- два вертикальных блока высотой 100%. В правом же -- тоже 2 блока "B" и "C" с соответствующими высотами.

оффтопик:

(спустя час, ужин отложил :-)

)

ну, примерно так:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>CSS</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}
#framecontent{
position: absolute;
top: 0;
bottom: 0; 
right: 0;
width: 200px;
height: 100%;
overflow: hidden;
background: #000;
color: #fff;
}
#maincontent{
position: fixed;
top: 0;
left: 0;
right: 200px;
bottom: 0;
overflow: auto; 
background:#cccc99;
}
.rightone{
margin: 2px;
height: 70%;
background: #993333;
}
.righttwo{
margin: 2px;
height: 20%;
background: #66ccff;
}
* html body{
padding: 0 200px 0 0;
}
* html #maincontent{
height: 100%; 
width: 100%; 
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<div id="framecontent">
<div class="rightone">
<h1>first right</h1>
</div>
<div class="righttwo"><h1>second right</h1></div>
</div>
<div id="maincontent"><h1>ceter content</h1></div>
</body>
</html>

Kirill L. писал(а):

xorvat, нет, - блок С лежит на блоке В, который в свою очередь одинаковой высоты с блоком А...

а, понял)

84 Сообщения: 1562 Зарегистрирован: 13.01.05

position:relative + position:absolute

DeДверь
Логин:
Пароль:
	Автологин