VPF::несложная вёрстка - появилась проблема

pnd_ku

Дата 16.1.2007, 21:41 (ссылка)

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

Загрузка ...

Шустрый

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

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

Здраствуйте! Возникла следующая проблема:
у меня не получается концепция вёрстки вего лиш из 4 дивов с содержанием.
Если вы посмотрите аттач (он совсем маленький) то будет легче понять что мне надо.
Вертикальное меню справа фиксированной ширины и всегда "прилеплено" к правому краю.
Всё остальное теняеться. То есть мы увеличиваем размер окна браузера а в это время вертиальное меню остаёться фиксированной ширины справа, а баннер, главный слой с контентом и меню пропорционально растягиваються.
Меню фиксировованной высоты.
Так же нужна следующая возможность: если в слое с контентом контента настолько много что он вылазит за высоту браузера (при этом сам слой ессно растягиваеться), то баннер и вертикальное меню тоже увеличивают свою высоту до высоты слоя с контентом.

Вот сэмпл кода. Но мне он уже не нравиться.
Пожалуйста помагите кто чем может или хотябы направьте на путь истинный.

Код


<html>
<head>
<title></title>
<style>
body,html{margin:0px;padding:0px}
</style>
</head>
<body>
    <div style="width:100%;height:100%">
        <div style="float:left;height:100%;width:30%;background:#ddd">
        </div>
        <div style="float:left;height:100%;width:70%;background:#ccc">
            <div style="width:100%;height:100px;background:#c00">
            </div>
        </div>
    </div>
</body>
</html>

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

sample.gif 4,19 Kb

alexu_id

Дата 18.1.2007, 16:34 (ссылка)

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

Загрузка ...

Новичок

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

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

следующий код сделает общую верстку протестировано в Opera и IE если будут ошибки в других браузерах просьба сообщить

Код



<html>
<head>
    <title>Untitled</title>
</head>
<style>
/* 100 -  высота h-menu */
/* 200 -  ширина v-menu */
/* 30%-  ширина баннера можно выставить в px */

body, html { margin:0; padding:0; }
#banner,#h-menu,#content,#v-menu,container { overflow:hidden; display:inline-block; }

#h-menu    { background-color:#ff0000; position:absolute; width:70%; height:100px; top:0px; left:30%; }

#banner    { background-color:#cc99ff; height:100%; width:30%; }
#content   { background-color:#ccffcc; position:absolute; height:100%; width:70%; top:0px; left:30%; padding-top:100px; margin-right:200px; }
#v-menu    { background-color:#00ccff; position:absolute; height:100%; width:200px; top:0px; right:0px; padding-top:100px; }

#footer    { background-color:#0000aa; clear:both; }
</style>
<body>
<div style="width:100%; height:100%;">
    <div id="banner">banner</div>
    <div id="content">content</div>
    <div id="v-menu">v-menu</div>    
</div>

<div id="h-menu">h-menu</div>

<div id="footer">footer</div>
</body>
</html>

Это сообщение отредактировал(а) alexu_id - 18.1.2007, 16:36

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