www.MegaLab.it

da **zenith** » dom giu 15, 2008 3:49 pm

Ciao ragazzi... mi sto divertendo sperimentando i CSS. Però non riesco ad ottenere un risultato...
Vorrei che l'header coprisse tutta la larghezza disponibile nel browser: cioè anche ridimensionando non appaiano barre di scorrimento orizzontali.
Invece il resto della pagina dovrebbe essere largo 800 px (ma su questo non dovrebbero esserci problemi).
Suggerimenti?
Grazie.

da **Pacopas** » dom giu 15, 2008 4:05 pm

basta definire la larghezza così..

width: 100%

comunque se contiene immagini prima o poi dovrai usare lo scorrimento orizzontale.. altrimenti l'alernativa è tagliare l'immagine con l'overflow

da **bluesummer** » dom giu 15, 2008 5:28 pm

Se l'immagine viene associata alla proprietà "background-image" non è necessario utilizzare l'overflow :)

da **Pacopas** » dom giu 15, 2008 6:11 pm

bluesummer ha scritto:Se l'immagine viene associata alla proprietà "background-image" non è necessario utilizzare l'overflow :)

giusto

comunque io non mi riferivo al fatto sulla possibilità o meno di tagliare l'immagine ma a questa frase

cioè anche ridimensionando non appaiano barre di scorrimento orizzontali.

e al fatto che prima o poi la barra orizzontale apparirà perché sia come sfondo o come overflow mozzare un immagine da una brutta impressione... mi sono espresso in maniera incompleta [:-H]

da **zenith** » lun giu 16, 2008 8:21 am

No, non ci simao. L'immagine non copre tutta la pagina. Spiego la situazione nel dettaglio.
Ho un div "sfondo" con repeat impostato su "x" e z-index 10; ho poi un div "titolo" con z-index 20 e un div "navigazione" con z-index 30.
Ecco, il div "sfondo" vorrei si ripetesse automaticamente per tutta la larghezza disponibile nel browser.
Allego situazione attuale.

Codice: Seleziona tutto: #heading{ <--- è lo sfondo (quello che dovrebbe ripetersi... background: url("C:\Documents and Settings\HP_Proprietario\Documenti\..."); background-repeat: repeat-x; position: absolute; top: 0px; left: 0px; z-index: 10; float: left; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 100%; text-align:left; overflow: hidden; } #heading2{ <--- è la navigazione font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #FF9900; z-index: 30; position: absolute; top: 75px; left: 20px; font-size: 12px; font-weight: bold; } #heading3{ <--- è il titolo background-image: url("C:\Documents and Settings\HP_Proprietario\Documenti\..."); z-index: 20; position: absolute; top: 10px; left: 20px; width: 100%; background-repeat: no-repeat; }

da **Pacopas** » lun giu 16, 2008 11:57 am

e quale editor hai usato per questo codice?

[:)]

guarda io non ho capito bene ma se tu vuoi semplicemente fare la testa al 100% si fa come ti ho detto ... impostando semplicemente il widht...

facciamo un esempio semplice... copia il testo in un txt e rinominalo esempio.html

Codice: Seleziona tutto: <head><title>esempio</title> <style type="text/css">  </style></head><body> <div id="testa"> </div> <div id="corpo"> </div> <div id="piedipagina"> </div> </body></html>

da **zenith** » lun giu 16, 2008 3:43 pm

Lo so che sono un cretino... ma non viene!!
Comunque io uso TopStyle 3 per i CSS, FrontPage2003 per la pagina. Io uso un foglio di stile esterno.
L'esempio era banale perché il foglio di stile era "interno"... Il probema è ottenere il risultato usando il foglio di stile esterno (<link rel=stylesheet href="../stile%20nero.css" type="text/css">)... Proprio non ci arrivo.
Se vi va di perdere la testa vi ringrazio, altrimenti lasciate stare e non perdete tempo! [;)]

da **Pacopas** » mar giu 17, 2008 2:03 am

zenith ha scritto:L'esempio era banale perché il foglio di stile era "interno"... Il probema è ottenere il risultato usando il foglio di stile esterno

il principio è lo stesso basta dividere il foglio di stile. crea due file uno

stlile.css contenente

Codice: Seleziona tutto: body { font:80% verdana,helvetica,sans-serif; margin:0; padding:0 } /* centrare la pagina web a larghezza fissa */ body { text-align:center } #testa { width:100%; height: 15%; margin:1em auto; text-align:left } #corpo { width:800px; height: 60%; margin:1em auto; text-align:left } #piedipagina { width:100%; height: 10%; margin:1em auto; text-align:left } /* testa */ #testa { background:#ccc; border:0px solid #000; } /* corpo */ #corpo { position:relative; background:#f0f0f0; border:1px solid #000; } /*pie' di pagina */ #piedipagina { background:#ddd; border:0px solid #000; }

l'altro esempio.html contenente

Codice: Seleziona tutto: <html><head><title>esempio</title> <link rel="stylesheet" type="text/css" href="stlile.css"> </head> <body> <div id="testa"> </div> <div id="corpo"> </div> <div id="piedipagina"> </div> </body></html>

dovrebbe funzionare.. ovviamente il file stile.css deve essere nella stessa cartella dell'esempio altrimenti devi modificare questa riga col percorso esatto

<link rel="stylesheet" type="text/css" href="stlile.css">

da **zenith** » mar giu 17, 2008 10:40 am

Accidenti a me... funziona! [applauso+]

Grazie siete preziosi come al solito! [^]

www.MegaLab.it

DIV head: larghezza uguale alla finestra del browser?

DIV head: larghezza uguale alla finestra del browser?

Chi c’è in linea