Contenitore si espande con il contenuto float

**lbottoni** · 12-02-2009, 16:35

ciao,
ho cercato, ma non trovato..so che sbaglio la ricerca, ma non ricordo come devo fare..vorreti che il div contenitore (o quello con classe "lista") si espandessero in altezza in base al conenuto delle immagini racchiuse nei tag li

esempio (funge con IE ma non con FF)

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
</head>
<style>
.container
	{
	border-width:1px 1px 1px 1px;
	border-color:#000000;
	padding:2px 2px 2px 2px;
	}
.lista li
	{
    float: left;
    list-style-type: none;
	width:50px;;
	border:1px solid #FFFF00;
	}
.lista ul
	{
	padding: 8px 2px 2px 2px;
	border:solid;
	border-color:#91A921;
	border-width:1px 1px 1px 1px; 
	font-family:Verdana;
	font-size:9px;
	color:#FFFFFF;
	background-color:#000000;
	margin:0px 0px 2px 0px;
	width:280px;
	}
</style>
<body>
<div class="container">
	container
    <div class="lista">    
        <ul>[*][*][*][*][*][*][*][*][*][*][/list]
    </div>

</div>
</body>
</html>

**Mich_** · 12-02-2009, 16:41

Ti manca il clear.

Probabilmente puoi usare quanto consigliato in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float, da applicare alla fine del blocco <ul>

**lbottoni** · 12-02-2009, 17:13

fatto e non funziona...evidentemente non lo applico bene o non ha effetto sulle liste ul

**fcaldera** · 12-02-2009, 17:47

Originariamente inviato da lbottoni
fatto e non funziona...evidentemente non lo applico bene o non ha effetto sulle liste ul

avresti la possibilità di rendere noto il tuo codice? altrimenti non possiamo capire cosa hai scritto e come...

**lbottoni** · 12-02-2009, 17:52

non si vede nel mio 1° post? ho incollato tutto il codice proprio per farmi aiutare in modo semplice e veloce..se lo copi e lo incolli su una pagina html nuova...hai tutto il codice mio..

o vorresti quello dove ho provato ad applicare quell'hack?

**fcaldera** · 12-02-2009, 18:00

Originariamente inviato da lbottoni

o vorresti quello dove ho provato ad applicare quell'hack?

sì

**Mich_** · 12-02-2009, 18:03

Originariamente inviato da lbottoni
o vorresti quello dove ho provato ad applicare quell'hack?

Esatto.
Posta le modifiche effettuate.

Pero` se hai un link e` meglio: si vede meglio da una pagina funzionante (mentre crearsi una pagina di prova copiando il codice e` uan cosa piu` lunga che non sempre si ha il tempo di fare)

**lbottoni** · 12-02-2009, 18:32

purtroppo non riesco adesso a metterla online...ho apllicato la regola css alla classe lista

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
</head>
<style>



.container
	{
	border-width:1px 1px 1px 1px;
	border-color:#000000;
	padding:2px 2px 2px 2px;
	height: auto;
	overflow: hidden;
	}

            /***  FabClearing ***/

            .lista:after {
                display		: block; 
                visibility  	: hidden;
                content		: "."; 
                height		: 0; 
                clear           : both;
            }
            
            .lista {
                clear           : both; /* per Gecko */
                height		: 1%; /* per IE */
            }


.lista ul
	{
	padding: 8px 2px 2px 2px;
	border:solid;
	border-color:#91A921;
	border-width:1px 1px 1px 1px; 
	font-family:Verdana;
	font-size:9px;
	color:#FFFFFF;
	background-color:#000000;
	margin:0px 0px 2px 0px;
	width:280px;
	}
.lista ul li
	{
    float: left;
    list-style-type: none;
	width:50px;;
	border:1px solid #FFFF00;
	}



</style>
<body>
<div class="container">
    <div class="lista">    
        <ul>[*][*][*][*][*][*][*][*][*][*][/list]
    </div>
	<div style="clear:both;">.</div>
</div>
</body>
</html>

**fcaldera** · 12-02-2009, 19:57

1) togli quel <div style="clear:both;">.</div>

2) stai applicando il float agli[*], dovresti applicare il clearing all' <ul>
quindi

codice:

            .lista ul:after {
                display		: block; 
                visibility  	: hidden;
                content		: "."; 
                height		: 0; 
                clear           : both;
            }
            
            .lista ul {
                clear           : both; /* per Gecko */
                height		: 1%; /* per IE */
            }

3) occhio che c'è un errore di sintassi

width:50px;;

(un ; in più)

**lbottoni** · 13-02-2009, 09:44

Perfetto..ora funziona.

il div con il clear lo avevo messo e dimenticato di togliere nelle varie prove...cavolacci, se hai ragione, ma dopo ore di prove ero proprio fuso...se applico ai li il float, dovevo applicare quelle regole al ul

son proprio un pistola!!! :rollo:

grazie mille del grande aiuto

CODICE FINALE

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
</head>
<style>



.container
	{
	border-width:1px 1px 1px 1px;
	border-color:#000000;
	padding:2px 2px 2px 2px;
	height: auto;
	overflow: hidden;
	}

.lista ul:after 
	{
	display		: block; 
	visibility  	: hidden;
	content		: "."; 
	height		: 0; 
	clear           : both;
	}

.lista ul
	{
	padding: 8px 2px 2px 2px;
	border:solid;
	border-color:#91A921;
	border-width:1px 1px 1px 1px; 
	font-family:Verdana;
	font-size:9px;
	color:#FFFFFF;
	background-color:#000000;
	margin:0px 0px 2px 0px;
	width:280px;
	
	clear:both;
	height:1%;
	}
.lista ul li
	{
    float: left;
    list-style-type: none;
	width:50px;
	border:1px solid #FFFF00;
	}



</style>
<body>
<div class="container">
    <div class="lista">    
        <ul>[*][*][*][*][*][*][*][*][*][*][/list]
    </div>
</div>
</body>
</html>

Discussione: Contenitore si espande con il contenuto float

Strumenti discussione

Ricerca discussione

Visualizza

Contenitore si espande con il contenuto float

Permessi di invio