[HTML/CSS] Bloccare l'"header" ed il "footer"

[Hil-X]

Ciao a tutti! Sto creando una pagina web. La sua struttura prevede un header, una parte centrale e un footer. Vorrei poter scorrere il contenuto della parte centrale mantenendo bloccate la barra in alto e quella in basso. Ho provato in tutti i modi, ma non riesco. Il nuovo HTML5 prevede anche i tag <header> e <footer>. Possono servire o è solo questione di fare qualche magheggio con i CSS? Grazie!

[wingman87]

Con position:fixed puoi specificare la posizione di un oggetto relativamente alla finestra del browser (quindi anche se scorri su e giu nella pagina, gli elementi restano nella stessa posizione)

[Hil-X]

Grazie mille! Avrei un'altra domanda: ho creato l'header più o meno in questo modo:

Codice HTML

<div id="header">
    <div class="menu">
        <ul>
            <li>Elemento 1</li>
            <li>Elemento 2</li>
            <li>...</li>
        </ul>
    </div>
</div>

Codice CSS

ul, li {
    list-style: none;
}

li {
    display: inline;
}

#header {
    height: 60px;
    text-align: center;
    background-color: black;
}

#header .menu {
    margin: 0 auto;
    width: 1000px;
    position: relative;
}

Ovviamente il codice della mia pagina non è così semplice (e perciò evito di scrivelo tutto), questo era solo un esempio. Quando ridimensiono la finestra del web browser gli elementi della lista "escono" dall'header, o meglio, gli ultimi elementi non hanno più lo sfondo dell'header. Per quale motivo? (So bene che tramite internet e senza tutto il codice è difficile valutare, ma provo comunque a chiederlo).

[Hil-X]

Credo di aver capito il problema, anche se non so risolverlo. Dovrebbe essere questione di "position": ho provato tutte le combinazioni, anche usando un po' la logica, ma il browser non ne vuole sapere di mostrarmi sempre il menu dentro l'header col suo sfondo!

[VICIUS]

Credo che sia dovuto al fatto che per header hai specificato un valore fisso per l'altezza. se ridimensioni la finestra e ha bisogno di aumentare la dimensione perché deve mantenere il valore che gli hai indicato. Prova a mettere un overflow: hidden in #header. In questo modo quelli in eccesso dovrebbero venire nascosti se non c'è più spazio per mostrarli.

[Hil-X]

Originariamente inviato da VICIUS

Prova a mettere un overflow: hidden in #header. In questo modo quelli in eccesso dovrebbero venire nascosti se non c'è più spazio per mostrarli.

Ti ringrazio per la risposta. Nel mio caso l'overflow: hidden fa sì che non sia mostrata più la barra di scorrimento orizzontale, perciò una parte del sito non può più essere visualizzata con una finestra ridotta.

Se invece dichiarassi l'altezza in #header.menu {}, ci sarebbe un modo per non avere overflow o almeno di contenere il menu dentro l'header, con lo sfondo di quest'ultimo?



Se la la lunghezza della finestra è inferiore al menu, succede questo:



EDIT: Ho sentito spesso parlare del problema che ho attualmente, risolto inserendo un clear: both; come proprietà del <div> contenitore, ma nel mio caso sembra non funzionare! (Forse perché clear: both; serve per risolvere l'overflow verticale e non quello orizzontale?)