как растянуть сайт на весь браузер если на странице мало контента

[AlexKon]

в общем есть вот такое

нужно получить либо такое

либо такое

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

[psywalker]

Первый вариант получить легко, просто этоже обычный подвал всегда внизу, а контент тянеться, т.е. фон на него вешаешь, да и всё.

[AlexKon]

Первый вариант получить легко, просто этоже обычный подвал всегда внизу, а контент тянеться, т.е. фон на него вешаешь, да и всё.

не совсем понял как это, у меня контент тянется в зависимости от содержимого в контент-блоке

[Searcher]

http://www.zakharov.ms/footer/ это читали?

[AlexKon]

http://www.zakharov.ms/footer/ это читали?

да это подошло, спасибо Searcher

этот пример отлично работает для первого случая, а как быть со вторым?

[Searcher]

Вот хороший вариант, можно его для внутренностей использовать

[AlexKon]

Вот хороший вариант, можно его для внутренностей использовать

да интересный вариант, но немного замудренный

[Searcher]

да интересный вариант, но немного замудренный

За универсальность приходится платить...

[psywalker]

да интересный вариант, но немного замудренный

У тебя задача тоже не лучше.

[AlexKon]

У тебя задача тоже не лучше.

да задача еще та, но к сожалению она достаточно часто встречается, во всяком случае в моей практике

За универсальность приходится платить...

согласен, отлично подходит для сайдбара, а вот для 3 варианта, который я привел, все равно он не подходит,

так как нечему блок тянуть до самого низа, нужно каким то иным способом растягивать блок до футера

[Searcher]

Если ширина фиксированная, то создать иллюзию блока на всю высоту можно фоном у родителя.

это кстати psywalker уже предлагал

[AlexKon]

Если ширина фиксированная, то создать иллюзию блока на всю высоту можно фоном у родителя.

это кстати psywalker уже предлагал

да, я так и делаю, в данный момен у меня получается в точности как изображено на 2 варианте, те синий фон тянется а в нем лежит желтый контент-блок,

а как растянуть именно желтый контент-блок, который уже лежит в блоке с синим фон, как изображено на 3 варианте

[Searcher]

Так что мешает картинкой сделать фон?! Нарисуйте картинку высотой в 1px и шириной как ширина синего блока и закрасьте желтым левую часть, а синим - правую. Поместите эту картинку с повторением по вертикали в фон синего блока. А синие рамки добавьте у хедера с футером.

мыслите творчески...

[AlexKon]

Так что мешает картинкой сделать фон?! Нарисуйте картинку высотой в 1px и шириной как ширина синего блока и закрасьте желтым левую часть, а синим - правую. Поместите эту картинку с повторением по вертикали в фон синего блока. А синие рамки добавьте у хедера с футером.

мыслите творчески...

эта идея у меня была, я думал есть возможность растянуть сам див

[Searcher]

можно воспользоваться min-height, но там дальше начнутся сложности...

[AlexKon]

можно воспользоваться min-height, но там дальше начнутся сложности...

пробовал воспользоваться min-height, чет не получается

сейчас пробую может JS поможет

[Userhtml]

Всем доброго времени суток.

Ребята может кто разбирается как сделать чтобы сайт выглядел так http://s51.radikal.ru/i133/1004/d8/de99c2d2af1a.jpg

Edited April 14, 2010 by Userhtml

[Justnewone]

Либо оформляйте посты как следует, с помощью bbcode code /code, либо дайте ссылку.

А вообще, ковыряние в чужом (это точно ен Ваше), бесконтрольном и бессмысленнооформленном коде - самый высокий тариф.

[Userhtml]

Либо оформляйте посты как следует, с помощью bbcode code /code, либо дайте ссылку.

А вообще, ковыряние в чужом (это точно ен Ваше), бесконтрольном и бессмысленнооформленном коде - самый высокий тариф.

Не разбираюсь я в технологии сайтостроения! Просто логически предположил, что дизайн находится в CSS.

Где находятся bbcode code /code и понятия не имею, но со временем разберусь, и надеюсь без Вашей помощи.

Спасибо что не оставили без внимания.

[stars]

Не разбираюсь я в технологии сайтостроения! Просто логически предположил, что дизайн находится в CSS.

Где находятся bbcode code /code и понятия не имею, но со временем разберусь, и надеюсь без Вашей помощи.

Спасибо что не оставили без внимания.

Логически вы на правильном пути за дизайн в большинстве случает действительно css отвечает, только вот где вы собрались это css искать? Если вы потратите минут 30 драгоценного время на простейшие вступления для чайников вам станет известна страшная тайна что свойства css можно описывать как в отдельном файле css так и в самой странице html...

Только вот вам растянут макет надо а не дизайн лепить, за ширину отвечает не только css.

А вообще судя по скрину это какая то cms в которую предлагается растянуть, ну чтож задача в полне реальная не смотря на отвратительный скрин видно что не каких супер решений для растягивания не требуется... займет это от 5 до 60 минут в зависимости как там накручено css за ширину отвечают атрибуты width и одноименные свойства ксс

[Userhtml]

Логически вы на правильном пути за дизайн в большинстве случает действительно css отвечает, только вот где вы собрались это css искать? Если вы потратите минут 30 драгоценного время на простейшие вступления для чайников вам станет известна страшная тайна что свойства css можно описывать как в отдельном файле css так и в самой странице html...

Только вот вам растянут макет надо а не дизайн лепить, за ширину отвечает не только css.

А вообще судя по скрину это какая то cms в которую предлагается растянуть, ну чтож задача в полне реальная не смотря на отвратительный скрин видно что не каких супер решений для растягивания не требуется... займет это от 5 до 60 минут в зависимости как там накручено css за ширину отвечают атрибуты width и одноименные свойства ксс

