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

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Как сделать три столба дивами? 
V
    Опции темы
Bangladesh
Дата 23.10.2006, 23:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


AsBest
***


Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

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

Код

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



--------------------
ок
PM MAIL WWW ICQ Skype   Вверх
R.M.
Дата 24.10.2006, 01:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Анархист
****


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

Репутация: 9
Всего: 30
ну так же
Код

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

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


--------------------
Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia 
PM MAIL WWW ICQ   Вверх
Illuminaty
Дата 24.10.2006, 14:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


/*Антон Захаров*/
***


Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56
Код
<?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>
PM MAIL ICQ   Вверх
skyboy
Дата 24.10.2006, 15:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


неОпытный
****


Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 6
Всего: 260
Illuminaty, для #center забыл "margin-right: 100px", иначе в среднем слое текст будет лезть поверх правого слоя.
PM MAIL   Вверх
Illuminaty
Дата 24.10.2006, 15:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


/*Антон Захаров*/
***


Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56
skyboy, не забыл smile
Цитата(Illuminaty @  24.10.2006,  15:53 Найти цитируемый пост)
margin: 0px 100px;
PM MAIL ICQ   Вверх
skyboy
Дата 24.10.2006, 16:00 (ссылка) | (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


неОпытный
****


Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 6
Всего: 260
Illuminaty, упс smile обознался. извини, перепутал порядок для левого отступа и правого
PM MAIL   Вверх
Bangladesh
Дата 24.10.2006, 20:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


AsBest
***


Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: 4
Всего: 17
R.M. и Illuminaty спасибо.

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


--------------------
ок
PM MAIL WWW ICQ Skype   Вверх
Illuminaty
Дата 24.10.2006, 21:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


/*Антон Захаров*/
***


Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56
Код
#left {
    float: left;
    width: 256px;
    background-color: #FF9900;
}
#right {
    float: right;
    width: 256px;
    background-color: #99CC66;
}
#center {
    background-color: #666633;
    margin: 0px 256px;
}
PM MAIL ICQ   Вверх
Bangladesh
Дата 24.10.2006, 22:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


AsBest
***


Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: 4
Всего: 17
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>


Это сообщение отредактировал(а) I, GyoZ - 24.10.2006, 22:25

Присоединённый файл ( Кол-во скачиваний: 18 )
Присоединённый файл  zakolbas.gif 4,27 Kb


--------------------
ок
PM MAIL WWW ICQ Skype   Вверх
Illuminaty
Дата 25.10.2006, 06:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


/*Антон Захаров*/
***


Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56
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> 

 smile 
PM MAIL ICQ   Вверх
AztEK
Дата 30.10.2006, 19:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 4
Всего: 18
Извините, что поднимаю старую тему, но здесь меня интересует один вопрос. Если в центральный див поставить большой кусок текста, не влезающий на экран, он вылезет за пределы дива  smile (можете проверить). Мне, как наверное и многим smile надо сделать следующее - структуру из 3-х вертикальных блоков, растягивающихся при растяжении центрального блока содержимым. Как такое реализовать?


--------------------
Linux is like wigwam -- no windows, no gates, apache inside.
PM MAIL Jabber   Вверх
R.M.
Дата 31.10.2006, 11:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Анархист
****


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

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


--------------------
Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia 
PM MAIL WWW ICQ   Вверх
AztEK
Дата 31.10.2006, 20:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 4
Всего: 18
В смысле? Я указал высоту 100% - текст вылезает.


--------------------
Linux is like wigwam -- no windows, no gates, apache inside.
PM MAIL Jabber   Вверх
AztEK
Дата 1.11.2006, 15:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 4
Всего: 18
Конкретизирую проблему. Вот код:
Код

<!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>

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


--------------------
Linux is like wigwam -- no windows, no gates, apache inside.
PM MAIL Jabber   Вверх
R.M.
Дата 1.11.2006, 15:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Анархист
****


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

Репутация: 9
Всего: 30
А, понял, не, тут я незнаю выхода smile подождём Illuminaty smile


--------------------
Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia 
PM MAIL WWW ICQ   Вверх
Страницы: (3) Все [1] 2 3 
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




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


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

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