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

Rejestracja:ponad 17 lat
Ostatnio:ponad 13 lat

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

Kopiuj

<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ść.

esz

2010-12-27 23:05

esz2010-12-27 23:05

Rejestracja:ponad 14 lat
Ostatnio:prawie 14 lat
Postów:14

0

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

Kopiuj

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

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

Sprawdzane pod standardem:

Kopiuj

 
<!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.

edytowany 1x, ostatnio: esz 2010-12-27 23:08

cz4cha

2010-12-28 09:56

cz4cha2010-12-28 09:56

Rejestracja:ponad 17 lat
Ostatnio:ponad 13 lat

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

Kopiuj

#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

Kopiuj

<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

edytowany 2x, ostatnio: cz4cha 2010-12-28 09:57

esz

2010-12-28 10:33

esz2010-12-28 10:33

Rejestracja:ponad 14 lat
Ostatnio:prawie 14 lat
Postów:14

0

Minimalnie zmieniłem CSS:

Kopiuj

#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:

Kopiuj

<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>