Фон дива

Jekil · July 25, 2011

В общем я только начинаю учится всему этому, так что чур камни шибко не пинать. Пока делаю простенький сайтик.

Значит так на странице у меня один главный блок <div id = "container">(рабочее поле сайта) внутри которого есть <div id = "header">(собсна шапка), <div id = "text">(с основным содержимым сайта, т.е. всякие новости, статьи и тд.), <div id="news"> и <div id="footer">.

<div id="news"> расположен справа от <div id = "text"> и он представлен в виде не широкой колонки в которой будут выводится ну предположим краткие новости эта колонка имеет свой фон(ввиде картинки, точнее маленький полупрозрачный одноцветный прямоугольник).

Сам вопрос как можно сделать чтоб он тянулся до низу, а не поджимался к тексту(как на картинке)? Думал repeat-y и height 100% решают а не помогает.

Буду благодарен за любые подсказки!

Прилагаю код хтмл:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang = "ru" xml:lang = "ru">
	<head>
		<meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251" />
		<meta name = "description" content = "...бла...бла..." />
		<meta name = "keywords" content = "...бла...бла..." />
		<link rel = "stylesheet" href="style.css" type = "text/css" />
		<title>...бла...бла...</title>
	</head>
	<body>
	<div id = "container">
			<div id = "header">
			</div>
		<div id = "nav">
			<ul>
				<li>Главная</li>
				<li><a href="#">...бла...бла...</a></li>
				<li><a href="#">...бла...бла...</a></li>
				<li><a href="#">...бла...бла.../a></li>
				<li><a href="#">...бла...бла...</a></li>
			</ul>
		</div>
		<div id = "text">
		<img class = "img1" src="image/mel.jpg" alt="...бла...бла..." />
			<h2>...бла...бла...</h2>
			<p>...бла...бла...</p>
			<p>...бла...бла...</p>
			<img class="venzel" src="image/venzel2.png" alt="...бла...бла..." />
			<img class="img2" src="image/image5.jpeg" alt="...бла...бла..." />
			<div id="members">
				<h2>...бла...бла...:</h2>
					<ol>
						<li><a href="#">...бла...бла...</a></li>
						<li><a href="#">...бла...бла...</a></li>
						<li><a href="#">...бла...бла...</a></li>
						<li><a href="#">...бла...бла...</a></li>
						<li><a href="#">...бла...бла...</a></li>
						<li><a href="#">...бла...бла...</a></li>
					</ol>
					<ol>
						<li value="7"><a href="#">...бла...бла...</a></li>
						<li><a href="#">...бла...бла...</a></li>
						<li><a href="#">...бла...бла...</a></li>
						<li><a href="#">...бла...бла...</a></li>
						<li><a href="#">...бла...бла...</a></li>
						<li><a href="#">...бла...бла...</a></li>
					</ol>
			</div>
			<img class="line" src="image/line.png" alt="" />
		</div>
		<div id="news">
		<h3>...бла...бла...:</h3>
			<ul>
				<li>...бла...бла...</li>
				<li>...бла...бла...</li>
				<li>...бла...бла...</li>
			</ul>
		</div>
		<div class="clearfloat"></div>
		<div id="footer">
<p>Главная | <a href="#">О нас</a> | <a href="#">...бла...бла...</a> | <a href="#">О ...бла...бла...</a> | <a href="#">...бла...бла...</a> | <a href="#">...бла...бла...</a></p>
<p>© MYSITE.RU, 2011 | All right reserved.  </p>
</div>
	</div>
	</body>
</html>

И CSS

