Mój problem idealnie obrazuje zmieszczony poniżej screen ;/

Proszę o jakiś przykład jak to rozwiązać, albo proszę o jakieś naprowadzenie jak mam ten mój problem rozwiązać.

OBRAZEK:


Kod CSS:

[HTML] pobierz, plaintext 
@charset "utf-8";
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
	background-color: #FFFFFF;
}
#outter {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
	background-color:#FFFFFF;
}
#content_wrapper {
	text-align: left;
	width: 980px;
	margin-right: auto;
	margin-left: auto;
}
#gora {
	height:320px;
}
#foto {
	height:300px;
	background-image: url(images/top.jpg);
	background-repeat: no-repeat;
}
#banner {
	height:20px;
	background-image: url(images/banner.jpg);
	margin-bottom: 10px;
}
#left {
	position:relative;
	height: 100px;
	width: 200px;
	float: left;
	overflow: hidden;
	background-color:#999;
}
#right {
	position:relative;
	height: 100px;
	width: 200px;
	float: right;
	overflow: hidden;
	background-color:#999;
}
#srodek {
	width: 980px;
	background-color:#CCC;
}
#dol {
	height: 100px;
	width: 980px;
	background-image: url(images/stopka.jpg);
	background-repeat:repeat-x;
	clear: both;
}
#center {
	position: relative;
	width: 560px;
	height: inherit;
	float:left;
	padding: 10px 10px 10px 10px;
}
#center_tekst {
	position: absolute;
	width: 540px;
	height: inherit;
	padding: 10px;
	z-index:1;
}
#center_tlo {
	width: 560px;
	height: inherit;
	overflow:auto;
}
#center_tlo_gora {
	height: 212px;
	width: 560px;
	z-index: 0;
}
#center_tlo_g_l {
	height: 212px;
	width: 9px;
	background-image: url(images/g_l.jpg);
	background-repeat: no-repeat;
	float:left;
}
#center_tlo_g_s {
	height: 212px;
	width: 542px;
	background-image: url(images/g_s.jpg);
	background-repeat: repeat-x;
	float:left;
}
#center_tlo_g_p {
	height: 212px;
	width: 9px;
	background-image: url(images/g_p.jpg);
	background-repeat: no-repeat;
	float:right;
}
#center_tlo_srodek {
	width: 560px;
	background-image: url(images/s_s.jpg);
	background-repeat: repeat-y;
	z-index: 0;
}
#center_tlo_dol {
	height: 192px;
	width: 560px;
	z-index: 0;
}
#center_tlo_d_l {
	height: 192px;
	width: 10px;
	background-image: url(images/d_l.jpg);
	background-repeat: no-repeat;
	float: left;
}
#center_tlo_d_s {
	height: 192px;
	width: 541px;
	background-image: url(images/d_s.jpg);
	background-repeat: repeat-x;
	float: left;
}
#center_tlo_d_p {
	height: 192px;
	width: 9px;
	background-image: url(images/d_p.jpg);
	background-repeat: no-repeat;
	float:right;
}
#dod {
	clear:both;
	height:auto;
}
[HTML] pobierz, plaintext 

Tam gdzie masz treść strony (nie wiem jak nazywasz tego div) overflow: hidden.

... + ewentualnie cos w stylu

[HTML] pobierz, plaintext 
<div style="clear: both;"></div>
[HTML] pobierz, plaintext 

miedzy koncem tekstu i ramki

Dolnej, czerwonej belki nie wstawiaj jako tło tylko jako osobny element na samym dole strony, wtedy będzie się przesuwał.

Dobra moze inaczej... chodzi o to ze div center sklad sie z 2 divow

div center_tekst (z-index:2, position: absolute;)
div center_tlo (z-index:1, position: relative;)

div center_tlo sklada sie z
center_tlo_gora (ktory sklada sie z 3 czesci, lewa, srodek, prawa) - div ten ma ustalona stala wysokosc
center_tlo_srodek (sklada sie z 1) - div ten powinien przeciagac sie po Y
center_tlo_dol (ktory sklada sie z 3 czesci, lewa, srodek, prawa) - div ten ma ustalona stala wysokosc

i teraz z zalozenia w miare ilosci tekstu powinien rozciagac sie div center_tlo (czyli center_tlo_srodek, bo reszta ma ustalona wyskosc)

niestety to nie dziala:)

Prosimy z Tejkiem o jakis pomysl na rozwiazanie tego

Może ustawcie wysokość center_tlo_srodek na 100%? Poza tym przydałoby się, żebyście wrzucili gdzieś to dzieło - ciężko mi się dzisiaj myśli abstrakcyjnie .

@down: Błąd 403

