VPF::Разметка с помощью div'ов - Форум программистов

VasilyZ

Дата 29.12.2009, 04:20 (ссылка)

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

Загрузка ...

Новичок

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

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

Помогите, пожалуйста сделать разметку сайта с пощью div'ов. Причем блок MAIN должен иметь
изменяемую ширину, все остальные блоки имели фиксированную ширину. Размер MAIN должен меняться в зависимости от разрешения экрана чтобы не было горизонтальной полосы прокрутки.

comcon1

Дата 29.12.2009, 04:29 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 838
Регистрация: 11.6.2005
Где: Москва ДАС-МГУ

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

http://www.dynamicdrive.com/style/layouts/...ed-fluid-fixed/

Добавлено через 4 минуты и 26 секунд
Футер вставляешь соответственно с clear: left. Дальнейшие рекомендации зависят от дальнейших указаний. Например, если хочешь, чтобы левая и правая уходили фоном в футер, нужно будет все три колонки окружить дивом с overflow:hidden и поставить левой и правой padding-bottom: 32000px; margin-bottom: -32000px;

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

comcon1 on twitter

FortMax

Дата 29.12.2009, 08:06 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 485
Регистрация: 2.10.2006
Где: Россия, г. Бироби джан ЕАО

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

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
    <!--
    * {padding:0px; margin:0px;
        background:#FFF;}
    #header {
        width:100%; height:10%;
        border-bottom:solid 1px #F00;
        text-align:center;
        vertical-align:middle;
    }
    #sleft {
        width:30%; height:85%;
        border-right:solid 1px #FF0000;
        text-align:center;
        float:left;
    }
    #scenter {
        width:40%; height:85%;
        border-right:solid 1px #FF0000;
        text-align:center;
        float:left;
    }
    #sright {
        width:100%; height:85%;
        text-align:center;
    }
    #footer {
        width:100%; height:5%;
        border-top:solid 1px #FF0000;
        text-align:center;
        clear:both;
        position:absolute; bottom:0px;

    }
    -->
    </style>
</head>

<body>
<div id="header">header</div>
<div id="sleft">left</div>
<div id="scenter">center</div>
<div id="sright">right</div>
<div id="footer">footer</div>
</body>
</html>

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

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