VPF::Помогите реализовать перекрытие div'ов

LuckyCat

Дата 18.5.2009, 16:01 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 15.6.2008

Репутация: нет
Всего: нет

есть три дива.
третий перекрывает первый, но он должен скрываться под вторым

при помощи абсолютного позиционирования получается при помощи z-index, но не подходит - высота получается фиксированной

а если содержимое dv1 больше, чем в dv2, то dv3 просто съезжает вниз вместе с dv1
если у dv2 увеличивается высота, то "наезд" dv3 на dv2 остается тем же...
то есть должно получится как в приложенном рисунке.

Что-то похожее получилось:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .main{

            color: white;
            position: relative;
             z-index: 200;
             
             padding-left: 100px;
        }
        .dv1{
            float: left;
            width: 100px;
            background-color: black;
            padding: 20px 0;
            
            float:left;margin-top:30px;/*margin-left:-120px;*/
        }
        .dv2{
            width: 150px;            
            background: red;
            float: left;
            padding: 20px 0;
            
            float:left;margin-top:30px;margin-left:-150px;
        }
        .dv3{
            width: 250px;
            float: left;
            background: green;
            padding: 20px 0;
            
            
             float:left;margin-top:80px;margin-left:-100px; 
        }
    </style>
</head>

<body>

<div class="main">
    <div class="dv1">DV1 DV1 DV1 </div>    
    <div class="dv3">DV3 DV3 DV3 </div>
    <div class="dv2">DV2 DV2 DV2 </div>
</div>


</body>
</html>

Но... Когда, например, кол-во текста увеличивается в dv2, он продолжает дальше "наезжать" на dv3.... Тоже самое и с dv1... dv3 своего положения не меняет.

Подскажите, пожалуйста.

Это сообщение отредактировал(а) LuckyCat - 18.5.2009, 16:02

Присоединённый файл ( Кол-во скачиваний: 7 )

divs.jpg 10,23 Kb

bazzjr

Дата 18.5.2009, 16:43 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: 2
Всего: 6

Не совсем понятен вопрос...

В двух словах четко, опишите, что нужно получить???

LuckyCat

Дата 18.5.2009, 17:03 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 15.6.2008

Репутация: нет
Всего: нет

dv1 - левая колонка сайта
dv2 - центральный блок, для основного блока. Когда текста мало и в dv1, и в dv2, то последний чуть-чуть, пикселов на 20, заезжает на dv3
dv3 - footer

Если же у dv1 высота становится больше, то поведение как всегда у сайтов - футер идет вниз вместе с dv1, dv2 остается на месте...

не знаю уже, как еще объяснить... в том примере, что постом выше, когда dv1 и dv2 растягиваются в высоту, футер остается на месте, а этого быть не должно.

bazzjr

Дата 18.5.2009, 17:35 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: 2
Всего: 6

Я так пологаю данное решение подходит под описание проблемы:

Код


<!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=windows-1251" />
<style type="text/css">
.clear {clear:both; height:0; font-size:1px; line-height: 0px;}
</style>
</head>
<body>
<div>
<div style="float:left; width:20%; background:#6FF; position:relative; top:-10px; margin-top:10px">LEFT<br /><br /><br /><br /></div>
<div style="float:left; width:80%; background:#9F6;">CONTENT<br /><br /><br /><br /><br /><br /></div><br class="clear" />
</div>
<div style="width:100%; background:#CCC; height:10px; position:relative; top:-10px; z-index:-1">FOOTRER</div>
</body>
</html>

LuckyCat

Дата 18.5.2009, 17:38 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 15.6.2008

Репутация: нет
Всего: нет

bazzjr, большое спасибо!!!!!! smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »