Spiegazione overflow: hidden all'interno di <ul>

_Gemba_

Utente Attivo
220
32
CPU
i5 7600
Dissipatore
Stock Intel
Scheda Madre
Gigabyte H270 HD3
HDD
Western Digital Blue 1TB + SSD NVME 960 EVO 250GB
RAM
2 x 4GB Corsair Vengeance 2400 Mhz CL14
GPU
MSI RX 480 Gaming X 8GB
PSU
EVGA Supernova G2 550W
Case
Corsair Spec 03
OS
Windows 10 Pro x64
Salve ragazzi, sono alle prime armi e sto seguendo le guide e i (numerosi) esempi del grande w3school.
Fino ad ora sto capendo molte cose, e sto facendo molta pratica ma c'è una cosa che non sono riuscito a capire.
Questo è un esempio di una navigation bar orizzontale:
Tryit Editor v3.0
Non riesco a capire il significato di overflow: hidden applicato alla lista in generale <ul>. Se lo tolgo il menù sparisce!
Vi ringrazio.


EDIT: Chiedo scusa per la doppia discussione. Dopo aver premuto il pulsante "invia discussione" è uscito un messaggio di errore (tipo ops non è possibile visualizzare questa pagina) allora ho aggiornato. In questo modo me ne ha create due.
 
Ultima modifica:

Geca89

Utente Attivo
292
35
CPU
I7 5820K
Scheda Madre
X99-A Plus
HDD
SSD 500GB
RAM
DDR4 32 GB
GPU
Nvidia Geforce GTX 950
Audio
Sound Blaster Z
Monitor
Benq 22''
PSU
750W Semi Modulare
Case
ITEK Case BI-TURBO
Periferiche
WIFI B,G,N AC
OS
Windows
L'attributo overflow può assumere i seguenti valori :

Visible : Consente di vedere il contenuto anche se supera le dimensioni prefissate, sovrapponendo i testi.
Hidden : Nasconde il contenuto in esubero.
Scroll : Mostra uno scroll gestendo il contenuto in esubero
Auto : Rende il browser in autonomo di scegliere l'opzione migliore.


Ora è chiaro che se togli Hidden in esubero non c'è nulla perchè non hai fissato una lughezza e un 'altezza (width e height) quindi sarà uguale a 0 cioè uguale a niente.

Per chiarirti le idee, dopo overflow, imposta una dimensione di width:100px; height:100px; e cambia i 4 stati di overflow che ti ho scritto.
Guarda cosa succede.
Ciao.
 
  • Mi piace
Reazioni: _Gemba_
M

Mursey

Ospite
Esatto; aggiungo che, In questo caso, ottieni l'effetto desiderato se togli l'overflow e al suo posto metti
Codice:
width:100%;
height:45px;
 
  • Mi piace
Reazioni: _Gemba_

Entra

oppure Accedi utilizzando
Discord Ufficiale Entra ora!