overflow:hidden

[bonzox]

 
ul.menu1, ul ul {padding:0; margin:0; border:0; list-style-type:none; height:350px; overflow:hidden;
			 width:160px; text-align:left;}
ul.menu1 table {border-collapse:collapse; padding:0; margin:0; font-size:14px;}

ul.menu1 ul {margin-left:1em;}
ul.menu1 li {text-indent:0.5em;}
ul.menu1 li.drop {margin-bottom:-2px;}
ul.menu1 li a, 
ul.menu1 li a:visited {display:block;  line-height:1.9em; text-decoration:none; }
ul.menu1 li a.last, 
ul.menu1 li a.last:visited {display:block;  line-height:2em;}
ul.menu1 li ul {display:none;}

ul.menu1 li:hover a, 
ul.menu1 li a:hover {border:0; color:#00c; font-weight:bold; font-size:14px;}
ul.menu1 li:hover ul, 
ul.menu1 li a:hover ul {display:block; height:150px; width:146px; margin-top:-1px; background:#def; border:1px solid #000;}
ul.menu1 li:hover ul li a, 
ul.menu1 li a:hover ul li a {height:25px; background:#def; color:#00c; font-weight:normal;}
ul.menu1 li:hover ul li:hover a, 
ul.menu1 li a:hover ul li a:hover {background:#00c; color:#fff;}

overflow:hidden che fa esattamente?
Questo è un menu di cssplay.

Mi da problemi con questo:

#info ul {padding:0; margin:40px auto 40px auto; list-style-type:none; width:218px; height:218px; position:relative;}
#info img {border:0;}
#info li {display:block; height:70px; width:70px; float:left; margin:1px;}
#info a {font-size:11px;display:block; width:68px; height:68px; border:1px solid #000; line-height:68px; text-align:center; text-decoration:none; color:#000;}
#info a em, #info a span {display:none;}

a#pag_home {background:#eee;color:#000}
a#pag_azienda {background:#eee;color:#000}
a#pag_news {background:#eee; color:#000;}
a#pag_mappa {background:#eee;color:#000}
a#pag_prodotti {background:#eee; color:#000;}

a#pag_contatti {background:#eee; color:#000;}
a#pag_raggiungerci {background:#eee; color:#000;}

a#pag_ugelli {background:#eee;color:#000}
a#pag_ceramica {background:#eee;color:#000}




a:hover#pag_home {background:#b8d6f9; color:#000;}
a:hover#pag_home span {display:block; position:absolute; left:-270px; top:-100px; width:260px; height:150px; border:1px solid #000;background:#697210;}
a:hover#pag_home em {display:block; position:absolute; left:-10px; top:-25px; width:45px; height:25px; border-right:1px solid #000; border-top:1px solid #000; line-height:1px;}

a:hover#pag_azienda {background:#b8d6f9; color:#000;}
a:hover#pag_azienda span {display:block; position:absolute; left:-25px; top:-160px; width:260px; height:150px; border:1px solid #000;background:#e09222;}
a:hover#pag_azienda em {display:block; position:absolute; left:108px; top:-9px; width:1px; height:10px; font-size:1px; overflow:hidden; border-right:1px solid #000; line-height:1px;}

a:hover#pag_news {background:#b8d6f9;}
a:hover#pag_news span {display:block; position:absolute; left:228px; top:-100px; width:260px; height:150px; border:1px solid #000; background:#f0c992; color:#000;}
a:hover#pag_news em {display:block; position:absolute; left:192px; top:-25px; width:35px; height:25px; border-left:1px solid #000;  border-top:1px solid #000; line-height:1px;}

a:hover#pag_mappa {background:#b8d6f9; color:#000;}
a:hover#pag_mappa span {display:block; position:absolute; left:-270px; top:25px; width:260px; height:150px; border:1px solid #000; background:#ffd610; color:#000;}
a:hover#pag_mappa em {display:block; position:absolute; left:-10px; top:105px; width:12px; height:1px; border-top:1px solid #000; line-height:1px;}

a:hover#pag_prodotti {background:#b8d6f9;}
a:hover#pag_prodotti span {display:block; position:absolute; left:225px; top:25px; width:260px; height:150px; border:1px solid #000; background:#b55568;}
a:hover#pag_prodotti em {display:block; position:absolute; left:142px; top:105px; width:85px; height:1px; border-top:1px solid #000; line-height:1px;}

a:hover#pag_contatti {background:#b8d6f9;}
a:hover#pag_contatti span {display:block; position:absolute; left:-270px; top:165px; width:260px; height:150px; border:1px solid #000; background:#847b52;}
a:hover#pag_contatti em {display:block; position:absolute; left:-10px; top:215px; width:45px; height:25px; border-right:1px solid #000;  border-bottom:1px solid #000; line-height:1px;}

a:hover#pag_raggiungerci {background:#b8d6f9;}
a:hover#pag_raggiungerci span {display:block; position:absolute; left:228px; top:145px; width:260px; height:150px; border:1px solid #000; background:#724a10;}
a:hover#pag_raggiungerci em {display:block; position:absolute; left:182px; top:215px; width:45px; height:25px; border-left:1px solid #000;  border-bottom:1px solid #000;

Se lascio overflow non vedo tutto? come mai? se lo tolgo dal primo che problemi mi darebbe?

[ricman]

Originariamente inviato da bonzox
overflow:hidden che fa esattamente?
....
Se lascio overflow non vedo tutto? come mai? se lo tolgo dal primo che problemi mi darebbe?

Overflow:hidden nasconde tutto ciò che "eccede" dalle dimensioni che hai fissato per il blocco in cui inserisci dei contenuti. Se tu ci mettessi un "overflow:auto", ad esempio, otterresti un blocco fisso con delle barre laterali Se il contenuto andasse a finire oltre le dimensioni stabilite. Cosa da non fare, ovviamente, per una voce di un menu....

[bonzox]

Visto che non eccedo mai dalle dimensioni, allora posso toglierlo.

Come mai influisce su un'altro blocco?

[thomas_anderson]

ciao!
visto che usi Linux, probabilmente non conosci i famigerati effetti di quella dichiarazione su IE. ti consiglio di testare sempre su IE quando usi 'overflow' perchè gli effetti sono impensabili. per iniziare:

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

qui per farti un'idea dei problemi. spessso una soluzione è dare ad IE commenti condizionali:

<head>
<!--[if IE]>
<style type="text/css">
..
</style>
<![endif]-->
</head>

una soluzione è spesso dare 'overflow: auto' considera che IE ha anche le proprietà

'overflow-x' (orizzontale) e 'overflow-y' (verticale) che devi mettere nel css nel commento condizionale se vuoi che il css sia validato. ottimi test li trovi su http://www.brunildo.org/test/

ciao