Div не соображу. помогите новичку.

hos · April 1, 2008

ситуация такая.

есть 2 изображения. их нужно поместить в Div. прич?м каждый в свой.

первый Div должен быть постоянно привязан к низу странички в браузере и иметь фиксированную высоту.

второй должен быть привязан к верху. он должен чуть, заходить за первый Div. и при растяжении страницы по вертикали второй див должен растягиваться.

помогите пожалуйста.

Чтобы нагляднее отобразить, прикрепляю картинку. http://baner.lab-host.ru/compress.jpg

Как она есть, так она и должна отображаться в браузере.

Получается, что "поляна" - первый div

Небо - второй div

klierik · April 1, 2008

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

hos · April 1, 2008

Надо чтобы скрола небыло. Как это реализовать? скажите плиз

klierik · April 1, 2008

html, body {overflow: hidden;}

hos · April 1, 2008

Кто сможет это реализовать за небольшое вознаграждение. Чтобы скролинга небыло при разных разрешениях.

ну и вс? то что я описал ранее.

???

Fu-tai · April 1, 2008

Что значит без скрола при разных разрешениях. Горизонтальный скрол все авно будет из за поляны.

А вообще решается все проще. Задаешь боди цвет средний между землей и небом. Небо в верхний див, землю в нижний. При растягивании все остается на месте. Но только при вертикальном.

hos · April 1, 2008

А можно в коде? Я, если честно, только начал разбираться в этом. Проч?л пару учебников, а в реале пока не пробовал. Буду очень признателен.

hos · April 2, 2008

Потихоньку начинаю разбираться. Решил небо сделать фоном страницы, а поляну привязать к низу.

Как можно див привязать книзу?

guvatara · April 2, 2008

http://www.htmlbook.ru/css/bottom.html

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

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
 margin: 0;
 padding: 0;
 /* стандартное правило для удаления всех посторонних отступов */
}

html {
 height: 100%;
 /* чтобы элемент html распространялся на всю высоту окна браузера */
}

body {
 position: relative;
 /* чтобы потомки элемента body позиционировались по отношению к body */
 height: auto !important;
 /* для Firefox и Opera ? чтобы не сработало следующее объявление */
 height: 100%;
 /* для IE (работает некорректно, что обеспечивает нужный результат) */
 min-height: 100%;
 /* для Firefox и Opera (в IE 7 делает то же, что предыдущее объявление) */
}

.cont {
padding-bottom:54px;
/* высота футера */
}

.main {
width:100%;
height:100%;
min-height:100%;
background:#FFFF00;
}

.footer {
position:absolute;
bottom:0px;
margin-top:-54px;
height:54px;
width:100%;
background:#FF0000;
}
-->
</style></head>

<body>
<div class="cont">
 <div class="main" >
 <p>Тут</p>
 <p>идет</p>
 <p>основной</p>
 <p>контент</p>
 <p>сайта</p>
 </div>
</div>
<div class="footer">Это футер
</div>
</body>
</html>

hos · April 2, 2008

guvatara, спасибо Вам огромное. Вс? получилось

Sign In

Div не соображу. помогите новичку.

Question

hos

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

hos

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

hos

Link to comment

Share on other sites

Fu-tai

Link to comment

Share on other sites

hos

Link to comment

Share on other sites

hos

Link to comment

Share on other sites

guvatara

Link to comment

Share on other sites

hos

Link to comment

Share on other sites

Обсуждения

Forums

Important Information