"Резиновый" сайт - Форум интересных решений

[ Новые сообщения · Участники · Поиск по форуму · RSS ]

Страница 1 из 1 1
Модератор форума: Gaara, kydapodatsya

"Резиновый" сайт (Не получается)

"Резиновый" сайт

Zlyden0437

Дата: 18 Января 2010, 23:40 | Сообщение # 1

● ● ● ● ●

5 сообщений

« 0 »

0 наград

Статус: Offline

На юкозе я взял за основу дизайн с одним контейнером слева, и довольно красиво его сделал. Но вот беда - ширина страницы фиксированная, а по бокам - синие линии. Чуть подучившись html, я попробовал его сделать резиновым (т.е. меняющимся под размеры окна браузера) - я думал, основная проблема будет с картинкой. Оказалось, нет. Картинку-шапку я выставил на задний слой, растянув. Но вот контент растянуть не удалось.
А именно: Левое меню с фиксированной шириной 290 px (менять не собираюсь). Справа от него содержимое страницы с шириной 565 px. Мне нужно, чтобы контент растягивался на всю доступную ему область, но не получается - вместо этого он перемещается под меню.

Code

<body>
$ADMIN_BAR$
       <div id="siteimg"><img width="100%" src="/desigh/bgf.jpg"></img></div>
       <div id="sitebody">

$GLOBAL_AHEADER$
<div id="sidebar">


<?if($SMENU_1$)?>
<div class="menuTable">$SMENU_1$</div>
<?endif?>

    <br /> <br />
$GLOBAL_CLEFTER$
</div>
<div id="content">
<div id="logo"><h1>Site Logo</h1></div>
<div id="textBlock">
<?if($MODULE_NAME$)?><h2>$MODULE_NAME$</h2><?endif?>

    $CONTENT$

</div>
</div>
<div style="clear:both;"></div>

$GLOBAL_BFOOTER$

       </div>
</body>

Соответствующая таблица css:

Code

/* General Style */
body {background:#000000; margin:0px; padding:0px;}
#siteimg {position:absolute; z-index:0;width:100%}
#sitebody {z-index:1;position:relative;}
#contanier {text-align:center;background:url('/.s/t/849/3.gif') repeat-x #3E606F;}
#wrap {background:url('/desigh/line.jpg') repeat-y #FCFFF5;width:920px;margin-left:auto;margin-right:auto;min-width:920px;width: expression(document.body.clientWidth > 920 ? "920" : "920px");text-align:left;}
#topPick {width:920px;margin:0;padding:0;background:url('/desigh/bg.jpg') no-repeat;}
#dataBar {padding:10px 20px;text-align:left;font-size:8pt;color:#ffffff;}
#sidebar {float:left;width:290px;}
#content {float:right;width:565px;display:inline;margin-right:45px;}
#logo {height:180px;}
#logo h1 {color:#000000;font-size:20pt;font-weight:normal;padding:0px;position:relative;top:20px;left:50px;margin:0px;padding:0px;width:500px;text-align:center;}
#logo h2 {color:#000000;font-size:20pt;font-weight:normal;padding:0px;position:relative;top:20px;right:60px;margin:0px;padding:0px;width:500px;text-align:center;}
#wrapf {background:url('/desigh/linef.jpg') repeat-y #FCFFF5;width:920px;margin-left:auto;margin-right:auto;min-width:920px;width: expression(document.body.clientWidth > 920 ? "920" : "920px");text-align:left;}
#topPickf {width:920px;margin:0;padding:0;background:url('/desigh/bgf.jpg') no-repeat;}

#textBlock {margin-bottom:20px;width:565px;backgroud-color:#ffffff;}
.boxTable {width:290px;padding:0;margin:5px 0px;text-align:center;}
.boxTable h2 {font-size:9pt;color:#220000;padding:5px 20px;margin:0px;text-align:right;background:#74311c;border:1px solid #96372a;}
.boxContent {color:#ffffff;:margin-left:auto;margin-right:auto;margin:10px 0px 10px 20px; width: 250px;}
.boxContent li {margin-bottom:5;text-align:left;}
.left {text-align:left;}
#footer {padding:20px;text-align:center;color:#936E6E;background:url('/desigh/Underline.jpg') no-repeat #D1DBBD;}

"Резиновый" сайт (Не получается)

Страница 1 из 1
1

U.Helper