[CSS]Rozciągnięcie tła Opcje

[blejdas]

Żeby zobrazować temat Mam taki oto układ strony:




Czarne to tło które chce rozciągnąć Czerwone stopka, na białe to tło zdefiniowane jako BODY w css. Więc czarne jest NA nim Teraz kiedy na białym wpiszę tekst, to jak zmusić czarne tło do rozciągnięcia się?

Bałe to wstazka obrazek tła czarnego to page_bg. kiedy wrzucam tam

[HTML] pobierz, plaintext 
<br>
[HTML] pobierz, plaintext 

tło się zrozciąga. Jak to zrobic by działo się to automatycznie?

CSS:

[HTML] pobierz, plaintext 
body {
	background-image:url(../images/bg.jpg);
	background-color: #000;
	margin: 0px;
}
a.thickbox:link, a.thickbox:visited {
  color: #fff;
  text-decoration: none;
}
a.thickbox:hover {
	color: #fff;
	text-decoration: underline;
}
a.white:link, a.white:visited {
  color: #fff;
  text-decoration: none;
}
a.white:hover {
	color: #fff;
	text-decoration: underline;
}
div {
	font-family: tahoma;
	font-size: 12px;
	color: #fff;
}
.zloty {
	color: #f4d061;
}
.zielony {
	color: #aee000;
}
.czerwony {
	color: #ff2d2d;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
.niebieski {
	color: #00a0d5;
}
#przerwa {
	padding-left: 30px;
}
#przerwa2 {
	padding-left: 30px;
}
#logo {
	background-image: url(../images/logo.jpg);
	width: 501px;
	height: 153px;
	display: block;
	padding: 15px;
}
#menu_dzisiaj {
	background-image: url(../images/menu_dzisiaj.jpg);
	padding-left: 40px;
	width: 491px;
	height: 214px;
}
#page_bg {
	background-image: url(../images/page_bg.jpg);
	background-repeat: repeat-y;
	width: 531px;
	float: left;
}
ol 
{
        list-style-type: 1;
        padding-left: 15px;
}
ol li span { 
        float: left;
		width: 400px;
}
ol li span.span2 { 
        float: left;
		width: 365px;
}
#wstazka {
	padding-top: 80px;
	padding-left: 25px;
}
#menu {
	float: left;
	clear: both;
}
#menu_reszta {
	background-image:url(../images/menu.png);
	width: 164px;
	height: 46px;
	position: absolute;
	clear: both;
}
p {
	height: 0px;
	line-height: 0px;
}
#terminarz {
background: rgba(0, 0, 0, 0.6);
border-color: #f4d061;
border:1px dashed;
padding-left: 10px;
padding-top: 10px;
}
#top_bg {
padding-top: 15px;
text-align: center;
}
#stopka {
	background-image:url(../images/stopka.jpg);
	width: 461px;
	height: 66px;
	padding-left: 70px;
	padding-top: 27px;
}
.tekst {
	background-image:url(../images/tekst.png);	
	width: 120px;
	height: 17px;
	padding-left: 3px;
	padding-right: 3px;
	font-family: tahoma;
	font-size: 9px;
	color: #fff;
	border: 0px;
}
.zapisz {
	background-image:url(../images/zapisz.jpg);	
	width: 60px;
	height: 19px;
	padding-left: 3px;
	padding-right: 3px;
	padding-bottom: 2px;
	font-family: tahoma;
	font-size: 9px;
	color: #fff;
	border: 0px;
}
.g-plusone {
	color: #fff;
}
#backtotop {
	position: fixed;
	right: 0px;
	bottom: 0px;
}
[HTML] pobierz, plaintext 

DIVy:

[HTML] pobierz, plaintext 
<div style="float: left;">
		<a id="logo">	
		</a>
		<div id="menu_dzisiaj" style="text-shadow: #000 1px 1px 1px;">
		<span class="czerwony">              !!PROMOCJA!!</span><br>
    	<br/>
    	<div style="padding-left: 10px;">
    		<?php 
while ($promo = mysql_fetch_row($wynikp)) 
 {
  echo "$promo[0]";
 }
?>   
</div>
    </div>
 
	<div id="stopka">
	Tekst Stopki
	</div>
	<div id="page_bg"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		</div>
		</div>
	</div>
	<div id="wstazka">
			<?php 
while ($danied = mysql_fetch_row($wynikd)) 
 {
  echo "$danied[0]";
 }
?>
</div> 
	</div> 
[HTML] pobierz, plaintext 

Ten post edytował blejdas 9.04.2012, 09:55:25

[!*!]

Przecież rozciąga się automatycznie. http://jsfiddle.net/wgsjY/ wrzuć to swoje też do tego serwisu i pokaż.

Możesz dać overflow:auto dla elementu rozciąganego, lub br z clear:both;

Ten post edytował !*! 9.04.2012, 10:02:32

[blejdas]

Chyba mnie nie do konca zrozumiałeś Czarne ma się rozciągać razem z białym, a teraz gdy tekst jest na tyle długi że nie mieści się w stronie, to czarne się nie rozciąga, a tekst zamiast trzymać się prawej strony, pojawia się POD lewą(czarną) stroną.

Jeżeli na białym tekst robi się dlugi, to czarne tło rozciaga się razem z nim żeby nie pozwolić na przeskoczenie tekstu na dół.

Tak sie robi...


proboje zrobic tak



Ten post edytował blejdas 10.04.2012, 13:41:13