*{
margin: 0;
padding: 0;
border: 0;
}
body {
padding: 2% 0 0;
background-color: #ccc; 
background-image: url("image/bg.jpg");
background-attachment: fixed;
color: #333;
font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
}
#container {
width: 940px;
margin: 0 auto;
border: 1px solid #999;
}
#header {
background: url("image/logo.jpg") no-repeat;
width: 940px;
height: 198px;
}
#nav {
background: url("image/nav-bg.gif") repeat-x right;
width: 940px;
color: #f00;
font-size: 120%;
font-weight: bold;
line-height: 1.8em;
text-align: center;
}
#nav ul {
list-style-type: none;
}
#nav li {
display: inline;
margin: 0 8px;
}
#nav li a {
color: #0c0;
}
#nav li a:hover {
color: #f00;
}
a {
text-decoration: none;
}
#text {
background: url("image/fon2.png"); 
width: 755px;
font-size: .8em;
font-weight: bold;
border: 3px;
color: #333;
margin: 0px auto;
float: left;
}
#text h2 {
color: #f60;
font-size: 120%;
font-weight: bold;
text-align: center;
}
#text p {
text-align: justify;
text-indent: 1.5em;
margin: 0;
padding: 0 15px;
}
#text a {
color: #396;
}
#text a:hover {
color: #f36;
border-bottom: #f36 dotted 1px;
}
.img1 {
width: 208px;
height: 293px;
margin: 5px 5px 0 15px;
float: right;
}
.img2 {
width: 400px;
height: 300px;
margin: 5px 177px 0px 177px;
float: none;
}
.venzel {
width: 200px;
height: 80px;
margin: 0px 277px 0 277px;
float: left;
}
#members {
width: 400px;
height: 190px;
float: left;
margin: 5px 0px 0px 177px;
}
#members h2 {
color: #f60;
font-size: 120%;
font-weight: bold;
text-align: center;
}
#members ol {
color: #999;
font-size: 120%;
margin: 10px 0px 0px 65px;
float: left;
}
#members li {
margin: 0 5px;
}
#members li a {
color: #0c0;
}
#members li a:hover {
color: #f00;
}
.line {
width: 198px;
height: 198px;
float: none;
margin: -80px 278px 0 278px;
}
#news {
background: url("image/fon_news.png");
background-repeat: repeat-y;
width: 185px;
height: 100%;
color: #665;
margin: 0 0px;
float: right;
}
#news h3 {
color: #f60;
font-size: 120%;
font-weight: bold;
text-align: center;
}
#news ul {
 list-style: url(image/marker.png) inside;
 }
#news li {
 font-size: 75%;
 padding: 5px 10px;
 }

 #footer {
background : #4d4d4d;
color : #fff;
font-size : 70%;
padding : 5px;
clear : both;
}
#footer a {
color : #ff0;
}
#footer a:hover {
color : #f00;
}
#footer p {
padding : 2px;
text-align : center;
}
.clearfloat {
clear : both;
}

Edited July 25, 2011 by Jekil

kidrock · July 26, 2011

Ваша проблема заключается не в фоне, а блоке, который не хочет тянуться за соседним блоком. Почитайте эту тему там есть ответы на Ваш вопрос.

Jekil · July 26, 2011

Ваша проблема заключается не в фоне, а блоке, который не хочет тянуться за соседним блоком. Почитайте эту тему там есть ответы на Ваш вопрос.

Поглядел тему, ответа на свой вопрос не нашел, там фактически обсуждается только как прижать футер к низу(хотя дело тоже нужное=)). Вопросы там на подобие моего задавались, но ответ так на него дан не был. Хотя возможно не внимательно смотрел. Спасибо за ссылку, после работы гляну подробней!

buddah · July 26, 2011

Если центральная колонка планируется быть всегда самой высокой, то достаточно указать ей min-height: x; Где х - нужная высота блока. Тогда пока содержмое колонки не будет переваливать по высоте за х - колонка всегда будет этой высоты. Как только содержимое будет выше х - колонка будет растягиваться и толкать остальные блоки в потоке.

kidrock · July 26, 2011

Jekil, Вот некоторые очень интересные решения.

http://chikuyonok.ru/2009/06/float-columns/

http://www.getincss.ru/2009/07/11/4-sposoba-kak-sozdat-bloki-kolonki-odinakovoj-vysoty/

http://dimox.name/3-column-css-layout-right-sidebars/

Jekil · July 26, 2011

Jekil, Вот некоторые очень интересные решения.
http://chikuyonok.ru.../float-columns/
http://www.getincss....nakovoj-vysoty/
http://dimox.name/3-...right-sidebars/

То что нада думается. Правда пока ничего так и не смог реализовать +) Но это скорей из-за плохого знание предмета, бум учится. Спасибо, интересные ссылки =)

Sign In

Фон дива

Question

Jekil

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

kidrock

Link to comment

Share on other sites

Jekil

Link to comment

Share on other sites

buddah

Link to comment

Share on other sites

kidrock

Link to comment

Share on other sites

Jekil

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information