VPF::Разметка страницы, проблема с кроссбраузерностью

Octane

Дата 11.7.2007, 23:12 (ссылка)

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

Загрузка ...

Новичок

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

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

Здравствуйте.

Делаю сайт и столкнулся с одной проблемой:

Применяется верстка только при помощи div, разметка страницы следующая:

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

Заголовок страницы

--------------------------------------------------
|            |                             |                 |
| Левое |    основное          | правое    |
| меню  |  содержимое       |   меню     |
|            |                             |                 |
--------------------------------------------------

Нижний колонтитул

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

Левое и правое меню имеют фиксированную ширину 200px, блок с основным содержимым должен изменять свою ширину и высоту взависимости от ширины окна, еще желательно но не обязательно сделать чтобы левое и правое меню были такой же высоты как и блок основного содержимого, но не фиксированный размер.

Левое и правое меню лепятся к краям при помощи float, блок основного содержимого заполняет доступное пространство между блоками меню.

Такой вариант разметки при помощи div получилось сделать работающий как не странно только в IE7   smile

в фф и опера блок основного содержимого съезжает вниз и не хочет заполнять доступное место между панелями (width: auto;)

используется

Код

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

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

Думаю многим дизайнерам будет интересен этот вопрос, давайте как-нибудь решим эту проблему smile

В прикрепленном файле пример, посмотрите как это выглядет в ИЕ7 и Опера9 или ФФ2 (в других еще не проверял), сразу станет ясна проблема...

P.S. вариант верстки при помощи таблиц не рассматривается smile

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

problem.zip 1,73 Kb

WebDisaster

Дата 12.7.2007, 05:49 (ссылка)

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

Загрузка ...

Опытный

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

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

И снова всё о нём (с). Holy Grail Layout.

Octane

Дата 12.7.2007, 22:00 (ссылка)

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

Загрузка ...

Новичок

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

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

о биг спс за инфу, правда с английским не особо дружу, воткнул код, теперь работает везде кроме ие7 (там левое меню невидна сафсем), буду дальше разбираться, переводить со славарикам smile

Добавлено через 10 минут и 53 секунды
а еще не понял какой там доктайп нужно использовать?

Octane

Дата 12.7.2007, 22:52 (ссылка)

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

Загрузка ...

Новичок

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

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

Фух разобрался, тока не работает "Equal-height columns"
Вот чо получилось:

Код


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>DIV</title>
<style type="text/css" media="all">
<!--
body {
min-width: 630px; /* 2x (LC fullwidth + CC padding) + RC fullwidth */
}
#header {
height: 120px;
background: #0066CC;
}
#container {
overflow: hidden;
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
padding-left: 200px;     /* LC fullwidth */
padding-right: 190px;    /* RC fullwidth + CC padding */
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;    /* CC padding */
width: 100%;
min-height: 300px;
background: #f0f0f0;
}
#left {
width: 180px;          /* LC width */
padding: 0 10px;       /* LC padding */
right: 240px;          /* LC fullwidth + CC padding */
margin-left: -100%;
background: #339900;
}
#right {
width: 130px;          /* RC width */
padding: 0 10px;       /* RC padding */
margin-right: -190px;  /* RC fullwidth + CC padding */
background: #339900;
}
#footer {
position: relative;
clear: both;
height: 80px;
background: #0066CC;
}
/*** IE Fix ***/
* html #left {
left: 150px;          /* RC fullwidth */
}
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;         /* Same as body background */
}
-->
</style>
</head>
<body>
    <div id="header">header</div>
    <div id="container">
        <div id="center" class="column">Text</div>
        <div id="left" class="column">left menu</div>
        <div id="right" class="column">right menu</div>
    </div>
    <div id="footer-wrapper">
        <div id="footer">footer</div>
    </div>
</body>
</html>

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