Репитнуть элемент

epog333 · March 21, 2011

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

В CSS:

#bkbg {
    background-image: url('img/bkbg.png');
    background-repeat: repeat-y;
    width: 254px;
    height: 100%;
}

В HTML:

<div id="bkbg"></div>

Как делать подскажите!

hf3 · March 21, 2011

Сам див или фоновый рисунок в нем?

epog333 · March 21, 2011

Сам див или фоновый рисунок в нем?

Фоновой рисунок в нём

Ну мне всмысле надо, что бы фоновой рисунок в нём продолжался до конца страницы... по вертикали

PanSoul · March 21, 2011

#bkbg {

background:url('img/bkbg.png') repeat-y;

width: 254px;

height: 100%;

}

Попробуй так

Edited March 21, 2011 by PanSoul

epog333 · March 21, 2011

#bkbg {
background:url('img/bkbg.png') repeat-y;
width: 254px;
height: 100%;
}
Попробуй так

не получается

rus · March 21, 2011

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

ссылку кидайте на страницу, тогда процесс пойдет побыстрее.

epog333 · March 22, 2011

высоту див в любом случае будет брать от родителя, а что у вас там прописано, одному богу известно.
ссылку кидайте на страницу, тогда процесс пойдет побыстрее.

У меня на локальном.

Вот весь html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body>

<div id="wrapper">

	<div id="header">
    <div id="logo">Site Name</div>
    </div><!-- #header-->

	<div id="middle">

		<div id="container">
			<div id="content">
             <div id="title">Название</div>
             <div id="message">


Войска международной коалиции нанесли новые удары по Триполи. В командовании заявляют, что целью атаки были объекты ПВО. Между тем ливийские официальные СМИ сообщают, что пострадали гражданские объекты. Погибли более 60 человек. Накануне Ливия потребовала немедленного созыва Совета безопасности ООН для обсуждения западной агрессии. Согласно заявлению Каддафи, Ливия считает себя вправе использовать для самообороны свою военную авиацию.

Вторая ночь операции "Одиссея" принесла новые удары с воздуха и впервые - по городским объектам в Триполи. Хотя в Пентагоне отчетливо заявили, что резиденция Каддафи не находится в списке целей, одна из ракет поразила здание в пределах дворцового комплекса полковника. Утверждается, что это был военный объект.

Ливийские зенитки, которые всю ночь обстреливали небо над столицей, не смогли помешать планам коалиции. Сообщения о клубах дыма, поднимающихся в районе жилища полковника Каддафи, подтвердились, когда журналистов, аккредитованных в Триполи, разбудили перед рассветом и отвезли на место авиаудара.

"Это административное здание, в котором работали люди, - сообщил представитель ливийских властей Ибрагим Муса. - Его уничтожили два часа назад. Как вы видите сами и можете запечатлеть на камеры, гражданские семьи, женщины и дети на
            </div>

            <div id="title">Название</div>
             <div id="message">


Войска международной коалиции нанесли новые удары по Триполи. В командовании заявляют, что целью атаки были объекты ПВО. Между тем ливийские официальные СМИ сообщают, что пострадали гражданские объекты. Погибли более 60 человек. Накануне Ливия потребовала немедленного созыва Совета безопасности ООН для обсуждения западной агрессии. Согласно заявлению Каддафи, Ливия считает себя вправе использовать для самообороны свою военную авиацию.

Вторая ночь операции "Одиссея" принесла новые удары с воздуха и впервые - по городским объектам в Триполи. Хотя в Пентагоне отчетливо заявили, что резиденция Каддафи не находится в списке целей, одна из ракет поразила здание в пределах дворцового комплекса полковника. Утверждается, что это был военный объект.

Ливийские зенитки, которые всю ночь обстреливали небо над столицей, не смогли помешать планам коалиции. Сообщения о клубах дыма, поднимающихся в районе жилища полковника Каддафи, подтвердились, когда журналистов, аккредитованных в Триполи, разбудили перед рассветом и отвезли на место авиаудара.

"Это административное здание, в котором работали люди, - сообщил представитель ливийских властей Ибрагим Муса. - Его уничтожили два часа назад. Как вы видите сами и можете запечатлеть на камеры, гражданские семьи, женщины и дети на
            </div>


            </div><!-- #content-->
		</div><!-- #container-->

		<div class="sidebar" id="sideLeft">
