Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Как сделать три столба дивами?

Автор: Bangladesh 23.10.2006, 23:30

Здравствуйте. Сейчас осваиваю вёрстку дивами и помню, что где-то видел сайт, который был полностью сделан на дивах. Там было три колонки и боковые ещё можно было убирать. Табличный аналог:

Код


<table>
      <tr>
            <td></td>
            <td></td>
            <td></td>
     </tr>
</table>

Автор: R.M. 24.10.2006, 01:57

ну так же

Код


<div style='float: left;'>Левая часть</div>
<div style='float: left;'>Средняя часть</div>
<div style='float: left;'>Правая часть</div>

а чтобы убирать то это уже подругому, там функцию javascript на клик по какой-нибудь картинке делаешь и функция меняет стиль display для нужного div'а

Автор: Illuminaty 24.10.2006, 14:53

Код

<?xml version="1.0" encoding="windows-1251"?>
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style media="screen" type="text/css">
<!--/*--><![CDATA[/*><!--*/
html, body {
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    height: 100%;
}
body {
    overflow: auto;
}
.column {
    height: 100%;
    margin: 0px;
}
#left {
    float: left;
    width: 100px;
    background-color: #FF9900;
}
#right {
    float: right;
    width: 100px;
    background-color: #99CC66;
}
#center {
    background-color: #666633;
    margin: 0px 100px;
}
/*]]>*/-->
</style>
<script language="javascript" type="text/javascript"><!--//--><![CDATA[//><!--
//--><!]]></script>
</head>
<body> 
<div class="column" id="left">left</div><div class="column" id="right">right</div><div class="column" id="center">Center</div> 
</body>
</html>

Автор: skyboy 24.10.2006, 15:34

Illuminaty, для #center забыл "margin-right: 100px", иначе в среднем слое текст будет лезть поверх правого слоя.

Автор: Illuminaty 24.10.2006, 15:36

skyboy, не забыл smile

Цитата(Illuminaty @ 24.10.2006, 15:53

)

margin: 0px 100px;

Автор: skyboy 24.10.2006, 16:00

Illuminaty, упс smile

обознался. извини, перепутал порядок для левого отступа и правого

Автор: Bangladesh 24.10.2006, 20:41

R.M. и Illuminaty спасибо.

ещё вопросик по теме. а каким магическим образом можно всё эти дивы растянуть? допустим, левый должен быть 256 пикселей, правый столько же, а средний — всё остальное.

Автор: Illuminaty 24.10.2006, 21:55

Код

#left {
    float: left;
    width: 256px;
    background-color: #FF9900;
}
#right {
    float: right;
    width: 256px;
    background-color: #99CC66;
}
#center {
    background-color: #666633;
    margin: 0px 256px;
}

Автор: Bangladesh 24.10.2006, 22:15

Illuminaty, чего-то не получается. последний див сползает вниз (см. вложение)

Код


<html>

<head>
 <style media="screen" type="text/css">
html, body {
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    height: 100%;
}
body {
    overflow: auto;
}

   #left {
    float: left;
    width: 256px;
    background-color: #FF9900;
}
#right {
    float: right;
    width: 256px;
    background-color: #99CC66;
}
#center {

    background-color: #666633;
    margin: 0px 256px;
}

 </style>
 </head>

 <body>
     <div id="left">a</div>
     <div id="center">b</div>
     <div id="right">c</div>
 </body>
</html>

Автор: Illuminaty 25.10.2006, 06:49

I, GyoZ, не

Цитата(I @ GyoZ, 24.10.2006, 23:15

)

Код

<div id="left">a</div>
<div id="center">b</div>
<div id="right">c</div>

, а

Код

<div id="left">a</div> 
<div id="right">b</div> 
<div id="center">c</div>

Автор: AztEK 30.10.2006, 19:27

Извините, что поднимаю старую тему, но здесь меня интересует один вопрос. Если в центральный див поставить большой кусок текста, не влезающий на экран, он вылезет за пределы дива smile

(можете проверить). Мне, как наверное и многим smile

надо сделать следующее - структуру из 3-х вертикальных блоков, растягивающихся при растяжении центрального блока содержимым. Как такое реализовать?

Автор: R.M. 31.10.2006, 11:18

Укажи высоту в процентах и тогда они будут растягиватся в ширину, только всем одинаковую высоту, тогда будут растягиватся "синхронно" smile

Автор: AztEK 31.10.2006, 20:42

В смысле? Я указал высоту 100% - текст вылезает.

Автор: AztEK 1.11.2006, 15:03

Конкретизирую проблему. Вот код:

Код


<!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" lang="ru">
    <head>
        <title>Верстаем дивами</title>
        <meta http-equiv="Content-Type" content="text/html; charset=windows1251" />
    </head>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        html, body { height: 100%; }
        .mainframe { height: 100%; }
        .container { height: 100%; }
        .right {
            height: 100%;
            background-color: #ddd;
            width: 250px;
            float: right;
        }
        .left {
            height: 100%;
            background-color: #ddd;
            float: left;
            width: 250px;
        }
        .content {
            height: 100%;
            width: 100%;
            background-color: #ccc;
        }
        .header, .footer {
            height: 50px;
            background-color: #bbb;
        }
    </style>
    <body>
        <div class="mainframe">
            <div class="header">Это у нас шапка</div>
            <div class="container">
                <div class="left">Левый блок</div>
                <div class="right">Правый блок</div>
                <div class="content">
                    Это текст
                    <h1><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></h1>
                    Это тоже текст
                </div>
            </div>
            <div class="footer">А это низ</div>
        </div>
    </body>
</html>

Надпись "Это тоже текст" залезает на низ.

