[HTML] Avere header variabile in rapporto all'ampiezza della pagina

Michi81 · 06-11-2006, 09:22

Ciao a tutti!

Nel mio sito ho messo in alto una sorta di header, che consiste in una barra blu, dove ho scritto in bianco il titolo del sito. Purtroppo questo header ha delle dimensione fisse, per cui se vado a restringere troppo il browser, viene tagliato. Se invece amplio troppo il browser, appare lo spazio bianco a lato.
Ad es. invece l'header con l'uomo vitruviano e il codice binario di SWZone si adatta alla pagina, ingrandendo o rimpicciolendo la finestra del browser.
Questo è il codice che ho usato:

<div id="shape1" style="position:absolute; overflow:hidden; left:0px; top:0px; width:927px; height:150px; z-index:4; background-color:#00CCFF"> </div>

Come posso far sì che si adatti alla finestra del browser?

Grazie!

:bye:

P.S.: nell'allegato potete vedere come si comporta l'header (barra blu chiaro) quando la finestra del browser è troppo grande. Si vede infatti sulla destra lo sfondo (bianco con fiori/stelle blu).

Fenomeno85 · 06-11-2006, 10:43

basta che fai un foglio di stile di tipo fluido.

http://css.html.it/guide/lezione/55/layout-fluido/

~§~ Sempre E Solo Lei ~§~

Michi81 · 06-11-2006, 13:03

Grazie, ottimi soluzione e link.

Ma non sapresti come cambiare la riga di codice che ho postato per avere l'effetto voluto, senza dover rifare tutto quanto?
Forse una soluzione potrebbe essere:

<div id="shape1" style="position:absolute; overflow:hidden; left:0px; top:0px; width:100%; height:150px; z-index:4; background-color:#00CCFF"> </div>

Che ne dici/dite?

Grazie.

Michi81 · 07-11-2006, 10:33

Quote:

Originariamente inviato da Michi81

Funziona! Magari a qualcuno servirà in futuro!

Buona giornata a tutti.

06-11-2006, 10:43	#2
Fenomeno85 Senior Member Iscritto dal: Jun 2002 Città: Provincia De VaRéSe ~ § ~ Lat.: 45° 51' 7" N Long.: 8° 50' 21" E ~§~ Magica Inter ~ § ~ Detto: A Chi Più Amiamo Meno Dire Sappiamo ~ § ~ ~ § ~ Hobby: Divertimento allo Stato Puro ~ § ~ ~ § ~ You Must Go Out ~ § ~ Messaggi: 8897	basta che fai un foglio di stile di tipo fluido. http://css.html.it/guide/lezione/55/layout-fluido/ ~§~ Sempre E Solo Lei ~§~ __________________ Meglio essere protagonisti della propria tragedia che spettatori della propria vita Si dovrebbe pensare più a far bene che a stare bene: e così si finirebbe anche a star meglio. Non preoccuparti solo di essere migliore dei tuoi contemporanei o dei tuoi predecessori.Cerca solo di essere migliore di te stesso

06-11-2006, 13:03	#3
Michi81 Member Iscritto dal: Apr 2006 Messaggi: 135	Grazie, ottimi soluzione e link. Ma non sapresti come cambiare la riga di codice che ho postato per avere l'effetto voluto, senza dover rifare tutto quanto? Forse una soluzione potrebbe essere: <div id="shape1" style="position:absolute; overflow:hidden; left:0px; top:0px; width:100%; height:150px; z-index:4; background-color:#00CCFF"> </div> Che ne dici/dite? Grazie.

Strumenti
Mostra una versione stampabile Invia questa pagina per email