[html][css]Wudłużanie się diva, bark przedłużenia bocznych..

0

divów.

Witam :-)

Trafiłem na coś, w moim mniemaniu, paskudnego. Utworzony jest div zawierający w sobie sześć innych. Pięć z nich używam do zrobienia obramowania- czyli narożniki górne, lewa/prawa granica, część górna. Dolne części są pominięte. Fragment css:

div#content{
	float: left;
	clear: right;
	width: 663px;
	height: auto;
	background-color: white;
}
	div#content_tl{
		float: left;
		width: 20px;
		background-image: url("grafika/n-tl.jpg");
	}
	div#content_tt{
		float: left;
		width: 603px;
		background-image: url("grafika/n-tt.jpg");
		background-repeat: repeat-x;
	}
	div#content_tr{
		float: right;
		width: 40px;
		background-image: url("grafika/n-tr.jpg");
	}
	div#content_ml{
		float: left;
		height: 100%;
		width: 11px;
		background-image: url("grafika/n-sl.jpg");
		background-repeat: repeat-y;
	}
	div#content_main{
		float: left;
		width: auto;
		height: auto;
	}
	div#content_mr{
		float: right;
		height: 100%;
		width: 11px;
		background-image: url("grafika/n-sr.jpg");
		background-repeat: repeat-y;
	}
...
div#break{
	clear: both;
}

Kod strony wygląda następująco:

	<div id="content" class="round">
		<div id="content_tl">&nbsp</div>
		<div id="content_tt">&nbsp</div>
		<div id="content_tr">&nbsp</div>
		<div id="break"></div>
	
		<div id="content_sl"></div>
		<div id="content_main">
		//<!-- CZĘŚĆ TREŚCI -->
<?php
			include('produkty.php');
?>
		</div>
		<div id="content_sr"></div>
	</div>

Obramowanie rysowane jest bez problemu.

Część 'content_main' ma zawierać właściwą treść strony. Ładowana jest ona poprzez javascript poleceniem document.(...).innerHTML = trescpo kliknieciu w odpowiedni button.
Treścią są kolejno od lewej:

div#prods{
	float: left;
	margin-left: 20px;
	width: 125px;
} 
div#decsr{
	float: left;
}

Całość ładuje się, lecz jest pewien problem.

Jeżeli zawartość diva 'descr' jest duża(długa), to rozlewa się po elementach 'content_ml' oraz 'content_mr' w taki sposób, że widać normalne obramowanie diva 'content'.

PrintScreen:
user image(z konta interii- wybacznie, nie mam nic innego pod ręką ;-) )

Druga sprawa- przez ustawienie height: 100% strona sama się rozciąga do pewnego momentu(czarna kreska). Właśnie kiedy treść przekroczy ten moment grafika n-sl/n-sr przestaje się przewijać(repeat-y).

Szczerze mówiąc- mało prawdopodobnym jest, aby wielkość diva przekroczyła ten próg, lecz nie da się tego wykluczyć. Kompletnie nie mam pojęcia w jaki sposób mam sobie poradzić z tym bugiem- kolumny boczne('content_sl/sr') nagle się kończą, a efekt jest taki jak przedstawiłem wcześniej. Obym był zrozumiany, oby ktoś mi pomógł, gdyż sam nie potrafię.

0

Znalazłem gdzieś info, że height: 100% działa tylko w momencie, kiedy ojciec ma określoną wartość dla tego parametru. Szczerze mówiąc, height: auto; nic nie daje- jest puste pole. Wartość inherit również daje brak grafiki. (dlaczego wartość 100% wyciąga elelent?)

0

Na domiar złego, repeat-y nie działa w operze(a może po prostu źle css złożyłem).

0

height:auto != height: 100%. Rodzic musi mieć dokładnie ustalone wymiary. Co do piksela, albo procentowo (a to ciągnie kolejnych rodziców).

0

Dziwi mnie jednak, że przy ustawionym height: auto; element nie repetuje się wcale [???]

0

Ach, żałuję, że piszę jako anonim- posty jeden pod drugim wyglądają chaotycznie :-/
W każdym razie, mam prośbę. Pod ie6 strona w ogóle się źle wyświetla(pod ff oraz operą ładuje się ok)- pokazuje się zielona plansza pomimo, że treść strony jest jak najbardziej w porządku. Jeżeli, drogi użytkowniku, miałbyś chwilę- zerknij pod http://kmfk.100webspace.net/naturalia/index.php.

0

Dodam, że pod IE7 wygląda tak jak pod Fx - Nie mam IE6, więc nie mam jak przetestować niestety.

0

Ponownie dziękuję :)
Jeszcze parę słów muszę dodać, strona działa(problem z brakiem wyświetlania pod ie)- należało ustawić DOCTYPE na xhtml- dzięki nolife za poprawkę.

Miłego dnia :-)

1 użytkowników online, w tym zalogowanych: 0, gości: 1