La grandezza del div non si modifica

[JemanSK]

Ciao a tutti

Mi hanno detto di postare qui questo problema

Ma il codice php viene visto come contenuto in un div?
Vi spiego perchè
Ho un div e al suo interno creo dinamicamente tanti div. Però il div che sta sotto non si ingrandisce, rimane sempre della stessa altezza.
il codice è questo:
codice:
codice:

<div id="layer2">
<p class="high">NEWS TODAY</p>

<?php
include("Panel/Control/Connessione/connection.php");
$query ="SELECT * FROM news";
$rs = mysql_query($query);
while($ris = mysql_fetch_array($rs)){
echo "<div id=\"layer3\">";
echo "<p class=\"medium\">".$ris['titolo']." - ".$ris['sotto_tit']."</p>";
echo "<p class=\"lay\">".$ris['testo']."</p>";
echo "</div>";
}
?>

</div>



Il div che si trova sotto è grande quanto la scritta racchiusa nei tag "p". Mentre quelli che creo con il php escono fuori.
Nel css ho impostato anche il parametro z-index.
Come posso fare?

[paololosco]

posta il css probabilmente è un problema di posizionamenti o di float...

in ogni caso, fai tentativi prima con codice html (come viene generato dal php) e poi, una volta fatto, e messo a posto, ci metti il php per renderlo dinamico... io faccio cosi...

in ogni caso credo che se provi a farti una pagina HTML con il codice statico, hai lo stesso problema!

posta il css

[JemanSK]

#layer1{
	position:absolute;
	top:0px;
	left:0px;
	width:160px;
	height:100%;
	background-color: #010066;
	z-index:1;
	visibility: visible;
	text-align:center;
}
#layer2{
	background-color:#FFFFFF;
	position:absolute;
	height:1000px;
	left:160px;
	width:590px;
	z-index:2;	
}
#layer3{
	background-color:#cee8ff;
	position:relative;
	width:580px;
	top:100px;
	margin-left:5px;
	margin-top:0px;
	padding-top:20px;
	z-index:3;
}

Questo è il css che applico ai 3 div, il primo è laterale e non intralcia gli altri due, cioè il 2 e il 3, quindi non credo che dovrebbe dare fastidio, però l'ho postato lo stesso.
Il layer2 è quello che non si ingrandisce, mettendo la position a relative addirittura si rimpicciolisce del tutto rimanendo largo quel tanto che basta per far entrare una frase messa in maniera statica nell'html.

[paololosco]

Originariamente inviato da JemanSK

#layer1{
	position:absolute;
	top:0px;
	left:0px;
	width:160px;
	height:100%;
	background-color: #010066;
	z-index:1;
	visibility: visible;
	text-align:center;
}
#layer2{
	background-color:#FFFFFF;
	position:absolute;
	height:1000px;
	left:160px;
	width:590px;
	z-index:2;	
}
#layer3{
	background-color:#cee8ff;
	position:relative;
	width:580px;
	top:100px;
	margin-left:5px;
	margin-top:0px;
	padding-top:20px;
	z-index:3;
}

Questo è il css che applico ai 3 div, il primo è laterale e non intralcia gli altri due, cioè il 2 e il 3, quindi non credo che dovrebbe dare fastidio, però l'ho postato lo stesso.
Il layer2 è quello che non si ingrandisce, mettendo la position a relative addirittura si rimpicciolisce del tutto rimanendo largo quel tanto che basta per far entrare una frase messa in maniera statica nell'html.

Tu stai utilizzando il posizionamento relativo in maniera scorretta... allora, praticamente sposti di 10 pixel ogni div interno, ma lo spazio che occupano realmente è quello che occuperebbero senza il posizionamento "relative".

togli il "top: 100px" e te ne rendi conto... io eviterei il posizionamento "relative" piuttosto metti un MARGIN-TOP: 10 PX

il problema è questo cmq...

ciao ciao

[JemanSK]

Ciao Paololosco e grazie per la tua soluzione, ora tutto funziona bene, il codice ora è questo:

#layer2{
	background-color:#FFFFFF;
	position:absolute;
	height:100%;
	left:160px;
	width:590px;
	z-index:2;	
}
#layer3{
	background-color:#cee8ff;
	width:580px;
	margin-left:5px;
	margin-top:10PX;
	padding-top:20px;
	z-index:3;
}

Anche l'altezza del layer2 ora si setta al 100%, solo una cosa però:
In firefox il layer2 è grande quanto tutto il browser, mentre in explorer si ferma immediatamente dopo il layer3. E' possibile in explorer fare come firefox?

[paololosco]

Originariamente inviato da JemanSK
Ciao Paololosco e grazie per la tua soluzione, ora tutto funziona bene, il codice ora è questo:

#layer2{
	background-color:#FFFFFF;
	position:absolute;
	height:100%;
	left:160px;
	width:590px;
	z-index:2;	
}
#layer3{
	background-color:#cee8ff;
	width:580px;
	margin-left:5px;
	margin-top:10PX;
	padding-top:20px;
	z-index:3;
}

Anche l'altezza del layer2 ora si setta al 100%, solo una cosa però:
In firefox il layer2 è grande quanto tutto il browser, mentre in explorer si ferma immediatamente dopo il layer3. E' possibile in explorer fare come firefox?

a dire il vero... ho testato e in IE 6 si vede esattamente come in FF... :rollo: :rollo:

il problema può sorgere in FF se i div sono PIU lunghi del 100% della pagina (se hai lo scroll insomma... in firefox il div rimane alto "il 100%" e puoi ovviare cosi:

#layer2{
	background-color:#fff;
	position:absolute;
	height: auto!important;
	min-height: 100%;
	height:100%;
	left:160px;
	width:590px;
	z-index:2;	
}
#layer3{
	background-color:#cee8ff;
	width:580px;
	margin-left:5px;
	margin-top:10px;
	padding-top:20px;
	z-index:3;
}

ciao

[JemanSK]

Purtroppo non va:
Con firefox funziona benissimo ma in ie no, anche io uso la 6.0.
Per farti un esempio uno dei codici che uso all'interno del div(layer2) è questo:

<div id="layer2">


<p class="high" align="center">Soci</p>

<?php
	
	$query ="SELECT * FROM socio";
	$rs = mysql_query($query);
	$count = 1;
	if(mysql_num_rows($rs)!=0){
		while($ris = mysql_fetch_array($rs)){
			echo "<center>";
			echo "<table class=\"socio\"><tr>";
			if(trim($ris['foto'])!=""){
				$path = $ris['foto'];
				echo "<td rowspan=\"3\" width=\"20px\" ><img src=\"public/".$ris['foto']."\" align=\"left\"></td>";
			}
			echo "<th class=\"atti2\" ><p class=\"medium\">".$ris['nome']."</p></th><th class=\"atti2\"><p class=\"medium\">".$ris['cognome']."</p></th></tr>";
			echo "<tr><td><p class=\"medium\" align=\"left\">Qualifica: </p></td><td><p class=\"lay\">".$ris['qualifica']."</p></td></tr>";
			echo "<tr><td><p class=\"medium\" align=\"left\">Socio dal: </p></td><td><p class=\"lay\">".$ris['sociodal']."</p></td></tr>";
			echo "</table>";
			echo "</center>";
		}
	}
	else
		echo "<center><p class=\"medium\">Non ci sono informazioni in archivio</p></center>";
?>
</div>

Ma come ti ho gia detto il div2 finisce subito dopo la tabella e non prosegue fino a fine pagina come invece in ff.