Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> 2 Diva одинаковой высоты 
:(
    Опции темы
Intorion
Дата 21.1.2008, 15:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Уже потратил 3 часа на решение этой проблемы. Прочитал похожую тему на этом форуме, где была ссылка сюда, но сделать так как мне надо у меня не получилось. Мне нужно сделать так, чтобы div c id="test" занял всё свободное место по-высоте относительно diva c меню и наоборот. То есть если div с меню по-высоте контента больше чем div тест, то div тест по-высоте был равный диву с меню, и наоборот, если контента больше чем меню, то меню становилось равной по-высоте контенту. Обязательно нужно сделать так, чтобы бордер diva "test" , было видно  smile как с низу, так и сверху. Как же это можно сделать ? 

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<style>    
    body {
        margin: 0px;
        padding: 0px;            
    }

    #top {
          background-color: blue;      
          height:100px;
    }

    #footer {
        clear: both;
        margin: 0;
        background-color: blue;
    }                             
    
    #content {    
        background-color: red;
        width: 100%;               
        overflow: hidden;
    }
    
    #leftnav {
        float: right;
        width: 200px;
        background-color: orange;    
        padding-bottom: 32767px;
        margin-bottom: -32767px;
    }
    
    #test {        
        width: 100%; 
        margin-right: -210px;
        float:left;              
        padding-bottom: 32767px;
        margin-bottom: -32767px;
        border: 1px solid yellow;     
    }            
</style>
</head>
<body>
    <div id="top">
        Header
    </div>      
    <div id="content">
        <div id="test">
            hello
        </div>
        <div id="leftnav">
            Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum                <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum            <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum            <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum            <br>Lorem ipsum <br>Lorem ipsum <br>
        </div>
    </div>

    <div id="footer">
        Footer
    </div>
</body>
</html>

PM MAIL   Вверх
WebDisaster
Дата 21.1.2008, 16:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Intorion, а не проще будет сделать

#footer {border-top: 1px solid #777;}
#test{border-top: 1px solid #777;}

Сделать именно то, что написано, насколько я понимаю, можно только используя JavaScript. Но ту же самую "картинку" можно получить другими способами. Важно только понимать, что именно нужно получать. Самый тупой (и не очень изящный) вариант достичь такой же визуальный эффект -- завернуть #test и #leftnav в один ещё один блок и назначить бордеры уже ему.

Это сообщение отредактировал(а) WebDisaster - 21.1.2008, 16:59
PM MAIL   Вверх
Intorion
Дата 21.1.2008, 17:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Спасибо тебе WebDisaster, всё оказалось довольно просто  smile 
PM MAIL   Вверх
WebDisaster
Дата 21.1.2008, 17:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



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


 




[ Время генерации скрипта: 0.0592 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.