Punto informatico Network
Login Esegui login | Non sei registrato? Iscriviti ora (è gratuito!)
Username: Password:
  • Annuncio Pubblicitario

DIV head: larghezza uguale alla finestra del browser?

Cerchi consigli per migliorare il tuo sito? Vuoi aprire un sito in poco tempo?
Discuti con altri webmaster, chiedi chiarimenti ed opinioni in tutta libertà.
Lo spam verrà cancellato.

DIV head: larghezza uguale alla finestra del browser?

Messaggioda 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.
«Our philosophy at “New Scientist” is this: science is interesting, and if you don’t agree you can fu** off.»
Avatar utente
zenith
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 2778
Iscritto il: lun ago 13, 2007 3:31 pm
Località: Mola di Bari

Messaggioda 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
alla fine... ogni uomo considera i limiti della propria visione personale come i limiti del mondo...
Avatar utente
Pacopas
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 6708
Iscritto il: mer ott 05, 2005 12:44 am

Messaggioda bluesummer » dom giu 15, 2008 5:28 pm

Se l'immagine viene associata alla proprietà "background-image" non è necessario utilizzare l'overflow :)
Avatar utente
bluesummer
Aficionado
Aficionado
 
Messaggi: 104
Iscritto il: lun mag 19, 2008 12:47 pm


Messaggioda 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]
alla fine... ogni uomo considera i limiti della propria visione personale come i limiti del mondo...
Avatar utente
Pacopas
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 6708
Iscritto il: mer ott 05, 2005 12:44 am

Messaggioda 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;
}
«Our philosophy at “New Scientist” is this: science is interesting, and if you don’t agree you can fu** off.»
Avatar utente
zenith
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 2778
Iscritto il: lun ago 13, 2007 3:31 pm
Località: Mola di Bari

Messaggioda 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">
<!--
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>
alla fine... ogni uomo considera i limiti della propria visione personale come i limiti del mondo...
Avatar utente
Pacopas
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 6708
Iscritto il: mer ott 05, 2005 12:44 am

Messaggioda 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! [;)]


[8D]
«Our philosophy at “New Scientist” is this: science is interesting, and if you don’t agree you can fu** off.»
Avatar utente
zenith
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 2778
Iscritto il: lun ago 13, 2007 3:31 pm
Località: Mola di Bari

Messaggioda 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">
alla fine... ogni uomo considera i limiti della propria visione personale come i limiti del mondo...
Avatar utente
Pacopas
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 6708
Iscritto il: mer ott 05, 2005 12:44 am

Messaggioda zenith » mar giu 17, 2008 10:40 am

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

Grazie siete preziosi come al solito! [^]
«Our philosophy at “New Scientist” is this: science is interesting, and if you don’t agree you can fu** off.»
Avatar utente
zenith
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 2778
Iscritto il: lun ago 13, 2007 3:31 pm
Località: Mola di Bari


Torna a Sviluppo Web

Chi c’è in linea

Visitano il forum: Nessuno e 18 ospiti

Powered by phpBB © 2002, 2005, 2007, 2008 phpBB Group
Traduzione Italiana phpBB.it

megalab.it: testata telematica quotidiana registrata al Tribunale di Cosenza n. 22/09 del 13.08.2009, editore Master New Media S.r.l.; © Copyright 2008 Master New Media S.r.l. a socio unico - P.I. 02947530784. GRUPPO EDIZIONI MASTER Spa Tutti i diritti sono riservati. Per la pubblicità: Master Advertising