Immagine In Contenitore Se Ne Metto Una Si Vede Se Metto L'altra Pure, Insieme No!

**dori88** · 03-09-2008, 12:32

Buon giorno a tutti, scusate per il titolo ma era difficile da spiegare..
Ho un problema stranissimo.
Sto creando, anzi ci sono quasi riuscita, a creare un box liquido a 3 colonne.
Sto disegnando le colonne tramite due immagini inserite in due differenti div... Se ne inserisco una sola (indifferentemente da quale delle due sia) disegna bene i bordi che le competono, quando le inserisco entrambe si vede solo l'ultima.... Non capisco perchè... Ne avete una vaga idea?

Ecco il codice:

codice:

<html>
<head>
<style type="text/css">
body{
margin:0  10%
}

#col1{
width:25%;
float:left;
}

#col2{
width:50%;
float: left;
background:#66CCCC
}

#col3{
width:25%;
float:left;
}

#cont2{
overflow:hidden;
width:100%
}

#cont0{
width:auto;
background:  url(cont0.png) 25% 0 repeat-y; /* queste sono le immagini*/
}

#cont1{
width:auto;
background:url(cont2.png) 75% 0 repeat-y;/* queste sono le immagini, quando le metto insieme è questa quella si vede e l'altra no */
}

</style>

<div id="cont0">
<div id="cont1">
<div id="cont2">
<div id="col1"> 

 COLONNA 1 COLONNA 1 </p> </div>
<div id="col2"> 

 Colonna 2 colonna 2 colonna 2 colonna 2 colonna 2 colonna 2 colonna 2 colonna 2 colonna 2 colonna 2 colonna 2 colonna 2 colonna 2 colonna 2 colonna 2 colonna 2 colonna 2 </p> </div>
<div id="col3"> 

 colonna 3 colonna 3 colonna 3 colonna 3 colonna 3 </p> </div> 
</div>
</div>
</div>

</head>
</html>

**dori88** · 03-09-2008, 13:42

Ho risolto..
Se in #cont0 metto il contenuto di #cont 1 e vieversa funziona!! Ovvero così:

codice:

#cont0{
width:auto;
background:  url(cont0.png) 25% 0 repeat-y; /* queste sono le immagini*/
}

#cont1{
width:auto;
background:url(cont2.png) 75% 0 repeat-y;/* queste sono le immagini, quando le metto insieme è questa quella si vede e l'altra no */
}

Ma perchè questo?? Qualcuno me lo spiega gentilmente?
Graize in anticpo

**Mich_** · 03-09-2008, 16:05

Prova a mettere un clear alla fine delle tre colonne: puoi inserire un oggetto in piu` dentro cont2 dopo le tre colonne, oppure puoi usare il metodo descritto in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float.

Inoltre a causa degli arrotondamenti potrebbero non starci le tre colonne: probabilmente basta che la larghezza totale sia 99.9%, anziche` 100%, ad esempio definendo la larghezza del sinistro a 24.9%.

**dori88** · 03-09-2008, 20:46

Scusa apprezzo ma non ho capito la tua risposta.. o meglio non ho capito cosa c'entra con ala mia domanda.
Nella mia risposta chiedevo perchè cambiando i contenuti funzionasse.

**dori88** · 03-09-2008, 20:56

Cmq, se puoi rispondere alla mia domanda, ovvero perchè quando ho fatto quel cambiamento funziona te ne sarei grata.
Inoltre se mi puoi fare vedere dove intendevi mettere il clear te ne sarei ancora piu' grata.. Perchè ho provato a mettere un div più esterno di tutti e non funziona, ho anche provato a metterlo nel blocco in cui metto l'overflow hidden e continua a non funzionare....

Fin ora mi funziona solo in quel modo... ma non capisco perchè scambiando i contenuti non funzioni

**Mich_** · 04-09-2008, 08:54

Non so perche` con il tuo scambio funzioni.

Pero` ho notato che usi dei float, inseriti dentro un blocco non-float. Inoltre l'innestamento dei blocchi di tipo #cont ti serve per sistemare gli sfondi.
Questo significa che il blocco non-float si chiude prima che finiscano i blocchi float, e questo ritengo ti dia il problema che segnali.

Il tutto si corregge mediante un clear.
Esempio1:

codice:

<div id="cont2">
  <div id="col1"> 

 COLONNA 1 COLONNA 1 </p> </div>
  <div id="col2"> 

 Colonna 2 colonna 2 ... colonna 2 colonna 2 colonna 2 </p> </div>
  <div id="col3"> 

 colonna 3 colonna 3 colonna 3 colonna 3 colonna 3 </p> </div> 
  <div id="chiusura">&amp;nbsp;</div>
</div>

CSS:
#cont2 {
  /* qui lo sfondo (false colonne) */
}
#col1, #col2, #col3 {
  width: ...;
  float: left;
}
#chiusura {
  width: 100%;
  height: 1px;
  font-size: 0;    /* per IE6 */
  clear: left;
}

Esempio2:

codice:

<div id="cont2">
  <div id="col1"> 

 COLONNA 1 COLONNA 1 </p> </div>
  <div id="col2"> 

 Colonna 2 colonna 2 ... colonna 2 colonna 2 colonna 2 </p> </div>
  <div id="col3"> 

 colonna 3 colonna 3 colonna 3 colonna 3 colonna 3 </p> </div> 
</div>

CSS:
#cont2 {
  /* qui lo sfondo (false colonne) */
}
#cont2:after {
  display: block; 
  visibility: hidden;
  content: "."; 
  height: 0; 
  clear: both;
}