Автор: R.M. 1.11.2006, 15:03

А, понял, не, тут я незнаю выхода smile

подождём Illuminaty smile

Автор: Illuminaty 1.11.2006, 15:44

Если честно, то я решил бы проблему одной таблицей. Div'ами тоже можно решить, но это будет таким извратом....

Автор: AztEK 1.11.2006, 17:07

Ну... А если заказчик требует именно дивами?
И потом, как-то всё-таки можно ведь? Даже если извратно, интересно было бы попробовать.

Автор: Punk_UnDead 1.11.2006, 20:26

AztEK, скажи мне каким местом высота в 100% относится к содержимому?
100% это видимая часть окна, а не родительская высота, ибо родительская высота определяется дочерней, а не наоборот
плюс к центральной части надо бы поставить margin

Автор: SelenIT 1.11.2006, 21:43

Punk_UnDead,

Цитата(Punk_UnDead @ 1.11.2006, 20:26

)

100% это видимая часть окна, а не родительская высота

Так было, если не ошибаюсь, в 6-м нетскейпе, и это был страшный глюк. По стандарту 100% - это как раз родительская высота, притом только в том случае, если она явно задана.

Цитата(Punk_UnDead @ 1.11.2006, 20:26

)

родительская высота определяется дочерней, а не наоборот

Так только в IE (по крайней мере до 7-го), и с точки зрения стандартов это тоже глюк smile

Автор: Punk_UnDead 1.11.2006, 22:32

SelenIT, мне мамой поклясться? или ты сам проверишь?
в великой тройке это именно размер области просмотра, причём опера не растягивает средний

Автор: SelenIT 1.11.2006, 22:54

Punk_UnDead, клясться не надо, а предмет стоит того, чтобы с ним разобраться. В частности, с этим http://xhtml.ru/2005/12/12/body_height_research/ Вы знакомы?

Автор: Illuminaty 2.11.2006, 09:34

AztEK, посмотри http://www.positioniseverything.net/articles/onetruelayout/equalheight. Должна помочь

Автор: R.M. 2.11.2006, 11:33

Illuminaty, спасибо за статью, мне тоже думаю поможет smile

действительно решение кривое но если что придётся делать так.

Автор: Illuminaty 2.11.2006, 11:39

Да всегда пожалуйста smile

Автор: Bangladesh 3.11.2006, 00:28

Код


<!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" lang="ru">
    <head>
        <title>Âåðñòàåì äèâàìè</title>
        <meta http-equiv="Content-Type" content="text/html; charset=windows1251" />
    </head>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        html, body { height: 100%; overflow: auto; }
        .mainframe { height: 100%; }
        .container { height: 100%; }
        .right {
            height: 100%;
            background-color: #ddd;
            width: 250px;
            float: right;
        }
        .left {
            height: 100%;
            background-color: #ddd;
            float: left;
            width: 250px;
        }
        .content {
            height: 100%;
            background-color: #ccc;
            margin-right: 250px;
        }
        .header, .footer {
            height: 50px;
            background-color: #bbb;
        }
    </style>
    <body>
        <div class="mainframe">
            <div class="header">Ýòî ó íàñ øàïêà</div>
            <div class="container">
                <div class="left">Ëåâûé áëîê</div>
                <div class="right">Ïðàâûé áëîê</div>
                <div class="content">
                    Ýòî òåêñò
                    <h1><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></h1>
                    Ýòî òîæå òåêñò
                </div>
            </div>
            <div class="footer">À ýòî íèç</div>
        </div>
    </body>
</html>

вот так у меня всё работает. до этого не работало только в ие. убрал width: 100% из content и добавил в body overflow: auto

Автор: R.M. 3.11.2006, 10:31

Странно у меня дивы не раздвинулись в высоту а только боди раздвинулось и текст уехал.

Автор: AztEK 3.11.2006, 15:25

У меня тоже не работает как надо... smile

Illuminaty, спасибо за ссылку.... но приведённый там код у меня не работает ни в одном из трёх браузерах у меня (а про переполнение контейнера).... может быть я что-то не так делаю smile

Автор: Nuxx 3.11.2006, 17:41

Цитата(AztEK @ 30.10.2006, 19:27)

(можете проверить).

Ты что имел ввиду под большим куском текста? Что-то вроде длинного слова?? Думаю в этом случае ничто не поможет). Даже используя табличную разметку, структура все равно будет рушиться.
Может я неправильно понял, поясни подробнее

Автор: AztEK 3.11.2006, 18:36

Я имел в виду текст, не влезающий в див по высоте. Имеющий много строк например.

Автор: R.M. 3.11.2006, 22:43

Цитата(Nuxx @ 3.11.2006, 18:41

)

Думаю в этом случае ничто не поможет).

Код


overflow: auto;

обычно помогает

Автор: Bangladesh 4.11.2006, 00:46

Цитата(R.M. @ 3.11.2006, 21:43)

Цитата(Nuxx @ 3.11.2006, 18:41

)

Думаю в этом случае ничто не поможет).

Код


overflow: auto;

обычно помогает

я же написал выше. я так понимаю у вас див уезжает вниз, если текста там много или как? я исправил несколько позиций и всё нормально отображается во всех броузерах. я сейчас макет этим методом верстаю и отлично.

Автор: R.M. 4.11.2006, 00:53

Цитата(I @ GyoZ, 4.11.2006, 01:46

)

я же написал выше

Дык я же не про твой пост smile

Цитата(I @ GyoZ, 4.11.2006, 01:46

)

у вас див уезжает вниз, если текста там много или как

Нет, у нас див остаётся на месте а текст в нём перекрывает его и уезжает вниз.