Pagina 1 di 1

DIV head: larghezza uguale alla finestra del browser?

MessaggioInviato: dom giu 15, 2008 3:49 pm
da zenith
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.

MessaggioInviato: dom giu 15, 2008 4:05 pm
da Pacopas
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

MessaggioInviato: dom giu 15, 2008 5:28 pm
da bluesummer
Se l'immagine viene associata alla proprietà "background-image" non è necessario utilizzare l'overflow :)

MessaggioInviato: dom giu 15, 2008 6:11 pm
da Pacopas
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]

MessaggioInviato: lun giu 16, 2008 8:21 am
da zenith
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;
}

MessaggioInviato: lun giu 16, 2008 11:57 am
da Pacopas
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">
<!--
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;
   
}
-->
</style></head><body>

<div id="testa">
   
</div>

<div id="corpo">
   
</div>

<div id="piedipagina">
   
</div>


</body></html>

MessaggioInviato: lun giu 16, 2008 3:43 pm
da zenith
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! [;)]


[8D]

MessaggioInviato: mar giu 17, 2008 2:03 am
da Pacopas
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">

MessaggioInviato: mar giu 17, 2008 10:40 am
da zenith
Accidenti a me... funziona! [applauso+] [applauso+] [applauso+] [applauso+]

Grazie siete preziosi come al solito! [^]