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

[Michi81]

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">&nbsp;</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]

basta che fai un foglio di stile di tipo fluido.

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

~§~ Sempre E Solo Lei ~§~

[Michi81]

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]

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


Funziona! Magari a qualcuno servirà in futuro! ;)

Buona giornata a tutti.