Header fisso
- Creatore Discussione nofcfro
- Data di inizio
CORREZIONE: Salve a tutti,
ho realizzato un sito con tre div: un header, un article, un footer. Il div header è fisso e il div article scorre sotto di esso.
La larghezza della pagina (essendo un catalogo) è circa 9000px. Il problema è che originariamente l'header si distendeva lungo i 9000px, ma quando nel css header ho messo {position: fixed;}, tutto il contenuto viene ridisposto interamente nella dimensione della pagina non scorrendo più. Come posso risolvere?
ho realizzato un sito con tre div: un header, un article, un footer. Il div header è fisso e il div article scorre sotto di esso.
La larghezza della pagina (essendo un catalogo) è circa 9000px. Il problema è che originariamente l'header si distendeva lungo i 9000px, ma quando nel css header ho messo {position: fixed;}, tutto il contenuto viene ridisposto interamente nella dimensione della pagina non scorrendo più. Come posso risolvere?
.La larghezza purtroppo dipende dalla quantità enorme di campi (è un catalogo) 
Allego un'immagine e cerco di spiegarmi in modo più chiaro.
Ho una pagina con due div: un 'header' e un 'article'. L'header deve rimanere fisso, cosicché anche scorrendo la grande quantità di titolo del catalogo, le intestazioni (collana, autore, ecc..) rimangono sempre in bella vista. Per questo motivo ho dato al css valore position: fixed. L'article invece deve scorrere su e giù (per vedere tutti i titoli) e a destra e sinistra (per vedere tutti i campi: collana, autori, ecc). Per questo motivo ho dato quindi valore al css position relative.
Il problema è che mentre l'article scorre beatamente in lungo e in largo (come io voglio), l'header non segue l'article e non si muove a destra e sinistra!!!
Esempio: qualora io volessi cercare la voce tipografo (che è una delle ultime voci) spostandomi con la scroll bar riesco a raggiungerla nell'article ma l'header rimane fissa e non scrolla a orizzontalmente insieme all'article
Quindi in coclusione: come posso far rimanere fissa l'header verticalmente (in maniera che rimanga sempre visibile scendendo i titoli con la scroll bar) ma permettere che essa si muova a destra inseiem con l'article quando cerco le ultime voci?
Allego un'immagine e cerco di spiegarmi in modo più chiaro.
Ho una pagina con due div: un 'header' e un 'article'. L'header deve rimanere fisso, cosicché anche scorrendo la grande quantità di titolo del catalogo, le intestazioni (collana, autore, ecc..) rimangono sempre in bella vista. Per questo motivo ho dato al css valore position: fixed. L'article invece deve scorrere su e giù (per vedere tutti i titoli) e a destra e sinistra (per vedere tutti i campi: collana, autori, ecc). Per questo motivo ho dato quindi valore al css position relative.
Il problema è che mentre l'article scorre beatamente in lungo e in largo (come io voglio), l'header non segue l'article e non si muove a destra e sinistra!!!
Esempio: qualora io volessi cercare la voce tipografo (che è una delle ultime voci) spostandomi con la scroll bar riesco a raggiungerla nell'article ma l'header rimane fissa e non scrolla a orizzontalmente insieme all'article
Quindi in coclusione: come posso far rimanere fissa l'header verticalmente (in maniera che rimanga sempre visibile scendendo i titoli con la scroll bar) ma permettere che essa si muova a destra inseiem con l'article quando cerco le ultime voci?
Si può fare! Solo che io lo farei in modo diverso dal tuo perchè come ti ho detto una pagina di 9000px è assurdo.
Io farei una pagina di: ad esempio 980px (normale) dimensione fissa con un header di 980px, quindi questo sarebbe fisso e si vedrebbe sempre, poi farei il div degli articoli della larghezza che serve e che scrolli in orzz. e vert,
Io farei una pagina di: ad esempio 980px (normale) dimensione fissa con un header di 980px, quindi questo sarebbe fisso e si vedrebbe sempre, poi farei il div degli articoli della larghezza che serve e che scrolli in orzz. e vert,
Tu devi entrare nell'ordine di idee che non è necessario avere una pagina di 9000 per avere dei dati che scrollano in orrizzontale e verticale. Basta fare scrollare i div
Questo è un esempio grossalano di come tu puoi risolvere il problema, PROVALO!
Questo è un esempio grossalano di come tu puoi risolvere il problema, PROVALO!
Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #8E8E8E;
width: 980px;
}
#dati {
white-space: nowrap;
overflow: auto;
color: #FFFFFF;
background-color: #FF0004;
margin: 0px;
padding: 20px;
height: 500px;
width: 980px;
border: 3px solid #000000;
}
#header {
color: #000000;
background-color: #1AFF00;
margin: 0px;
padding: 20px;
height: 200px;
width: 980px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="header">Inserite qui il contenuto per id "header"</div>
<div id="dati">
Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto Inserite qui il contenuto
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
Inserite qui il contenuto Inserite qui il contenuto <br />
</div>
</body>
</html>