<div id="block_1">Название</div>
<div id="block_content_1">Контент блока</div>
<div id="block_1">Название</div>
<div id="block_content_1">Контент блока</div>
<div id="block_1">Название</div>
<div id="block_content_1">Контент блока</div>
<div id="bkbg"></div>
</div><!-- .sidebar#sideLeft -->

		<div class="sidebar" id="sideRight">
 <div id="block_2">Название</div>
 <div id="block_content_2">Контент блока</div>
  <div id="block_2">Название</div>
 <div id="block_content_2">Контент блока</div>
  <div id="block_2">Название</div>
 <div id="block_content_2">Контент блока</div>
		</div><!-- .sidebar#sideRight -->

	</div><!-- #middle-->

</div><!-- #wrapper -->

</body>
</html>

Вот весь CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	width: 100%;
    background-image: url('img/bg_s.png');
    background-repeat: repeat-x;
}
a {
	color: blue;
	outline: none;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
p {
	margin: 0 0 18px
}
img {
	border: none;
}
input {
	vertical-align: middle;
}
#wrapper {
	width: 1200px;
	margin: 0 auto;
    border-left: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
}


/* Header
—————————————————————————--*/
#header {
	height: 23px;
	background-image: url('img/header.png');
    padding: 30px;
    font-size: 25px;
    font-weight: bold;
}


/* Middle
—————————————————————————--*/
#middle {
	width: 100%;
	height: 1%;
	position: relative;

}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;

}


#container {
	width: 100%;
	float: left;
	overflow: hidden;



}

#bkbg {
background:url('img/bkbg.png') repeat-y;
width: 254px;
height: 100%;
}


#logo {

    color: white;

}

#title {
    background-image: url('img/title_bg.png');
    height: 23px;
    background-repeat: repeat-x;
    padding: 7px;
    color: white;
    font-size: 12px;
    font-family: Verdana;
    text-shadow: 1px 1px 0px black;
    width: 678px;
}

#message {padding: 10px;

width: 672px;


}


#content {
    width: 682px;
    padding: 0px 254px 10px 254px;


}

#block_content_1 {
    background-color: white;
    background-image: url('img/block_content_1.png');
    background-repeat: no-repeat;
    padding: 10px;
    font-family: Verdana;
    font-size: 11px;
}

#block_content_2 {
    background-color: white;
    background-image: url('img/block_content_2.png');
    background-repeat: no-repeat;
    padding: 10px;
    font-family: Verdana;
    font-size: 11px;
}


#block_1 {
    width: 254px;
    background-repeat: no-repeat;
    text-align:center;
    height:25px;
    background-image: url('img/block_1.png');
    padding-top: 5px;
    font-family: Verdana;
    color: white;
    text-shadow: 1px 1px 0px black;

    }

#block_2 {
    width: 254px;
    background-repeat: no-repeat;
    text-align:center;
    height:25px;
    background-image: url('img/block_2.png');
    padding-top: 5px;
    font-family: Verdana;
    color: white;
    text-shadow: 1px 1px 0px black;

    }


/* Sidebar Left
—————————————————————————--*/
#sideLeft {
	float: left;
	width: 254px;
	margin-left: -100%;
	position: relative;
	background: #B5E3FF;
}


/* Sidebar Right
—————————————————————————--*/
#sideRight {
	float: left;
	margin-right: -3px;
	width: 254px;
	margin-left: -254px;
	position: relative;
	background: #FFACAA;
}

tius · March 22, 2011

Изменить у #middle {height: 100%;}

Добавить к #sideLeft {height: 100%;}

PanSoul · March 22, 2011

мда, ужасная структура... Советую сверстать занаво...

epog333 · March 22, 2011

мда, ужасная структура... Советую сверстать занаво...

Я только учусь

PanSoul · March 23, 2011

Я только учусь

Ну вот, тогда учись верстать правильно)

psywalker · March 23, 2011

Лови дружище. Это тебе жирный намёк на правильное решение

http://psywalker.ru/Forum/Footer_bottom/main.html

epog333 · March 23, 2011

Лови дружище. Это тебе жирный намёк на правильное решение
http://psywalker.ru/Forum/Footer_bottom/main.html

Всмысле? Хотите сказать, что мне нужно готовую вёрстку брать? я с csstemplater.com генерировал эту...

psywalker · March 23, 2011

Всмысле? Хотите сказать, что мне нужно готовую вёрстку брать? я с csstemplater.com генерировал эту...

Зачем готовую? Я тебе привёл пример, где контейнер растянут по высоте и которому можно задать фоновую картинку смело по оси Y.

Sign In

Репитнуть элемент

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information