Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > несложная вёрстка - появилась проблема


Автор: pnd_ku 16.1.2007, 21:41
Здраствуйте! Возникла следующая проблема:
у меня не получается концепция вёрстки вего лиш из 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>

Автор: alexu_id 18.1.2007, 16:34
следующий код сделает общую верстку протестировано в 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>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)