html верстка

bloodVIRUS · November 16, 2011

Доброго времени суток уважаемые форумчане ! 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>test</title>
<style type="text/css">
html,
body {
    width:100%;
    height:100%;
}
* {
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<div id = "1" style = "background-color:red; width: 100%; height: 100px;"></div>
<div  id = "2" style = "width: 1000px; margin: 0 auto; height: 100%; padding-top: 20px; padding-bottom: 20px;">
<div  id = "3" style = "background-color: orange; width: 100%; height: 100%;">
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</div>
</div>
<div id = "4" style = "background-color: green; width: 100%; height: 100px; margin: auto 0;"></div>
</body>
</html>

Как мне сделать точно такое же, но с 2-мя но:

- при отсутствии контента в id 3 Он все равно был на весь экран, и не было бы на экране горизонтального скролла.

-при присутствии контента в id 3, и при увеличении контента до уровня когда он не помещается на экране чтобы id 3 увеличивался в высоту, а id 4 уезжал в низ ( сейчас можете видеть что происходит...)

Очень буду благодарен за ответы, потому что пока я в тупике...

Gaspode · November 16, 2011

Нарисуйте лучше, как должно выглядеть.

bloodVIRUS · November 16, 2011

Выглядеть должно в итоге так..

Блок контент Всегда на всю страницу, футер всегда прижат к низу.

И чтобы при добавлении текста блок контент становился шире ( если все не влазит на экран ) и футер уезжал ниже..

gurylyov · November 16, 2011

Я для такой вёрстки воспользовался бы вариантом, свёрстанным Aleko.

Цветом ничего не раскрашено, но суть, вроде бы, подходит. Или я ошибаюсь?

bloodVIRUS · November 16, 2011

Ну там не совсем то что я хотел... Если не трудно, скопируйте текст который я написал в первом посте, там сразу все станет понятно..

Попробую перефразировать в 2х словах

1) Шапка, Width:100%; height: 150px;

2) Контент, width: 1000px; margin: 0 auto; height: 100%;

3) Футер, width: 100%; height: 100px; margin: auto 0;

Это я описал очень грубо и в 2х словах, на практике при отсутствии контента в этом варианте реализации появляется горизонтальный скролл, а если контент появляется больше чем экран способен отобразить... То див с контентом почему то не изменяется в размере, а текст уходит за его пределы, не отодвигая футер проходит за ним, и уходит в низ...

bloodVIRUS · November 16, 2011

Ладно, спасибо за помощь, посоветовался с дизайнером, это не критично

Sign In

html верстка

Question

bloodVIRUS

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Gaspode

Link to comment

Share on other sites

bloodVIRUS

Link to comment

Share on other sites

gurylyov

Link to comment

Share on other sites

bloodVIRUS

Link to comment

Share on other sites

bloodVIRUS

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information