VPF::По следам темы "высота дива" - Форум программистов

Zhuk

Дата 17.2.2007, 09:55 (ссылка)

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

Загрузка ...

Новичок

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

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

Уважаемые!
За основу взяла, то что получилось в теме "высота дива"
smile

Взялась не за свою работу, перепробована куча вариантов, но smile

Надо 185||2||626||2||185
А блоки в 622 и последний 185 разбиты на три горизонтальных блока по 22пикс, 2 пикс. и все оставшееся.
"Получился" бред :

Код


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=windows-1251" />
<title>управление плавающими блоками</title>
<style type="text/css">
html {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    }
body {
    background-color: #C0A160;
    margin: 0px;
    padding: 0px;
    height: 100%;
    }
div#main {
    width: 1000px;
    position: relative;
    padding: 0px;
    }
.lft1{
    float: left;
    width: 185px;
    background-color:#666666;
    height: inherit;
    height: expression(document.getElementById('main').style.height);
    margin: 0px 0px;
    }
.lft2 {
    float: left;
    min-width: 622px; //width:622px;
    background-color: #E8E8E8;
    height: inherit;
    height: expression(document.getElementById('main').style.height);
    }
.lft3 {
    float: left;
    min-width: 180px; //width: 180px;
    background-color: #CCCCCC;
    height: inherit;
    height: expression(document.getElementById('main').style.height);
    
    }


.line_g{ min-height: 2px; //height:2px; background-color: #999999; background-image: url(images/pol_g.gif);  background-repeat: repeat-x;  vertical-align: top;}
.line_v{ float: left; min-width: 2px; //width: 2px; background-color: #999999; background-image: url(images/pol_v.gif); background-repeat: repeat-y;
        height: inherit;
     height: expression(document.getElementById('main').style.height);
        margin: 0px 0px;}
.left_mid{ height: 307px; vertical-align: top; background-image: url(images/left_01.gif); background-repeat: no-repeat; }
.count{ background-color: #666666; vertical-align: top;}
.menu_td{ width: 622px; height: 28px;  background-color: #666666; background-image: url(images/point.gif); background-repeat: no-repeat;}
.menu_line{min-width: 2px; // width:2px; background-color : #999999; background-image: url(images/point.gif);  background-repeat: repeat;  vertical-align: top;}
.text{background-color : #E8E8E8;}
.text_news{background-color : #CCCCCC;}
</style>
</head>
<body>
<!-- <div id=="lft0" style="position:absolute; top:0px;left:0px;width:100%; background-color:red;">lft0</div> -->
<div id="main" style="height: 100%">
    <div class="lft1">
        <div class="left_mid"></div>
        <div class="count">{COUNT}</div>
    </div>
    <div class="line_v"></div>
    <div class="lft2">
        <TABLE  BORDER=0 bordercolor="red" class="table_center" CELLPADDING=0 CELLSPACING=0>
                <TR>
                    <TD class="menu_td">
                    </TD>
                </TR>
                <TR>
                    <TD class="line_g">
                    </TD>
                </TR>
                <TR>
                    <TD class="text">
                    {TEXT<br><br><br><br><br><br><br>TEXT<br><br><br><br><br><br><br>TEXT<br><br><br><br><br><br><br>}
                    {TEXT<br><br><br><br><br><br><br>TEXT<br><br><br><br><br><br><br>TEXT<br><br><br><br><br><br><br>}
                    {TEXT<br><br><br><br><br><br><br>TEXT<br><br><br><br><br><br><br>TEXT<br><br><br><br><br><br><br>}
                    </TD>
                </TR>
        </TABLE>
    </div>
    <div class="line_v"></div>
    <div class="lft3">
    <TABLE  BORDER=0 bordercolor="red" width=179  CELLPADDING=0 CELLSPACING=0>
                <TR>
                    <TD class="menu_td">
                    </TD>
                </TR>
                <TR>
                    <TD class="line_g">
                    </TD>
                </TR>
                <TR>
                    <TD class="text_news">
                    {TEXT_NEWS}
                    </TD>
                </TR>
        </TABLE>
    </div>
</div>
</body>
</html>

Все улетает, толщина горизонтального тонкого дива больше 10 пикс. (В IE)

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

Это сообщение отредактировал(а) Zhuk - 18.2.2007, 02:36

Mymik

Дата 17.2.2007, 11:46 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

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

А не могли бы вы нарисовать картинку как должно получится ???
Я не сильно понял что должно получится...

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

Zhuk

Дата 17.2.2007, 13:34 (ссылка)

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

Загрузка ...

Новичок

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

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

Спасибо за отклик, таблица совсем не сложная, если бы не объединение ячеек и не height: 100%
И хотелось бы чтобы высота регулировалась по высоте вставленного текста.

Это сообщение отредактировал(а) Zhuk - 17.2.2007, 14:04

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

1.gif 2,32 Kb

mishaSL

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

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

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1046
Регистрация: 10.1.2007
Где: Санкт-Петербург

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

Zhuk, исходя из того что получилось. Вам лучше сверстать на таблицах, высота там тоже будет работать. И получиться проще и надежнее. smile

--------------------

Лучший способ научиться программированию - это посмотреть как это делают другие...

Zhuk

Дата 18.2.2007, 02:45 (ссылка)

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

Загрузка ...

Новичок

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

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

исправляю свой бред. Не понятны два момента:
1. Как в FF правые и левые колонки сделать по длине средней. Не получилось пока.
2. Как последний столбец не привязывать к конкретному числу пикс.

И вообще, что можно исправить еще?

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