#col1, #col2, #col3 {
  width: ...;
  float: left;
}

**dori88** · 05-09-2008, 12:48

Anzi tutto grazie per la tua risposta. Ho attenzionato i due codici da te postati, nel primo ho visto che tu mi dici di inserire le false colonne nello stesso contenitore.. E' possibile fare cio'? Non so te lo chiedo..

Nel secondo codice ho visto che adoperi #cont2:after.. non so cosa, sia perchè sono ancora agli inizi..

Ho fatto miei (almeno spero) i tuoi consigli e ho rifatto il codice includendo il clear alla fine e impostando il contenitore più esterno hidden afficnhè possa contenere i float. Al momento ho creato un contenitore per ogni sfondo;
Ecco quello che è venuto fuori... Purtroppo però non si vede lo sfondo.

codice:

<html>
	<head>
		<style type="text/css">
		body{margin:0 10%}
		
		#contpercontenereifloat{
		width:100%;
		overflow:hidden}
		
		
		#contenitorepercentrare{
		width:auto;
		margin:0
		}
		
		#contenitorepersfondocol1{
		background:url(http://www.gruppowebazar.com/cont0.png) 25% repeat-y
		}
		
		#contenitorepersfondocol2{
		background: url(http://www.gruppowebazar.com/cont2.png) 75% repeat-y
		}
		

		#col1{
		float:left;
		width:25%
		}
		
		#col2{
		float:left;
		width:50%
		}
		
		#col3{
		float:left;
		width:25%
		}
		
		#perclear{
		clear:left
		}
		
		
		</style>
	</head>

<div id="contpercontenereifloat">
	<div id="contenitorepercentrare">
		<div id="contenitorepersfondocol1">
			<div id="contenitorepersfondocol2">
		
			<div id="col1"> 

 Colonna1 </p> </div>
			<div id="col2"> 

 Colonna2 </p> </div>
			<div id="col3"> 

 Colonna3 </p> </div>
		
			</div>
		</div>
	</div>
	<div id="perclear"> </div>
</div>


</html>

Ti ripeto ancora grazie per il tuo aiuto, sper di poterne venire a capo..

**dori88** · 05-09-2008, 16:14

Allora ho risolto, ecco qua il codice:

codice:

<html> 
<head>
<style type="text/css">
body{margin:0 10%}

#pagina{
width:auto;
background:#fcf url(http://www.gruppowebazar.com/c3.gif) 75% 0 repeat-y;

}

#aiuto{
width:100%;
background: url(http://www.gruppowebazar.com/c1.gif) 25% 0 repeat-y;
overflow:hidden
}

#c1{
width:25%;
float:left
}

#c2{
width:50%;
float:left
}

#c3{
width:25%;
float:left
}



</style>


<div id="pagina">
	<div id="aiuto">
		<div id="c1"> 

 Colonna numero uno UNO UNO UNO UNO UNO UNO </p> </div>
		<div id="c2"> 

 Colonna </p> </div>
		<div id="c3"> 

 Colonna numero tre </p> </div>
	</div>
</div>

Alcune considerazioni generali vengono fuori, le scrivo per i posteri, magari qualcuno ne avrà bisogno un giorno:
- Se ci sono dei float all'interno di un contenitore è necessario che il contenitore che li contiene sia impostato a overflow:hidden; (alcuni dicono anche che width debba essere impostato a un valore diverso da auto, e qualora sia indispensabile impostare width ad auto, impostano heigth:1%) ma a me personalmente funziona anche con width auto (testato su FF e IE7), e per di più se imposto heigth:1%, la finestra si schiaccia, quindi non funziona.

- In questo caso ho inserito due div annidati nel primo ho inserito lo sfondo e la prima falsa colonna, in quello più interno l'altra falsa colonna...
Se invece lo sfondo (quello vero) viene inserito nel blocco più interno, questo va a coprire la falsa colonna inserita nella prima colonna..

Magari queste potranno sembrare considerazioni banali e superflue, ma se qualcuno due giorni fa me le avesse fatte presente varei risolto tanti problemi.. Quindi, spero che a qualcuno possano servire...
Alla prossima!

**gengix** · 05-09-2008, 16:45

Magari queste potranno sembrare considerazioni banali e superflue, ma se qualcuno due giorni fa me le avesse fatte presente varei risolto tanti problemi..

I problemi che hai riscontrato sono piuttosto comuni su questo forum insieme al bug che li accompagna, che è molto noto ai web designer.(easyclearing).

Una ricerca nei link utili o tra i post del forum ti avrebbe aiutato sicuramente.

L'utilizzo poi di height:1% e non solo di overflow e l'utilizzo del contenuto generato per firefox è ampliamente motivato dagli autori che hanno affrontato per primi questo bug.

Traduzione in italiano: http://www.css-zibaldone.com/traduzi...ng/index.html.

Testa su più browser anche più datati di IE7 (IE6 è ancora uno dei browser più utilizzati al mondo) e tasterai con mano quello che ti spiegano questi articoli.

EDIT: Ti consiglio di studiare anche questo articolo, è molto interessante:

http://gabrieleromanato.altervista.o...inglayout.html

Discussione: Immagine In Contenitore Se Ne Metto Una Si Vede Se Metto L'altra Pure, Insieme No!

Strumenti discussione

Ricerca discussione

Visualizza

Immagine In Contenitore Se Ne Metto Una Si Vede Se Metto L'altra Pure, Insieme No!

Permessi di invio