http://mbpartner.xt.pl/index2.html

adres poprawiony

Tutaj to chyba tylko javascript, który będzie odczytywał wysokość div'a center_tekst i zmieniał wysokość center_tlo.

no to jest kolejny problem bo z JS to ja leze... (dopiero poczatek przygody z tworzeniem stron) takze prosil bym kogos o pomoc przy stworzeniu skryptu

A nie możecie tego po prostu inaczej skroić?

chodzi o to ze w tym boksie znajduje sie gradient zarowno u gory i na dole i fajnie by bylo jakby byl taki jaki jest.

no chyba ze zaproponujesz jak to skroic zeby bylo dobrze. zawsze poslucham dobrej rady bo dopiero sie ucze

najpierw górny gradient, poźniej środkowy, który będzie się powtarzał i na koniec dolny.

Podziel sobie grafikę pod lorem ipsum na 3 części: top, środek i stopka. Stwórz diva, do którego wrzucisz 3 inne divy: top, srodek i stopka. Top i stopka powinny mieć określone wysokości i szerokosci oraz konkretny JPG w tle. Środek zaś powinien mieć określoną jedynie szerokość, a w tle obrazek o wysokości jednego piksela i określonej szerokości (z włączonym powtarzaniem w pionie). To właśnie w środek wsadzasz cały lorem ipsum. Schemat powinien wyglądać mniej więcej tak:

<div główny>
<div top></div>
<div srodek>lorem ipsum</div>
<div stopka></div>
</div>

Oczywiście możesz to rozwiazać inaczej.

ehh chlopaki chyba troche sie nie rozumiemy

grafika jest podzielona na 7 czesci

div_center_tlo a w nim
div_center_tlo_gora(3 czesci grafiki, L, S, P)
div_center_tlo_srodek(1 czesc o wys 1 px ktora ma sie przeciagac po Y)
div_center_tlo_dol (3 czesci grafiki, L, S, P)

a najlepiej jak wstawie kod:
http://mbpartner.xt.pl/kod.jpg

A po co na 7?

gorna czesc (gorny gradient):
lewe zaokraglenie
srodek przeciagany po X
prawe zaokraglenie

srodek (wypelnienie):
o wysokosc 1px przeciagany po Y

dolna czesc(dolny gradient):
lewe zaokraglenie
srodek przeciagany po X
prawe zaokraglenie

stad 7 czesci

Tylko po co skoro można wszystko załatwić tym CSS:

[HTML] pobierz, plaintext 
<style type="text/css">
    #kontener { width:560px;  }
    #top { width:560px; height:23px; background-image:url(images/top.jpg);  }
    #srodek { width:560px; background-image:url(images/srodek.jpg); background-repeat:repeat-y; padding: 5px; }
    #stopka { width:560px; height:23px; background-image:url(images/stopka.jpg); }
</style>
[HTML] pobierz, plaintext 

i tym html:

[HTML] pobierz, plaintext 
<div id="kontener">
    <div id="top"></div>
    <div id="srodek"> lorem ipsum</div>
    <div id="stopka"></div>
</div>
[HTML] pobierz, plaintext 

A do tego stopka + top + środek

W ten sposób wszystko się ładnie rozciąga.

problem w tym ze gradienty maja wysokosc zarowno gorny jak i dolny okolo 200px a nie 23px.. a zalezy mi aby tekst byl pisany od gory a nie zaczynal sie dopiero po 200px

Po wielu próbach stwierdzam, że Blame ma jednak racje i jedynie JavaScript może rozwiązać mój problem. Oto mój kod jaki JS tylko coś nie działa, a wydaje mi się że jest dobrze napisany:

KOD JS:

[HTML] pobierz, plaintext 
<script type="text/javascript">
      function hResize () 
	  {
      var hPobierz = document.getElementById('center_tekst').style.height; <!-- pobranie wysokości okna przeglądarki -->
      var hPrzypisz = document.getElementById('center_tlo_srodek'); <!-- pobranie diva z elastyczną wysokością -->
      var hWynik = hPobierz + 4; <!-- minus wysokości elementów (divów) o stałym rozmiarze -->
      hPrzypisz.style.height = hWynik + 'px'; <!-- nadanie właściwej wyskości -->
      }
 </script>
[HTML] pobierz, plaintext 

Dlatego jeśli ktoś mógłby sprawdzić ten kod albo podrzucić jakiś przykład obrazujący działanie czegoś podobnego byłbym wdzięczny

pomoze ktos?

Jeden div z powtarzającym się tłem (tzw środek), a w nim ten drugi z górnym tłem, tylko te górne bez repeatu... czyli jak za nie wyjedzie to już będzie to środkowe