Header fisso

N

nofcfro

Utente Attivo
27 Mag 2012
72
0
6
Salve a tutti,
vorrei realizzare un sito con tre div: un header, un article, un footer. Il div header deve essere fisso e il div article deve scorrere sotto di esso. Come si può realizzaare?
Grazie anticipatamente
 
N

nofcfro

Utente Attivo
27 Mag 2012
72
0
6
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?
 
Max 1

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Una pagina di larghezza 9000px, a mio avviso è un'assurdità :confused:.
Poi la tua domanda non mi è molto chiara, spiegati meglio e sopratutto posta un link per vedere la pagina in azione
 
N

nofcfro

Utente Attivo
27 Mag 2012
72
0
6
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?
 
N

nofcfro

Utente Attivo
27 Mag 2012
72
0
6
Ecco l'immagine: esempio.jpg
 
Max 1

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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,
 
N

nofcfro

Utente Attivo
27 Mag 2012
72
0
6
Purtroppo ho così tante voci che non posso racchiuderle in 980px (pixel più pixel meno)...:(
Se avessi una pagina più piccola avrei già usato la tua soluzione ;) però ne cerco una per la mia situazione non tanto comune :(
Comunque grazie ;)
 
Max 1

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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!
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>
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
P header fisso HTML e CSS 3
G html problema table scrollable con header fisso HTML e CSS 2
G header , nav e flex HTML e CSS 3
A Logo si sovrappone all'header HTML e CSS 1
I $header HTML e CSS 0
J Header location PHP 3
gandalf1959 [PHP] problema con l'utilizzo di Header PHP 3
M [PHP] header (location..) non funzionante dopo login PHP 3
M [HTML] Picture Tag non funziona in header-Element HTML e CSS 0
M [WordPress] Header responsive WordPress 5
M Header responsive Presentati al Forum 0
P [WordPress] header-post-title-class WordPress 7
R [HTML] sfondo header HTML e CSS 0
L [HTML] Flusso contenuti sotto la header HTML e CSS 9
Kolop [WordPress] [HTML] Problema header su mobile WordPress 4
W [XAMPP] File "header.php" non si vede su XAMPP PHP 0
giuseppe_123 [Magento] Creazione modulo statico sotto header Magento 0
G [PHP] Warning: Cannot modify header information - headers already sent by PHP 3
giancadeejay [PHP] Nome utente e Logout nell'header PHP 0
S [PHP] Non mi effettua header PHP 7
E [PHP] No 'Access-Control-Allow-Origin' header is present PHP 1
G php redirect header location pagina bianca PHP 0
gandalf1959 problema con header in area riservata PHP 4
alankanz Header(Location: mailto.... PHP 1
X Problema con header() include() e i siti di hosting PHP 1
enzonero problema immagini header WordPress 1
borgo italia header e meta non più funzionanti PHP 7
M Errore di header se metto include al posto delle istruzioni PHP 2
M Mettere un'immagine come header HTML e CSS 1
K inserimento immagini tra header e pagine WordPress 4
L problema con la funzione header!!! AIUTO! PHP 24
P problema con header(Location....) PHP 11
F Effetto comparsa header Javascript 2
J Inserimento di un header, nav, footer php PHP 0
R Vertex Template (jommla2.5): cambiare colore dell'header Joomla 12
G [VENDO] Banner 125x125 Zona Alta Header - advhits.com (3000 Unici/Giorno) Vendere e Acquistare pubblicita' online 0
R banner in header wordpress WordPress 1
D Help per header in flash Flash 6
lara:) Header sito WordPress 2
S php problemi di funzione header usando la fuzione di jquery post PHP 4
blips Stampare header tabella in funzione di un campo db PHP 4
F Header location $_GET PHP 1
Emix Problema Header location... PHP 15
U distribuire elementi verticalmente tra header e footer HTML e CSS 7
N Header che scorre onclick... forse nulla di nuovo, ma... jQuery 6
H Warning: Cannot modify header information... PHP 6
Fabrizio Fiorita header e session funzionano perfettamente in locale ma creano problemi in remoto PHP 32
F PrestaShop header.tpl CMS (Content Management System) 0
V Header PHP 6
A Errore con header ( Location...) PHP 4

Discussioni simili

Alto Basso