S-a-s-h-a писал(а):
У меня вопрос:
Делаю простенький сайт. На фон сайта надо впихнуть фотку... Как сделать чтобы фотка растягивалась под монитор, а не начинала повторяться О_о не знаю правильно ли сформулировал мысль...
Вот те инфа с какого-то сайта.
css
Код:
/* Задание стилей всего шаблона */
body {
font: 80% Arial;
text-align:center;
}
/* Задание стилей новой строки */
p {margin:0 10px 10px;}
/* Задание стилей ссылок */
a {
padding:5px;
text-decoration:none;
color:#0053a1;
}
/* Задание стилей ссылок при наведении */
a:hover {
text-decoration:underline;
color:#067a00;
}
/* Задание стилей блока заголовка */
div#header {
background-color:#005387;
color:#fff;
height:80px;
line-height:80px;
padding-left:20px;
}
/* Задание стилей всего шаблона */
div#all {
text-align:left;
width:750px;
margin:0 auto;
}
/* Задание стилей навигации */
div#navigation {
background:#e3f4ff;
float:left;
width:150px;
margin-left:-750px;
}
/* Задание стилей списка */
div#navigation ul {
margin:15px 0;
padding:0;
list-style-type:none;
}
/* Задание стилей элемента списка */
div#navigation li{margin-bottom:5px;}
/* Задание стилей правого столбца */
div#extra {
background:#c1e7ff;
float:left;
width:150px;
margin-left:-150px;
}
/* Задание стилей "подвала" */
div#footer {
background-color:#013657;
color:#fff;
clear:left;
height:25px;
}
div#footer p {
margin:0;
padding:5px 10px;
}
/* Задание стилей всего шаблона */
div#templ {
float:left;
width:100%;
}
/* Задание стилей центрального столбца */
div#content {margin: 0 150px;}
html
Код:
<div id="all">
<div id="header"><h1>Учебный шаблон №1</h1></div>
<div id="templ">
<div id="content">
<p><strong>Основное содержание</strong></p>
<p>Какой-то текст</p>
</div>
</div>
<div id="navigation">
<p><strong>Навигация</strong></p>
<ul>
<li>→ [url=http://www.css-school.ru/]</li>
<li>→ <a href="#">Ссылка 1[/url]</li>
<li>→ [url=#">Ссылка 2</a></li>
<li>→ <a href=]Ссылка 3[/url]</li>
<li>→ [url=#">Ссылка 4</a></li>
<li>→ <a href=]Ссылка 5[/url]</li>
</ul>
</div>
<div id="extra">
<p><strong>Дополнительно</strong></p>
<p>Различные полезные блоки, реклама и т.д.</p>
</div>
<div id="footer">
<p>© Copyright</p>
</div>
</div>
Для начала выкинем подвал сайта из общего блока "all" в противном случае могут всплыть баги в FF
CSS
Код:
div#footer {
background-color: #013657;
color: #fff;
clear: left;
height: 25px;
text-align: left; /* добавлено от блока "all" */
width: 750px; /* добавлено от блока "all" */
margin: 0 auto; /* добавлено от блока "all" */
}
HTML
Код:
</div>
</div>
<div id="footer">
<p>© Copyright</p>
</div>
Далее добавляем для двух блоков navigation и extra следующие свойства: margin-bottom: -1000em; - оттягивает блок вниз padding-bottom: 1000em; - не позволяет блоку провалиться при заполнением контента.
CSS
Код:
div#navigation {
background:#e3f4ff;
float:left;
width:150px;
margin-left:-750px;
margin-bottom: -1000em;
padding-bottom: 1000em;
}
div#extra {
background:#c1e7ff;
float:left;
width:150px;
margin-left:-150px;
margin-bottom: -1000em;
padding-bottom: 1000em;
}
У нас получается растянуть блоки на произвольную цифру 1000em можете указать и 5000em и 1000000px - это уже личное. Но у нас возникает проблема, что окно браузера растянулось. Для этого просто нашему блоку "all" пишем свойство overflow: hidden; - оно позволяет скрыть все лишнее.
CSS
Код:
div#all {
text-align:left;
width:750px;
margin:0 auto;
overflow: hidden;
}
Проблема решена, хоть и настолько радикальным способом. Приятного юзанья кода!