Спасибо за советы Не много по манипулировав с width, добился только того что header уходит вправо и не совсем одинаковое расстояние получается слева и справа, ну основная область остаётся на месте.

Если Вас не затруднит ответьте пожалуйста, где именно нужно внести изменения. Спасибо

CSS

/* General Style */

body {background:#F0F0F0; margin:0px; padding:0px;text-align:center;}

#wrap {background:url('/.s/t/848/3.gif') repeat-y;width:750px;margin-left:auto;margin-right:auto;min-width:750px;width: expression(document.body.clientWidth > 750 ? "750" : "750px");text-align:left;}

#header {width:698px;height:98px;border:1px solid #555555;background:url('/.s/t/848/2.gif') repeat-x #889081;//width:700px !important;}

#dataBar {padding:5px;text-align:right;font-size:7pt;color:#C9D5BF;}

#rssBlock {margin:5px;text-align:center;}

h1#logo {float:right;color:#F2FFE5;font-size:20pt;font-weight:normal;padding:0px;margin:20px;display:inline;}

#sidebar {float:left;width:180px;}

#content {float:right;width:560px;display:inline;}

#textBlock {width:478px;overflow:auto;background:#FFFFFF;border:1px solid #CCCCCC;padding:10px;}

.menuTable {padding:5px;}

.catBox {padding:5px;width:440px;border-top:1px solid #CCCCCC;margin-left:50px;margin-top:5px;}

.catContent {padding: 0px 20px;}

.catBox h2, .chatBox h2 {color:#4E8F15;font-size:11pt;padding:5px;margin:0;}

.chatBox {width:480px;margin:10px;}

.boxTable {width:180px;padding:0;margin:5px 0px;text-align:center;}

.boxTable h2 {font-size:9pt;color:#E7EBEA;padding:5px;margin:0px;text-align:center;background:url('/.s/t/848/2.gif') repeat-x #889081;}

.boxContent {margin-left:auto;margin-right:auto;overflow:auto;padding:5px 2px;}

.left {text-align:left;}

#footer {width:698px;padding:10px 0px;text-align:center;border:1px solid #555555;color:#C9D5BF;background:url('/.s/t/848/2.gif') repeat-x #889081;//width:700px !important;}

Вот страницы сайта

<html><head>

<meta content="text/html; charset=UTF-8" http-equiv="content-type">

<title>$SITE_NAME$ - $MODULE_NAME$</title>

<?$META_DESCRIPTION$?>

<link type="text/css" rel="StyleSheet" href="http://best-signal.ucoz.ru/_st/my.css" />

</head><body>

$ADMIN_BAR$

<div id="wrap">

$GLOBAL_AHEADER$

<div id="sidebar">

<!-- <sblock_menu> -->

<?if($SMENU_1$)?>

<div class="menuTable"><!-- <bc> -->$SMENU_1$<br><br><table style="border-collapse: collapse;" align="center" height="93" width="170"><tbody><tr><td><style type="text/css"><!--.ff_7959_box {width: 150px;height: 250px;border: 1px solid #E7EBEA;background: #E7EBEA;}.ff_7959_head {font-weight: bold;text-align: center;margin: 4px 8px;}--></style><div id="ff-7959-box" class="ff_7959_box"><p class="ff_7959_head"><a href="http://www.finforce.ru"><br></a></p></div><script type="text/javascript" src="http://www.finforce.ru/export.new/position.php?rand=7959&height=250&curpair=YTo5OntpOjA7czo2OiJVU0RDSEYiO2k6MTtzOjY6IkVVUlVTRCI7aToyO3M6NjoiVVNE

SlBZIjtpOjM7czo2OiJHQlBVU0QiO2k6NDtzOjY6IkdCUEpQWSI7aTo1O3M6NjoiRVVSSlBZIjtpOjY7c

zo2OiJFVVJHQlAiO2k6NztzOjY6IkFVRFVTRCI7aTo4O3M6NjoiVVNEQ0FEIjt9&color=YTo4OntzOjg6ImJveF9iYWNrIjtzOjc6IiNFN0VCRUEiO3M6ODoiYm94X2JvcmQiO3M6Nz

oiI0U3RUJFQSI7czo5OiJheGlzX3RpY2siO3M6NzoiIzAwMDAwMCI7czoxMjoiaW5kX2JhY2tfYnV5Ijt

zOjc6IiM2QTVBQ0QiO3M6MTI6ImluZF9ib3JkX2J1eSI7czo3OiIjMDAwMDgwIjtzOjEzOiJpbmRfYmFj

a19zZWxsIjtzOjc6IiNGRjAwMDAiO3M6MTM6ImluZF9ib3JkX3NlbGwiO3M6NzoiIzhCMDAwMCI7czo0O

iJ0ZXh0IjtzOjc6IiMwMDAwMDAiO30="></script><br></td></tr></tbody></table><br></div>

<?endif?>

<!-- </sblock_menu> -->

<!--IF--><div id="rssBlock">$GLOBAL_CLEFTER$

</div></div>

<div id="content">

<?if($MODULE_NAME$)?><h1>$MODULE_NAME$</h1><?endif?>

<div id="textBlock">

<!-- <middle> -->

<!-- <body> -->$CONTENT$<!-- </body> -->

<!-- </middle> -->

</div>

</div>

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

$GLOBAL_BFOOTER$

</div>

</body></html>

[stars]

Ну так все ж очевидно, если изменять вы намерены ширину то изменяем тут:

1) #wrap

2) #sidebar

3) <table style="border-collapse: collapse;" align="center" height="93" width="170">

4) <!--.ff_7959_box {width: 150px

5) #ff-7959-box .ff_7959_box

6) #content

7) #textBlock

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

Edited April 15, 2010 by stars