Zagnieżdżone divy i rozciąganie tła

0

Witam, mam problem z tłem w divach. Moja sytuacja wygląda tak: mam kilka rodzajów divów, wewnątrz pierwszego znajdują się inne. Pierwszy div ma ustalony obrazek tła, problem polega na tym, że to tło się nie wyświetla. Działa tylko wtedy gry ustalę mu odgórnie jaka ma być wysokość tego głównego diva. Tylko, że wtedy nie mogę zrobić wielkości strony takiej jaką bym chciał. Mam tak

<div id="glowny">
   <div>
      tu jest cos
   </div>
   <div>
      tu jest cos
   </div>
<div>

Div główny ma w css ustalone tło ale ono się wyświetla tylko wtedy gdy wstawię mu na sztywno wysokość. Ja chciałbym aby ono się wyświetlało w zależności od wielkości tych divów wewnętrznych. Kiedy zamiast głównego diva dam tabelkę to działa poprawnie, chciałem jednak zrobić na divach całość.

0

Divy wewnętrzne jak i nadrzędny powinny mieć ustawiony parametr float.

 
#glowny {
background:url(http://cvcl.mit.edu/hybrid/cat2.jpg);
float:left;
}

#glowny div {
float:left;
width:200px;
}

Sprawdzane pod standardem:

 
<!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" xml:lang="pl" lang="pl">

EDIT:
width:200px; dla wewnetrznego ustawione przy testach. Działa i bez definiowania stałej szerokości.

0

Mam ustawione float'y. Może podam mój kod bo ten przykład który podałem był dość okrojony ;p

w css

#container {
	width: 990px;
	min-height: 500px;
	margin: auto;
	float : none;
	background-color : transparent;
	background-image : url('/images/bg2.GIF');
	background-repeat : repeat;

}

.side{
	min-height: 300px;
	width: 160px;
	float: left;
	padding-top: 15px;
	overflow: hidden;
}

#middle{
	width: 670px;
	float: left;
	overflow: hidden;
	
}

w html'u

<div id="container">
	
	
	
	<div class="side">
		<img src="/images/left_top.jpg"></img>
		
		<div class="modul_title">Logowanie</div>
		<div class="modul_container">Tu bedzie mozna sie logowac</div>
		
		<div class="modul_title">Facebook</div>
		<div class="modul_container">
			Znajdz nas na facebook'u
		</div>
		
		<img src="/images/left_bottom.jpg"></img>
	</div>

	<div id="middle">
		<%=yield %>
	</div>

	<div class="side">
		<img src="/images/right_top.jpg"></img>
		<img src="/images/right_bottom.jpg"></img>
	</div>

</div>

i problem jest taki, że jeśli mam ustawione w containerze min-height to tło tego diva ma właśnie taką wielkość ale się nie rozciąga zupełnie jak gdybym zrobił zwykłe height. A gdy usunę to min-height to tło się nie pojawia. To działa tak jak gdyby te divy wewnętrzne nie działały na ten zewnętrzny, bo jeśli wpiszę np zwykły tekst w divie container to pojawia się tło do tego tekstu. Ja chciałbym aby tło się rozciągało względem największego z divów wewnętrznych

0

Minimalnie zmieniłem CSS:

#container {
        width: 990px;
        min-height: 500px;
        margin: auto;
        float : none;
        background-color : transparent;
        background-image : url('http://mobini.pl/upload/files/129/524/989/221/724/373_cat_peekaboo_l.jpg');
        background-repeat : repeat;

}

#side1,#side2{
		height:100%;
        width: 160px;
        float: left;
        padding-top: 15px;
        overflow: hidden;
}

#middle {
width:150px;
float:left;
}

Kod JavaScript do nagłówków:

<script type="text/javascript">
function setheight() {
	if(document.getElementById('side1').offsetHeight > document.getElementById('container').offsetHeight) {
	document.getElementById('container').style.height = document.getElementById('side1').offsetHeight+'px';
	}

	if(document.getElementById('side2').offsetHeight > document.getElementById('container').offsetHeight) {
	document.getElementById('container').style.height = document.getElementById('side2').offsetHeight+'px';
	}

	if(document.getElementById('middle').offsetHeight > document.getElementById('container').offsetHeight) {
	document.getElementById('container').style.height = document.getElementById('middle').offsetHeight+'px';
	}
}
</script>

I zmiana w body:

<body onload="setheight();">

edit: grafiki wrzuciłem swoje, do testów - można usunąć, oczywiście :)

0

Dzięki za odpowiedź ale chyba wsadzę to jednak w jedną tabelkę.

0

zmień wartość atrybutu "float" z "none" na "left" w elemencie "#container"

0

#głowny 'emu trzeba nadać overflow: hidden;

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