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

Impostare un CSS per riempire una pagina

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.

Impostare un CSS per riempire una pagina

Messaggioda Fred » lun lug 23, 2007 2:48 pm

Salve a tutti, so di non essere stato chiaro nel titolo perciò ora mi spiegherò meglio. Io avrei bisogno di creare un css con degli spazi di dimensione definita ai lati ed un corpo centrale che vari la sua dimensione per riempire totalmente il monitor di chi visita il mio sito. Possibilmente vorrei che se il visitatore avesse un monitor troppo piccolo per visualizzare tutti insieme il corpo centrale avesse una barra di scorrimento laterale ed una verticale. Credo che si possa fare tutto con i css ma non ho la minima idea di come fare. Qualcuno può aiutarmi? Grazie.
Asus M3N78SE;AMD Athlon 64X2 5200+@5400;2 GB DDR2;NVIDIA GeForce 9500GT;Windows 7 Pro 64bit;
AcerASPIRE5230;Windows 7 Pro 64bit
Skype: nellopc90
Avatar utente
Fred
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3623
Iscritto il: mer apr 27, 2005 4:13 pm
Località: Urbe

Re: Impostare un CSS per riempire una pagina

Messaggioda eDog » lun lug 23, 2007 3:39 pm

Fred ha scritto:Possibilmente vorrei che se il visitatore avesse un monitor troppo piccolo per visualizzare tutti insieme il corpo centrale avesse una barra di scorrimento laterale ed una verticale.


questo succede senza modificare niente...
eDog,
"È meglio essere temuti o rispettati? Io dico: è troppo chiedere entrambe le cose?" - Tony Stark
Avatar utente
eDog
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3679
Iscritto il: sab dic 30, 2006 7:58 pm
Località: Vescovana (Padova)

Messaggioda M@ttia » lun lug 23, 2007 3:43 pm

Sommariamente, devi fare una cosa del tipo:

CSS:
Codice: Seleziona tutto
#Sinistro
{
   float:   left;
   margin:  0 0 0 0; // al limite staccalo un po' dal margine per un "box"
   width:   111px; // Larghezza della "colonna"
}

#Destro
{
   display: inline; /* IE ora non raddoppia il margin right */
   float:   right;
   margin:  0 10px 0 0; // Qui ad es. un po' staccato dal bordo
   width:   220px;
}

#Centrale
{
   margin:  0 240px 0 115px; // i valori sopra, più un po' di spazio vuoto
}



HTML:
Codice: Seleziona tutto
<div id="Sinistro">COLONNA DI SINISTRA</id>
<div id="Destro"  >COLONNA DI DESTRA</id>
<div id="Centrale">COLONNONA AL CENTRO</id>

In più puoi specificare una "minwidth" alla colonnona centrale oltre la quale non si restringe, ma fa apparire la barra di scorrimento (per quelle verticali invece è ovviamente automatico).

Il codice di questo es. l'ho scritto per il mio sito su http://bergomi.altervista.org (non è per far pubblicità, ma almeno vedi l'esempio renderizzato) (anzi, facciamo anche un po' di pubblicità vah [^]).

[std]
</IE><FIREFOX>
Avatar utente
M@ttia
Moderatore
Moderatore
 
Messaggi: 8363
Iscritto il: lun giu 09, 2003 2:18 pm
Località: Ticino - Estero


Messaggioda Fred » lun lug 23, 2007 8:12 pm

Quindi, giusto per vedere se ho capito come devo ragionare, anziché impostare la larghezza e l'altezza scrivo a quanti px deve stare dal bordo e le barre di scorrimento compaiono automaticamente sia orizzontalmente che verticalmente. Giusto?
Asus M3N78SE;AMD Athlon 64X2 5200+@5400;2 GB DDR2;NVIDIA GeForce 9500GT;Windows 7 Pro 64bit;
AcerASPIRE5230;Windows 7 Pro 64bit
Skype: nellopc90
Avatar utente
Fred
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3623
Iscritto il: mer apr 27, 2005 4:13 pm
Località: Urbe

Messaggioda M@ttia » lun lug 23, 2007 9:47 pm

Le barre di scorrimento verticali e l'altezza lasciale stare, fa da solo (una colonna non ha altezza, mentre i div sono alti per contenere il contenuto).

Specifichi la larghezza delle due colonne laterali, ed ev. uno spazio dal bordo, poi la colonna centrale si espande a riempire il 100% del rimanente, dinamicamente se ridimensioni il browser, inoltre se metti minwidth, oltre un certo tot. non rimpicciolisce, ma esce la barra orizzontale... (comunque prova il codice sopra e sperimenta che non muore nessuno! [^]).
</IE><FIREFOX>
Avatar utente
M@ttia
Moderatore
Moderatore
 
Messaggi: 8363
Iscritto il: lun giu 09, 2003 2:18 pm
Località: Ticino - Estero

Messaggioda Fred » mar lug 24, 2007 3:18 pm

Ho provato il primo codice (il css) e ti comunico che c'è qualche cosa di sbagliato nella versione HTML del codice, tu hai scritto:
<div id="Sinistro">COLONNA DI SINISTRA</id>
<div id="Destro" >COLONNA DI DESTRA</id>
<div id="Centrale">COLONNONA AL CENTRO</id>

ed a me non funziona; io per farlo funzionare devo scrivere:
Codice: Seleziona tutto
<div id="Sinistro">COLONNA DI SINISTRA</div>
<div id="Destro"  >COLONNA DI DESTRA</div>
<div id="Centrale">COLONNONA AL CENTRO</div>

poi mi sono scordato di chiederti come si imposta la minwidth, anzi, dove si imposta.
Asus M3N78SE;AMD Athlon 64X2 5200+@5400;2 GB DDR2;NVIDIA GeForce 9500GT;Windows 7 Pro 64bit;
AcerASPIRE5230;Windows 7 Pro 64bit
Skype: nellopc90
Avatar utente
Fred
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3623
Iscritto il: mer apr 27, 2005 4:13 pm
Località: Urbe

Messaggioda M@ttia » mar lug 24, 2007 5:16 pm

Allora, per quanto riguarda il </div> anziché </id> è ovviamente giusto (nello scriverlo mi sono confuso, id ê un parametro di div, quindi va chiuso div ovviamente).

Per quanto riguarda il minwidth, seguendo il CSS sopra fai:

Codice: Seleziona tutto
#Centrale
{
   margin:  0 240px 0 115px; // i valori sopra, più un po' di spazio
   min-width: 500px; // Oltre questa ci sono le barre
}
</IE><FIREFOX>
Avatar utente
M@ttia
Moderatore
Moderatore
 
Messaggi: 8363
Iscritto il: lun giu 09, 2003 2:18 pm
Località: Ticino - Estero

Messaggioda ssjx » mer lug 25, 2007 6:16 pm

Non ho letto attentamente tutta la discussione, comunque usando min-width avrai un problema.... IE (non so nell'ultima versione) non vedrà quell'attributo...

per risolvere dovrai usare una piccola scappatoia... ovvero inserire nella tua pagina HTML questo piccolo codice

Codice: Seleziona tutto
<!--[if gte IE 5.5]>
<style type="text/css">
#Centrale{ width: expression(document.body.clientWidth<=500 ? "500px" : "auto")}
</style>
<![endif]
Usavo IE e mi lamentavo... usavo Mozilla e mi lamentavo, decisamente meno ma mi lamentavo, ... poi ho trovato Opera e fu amore a prima vista
Avatar utente
ssjx
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 5756
Iscritto il: ven nov 26, 2004 3:37 pm
Località: Barcellona

Messaggioda Fred » mer lug 25, 2007 7:51 pm

E se volessi mettere dei box per le immagini nel css, esattamente nella colonna centrale (una a destra ed una a sinistra) come dovrei fare? Le immagini sono 200*150 px.
Asus M3N78SE;AMD Athlon 64X2 5200+@5400;2 GB DDR2;NVIDIA GeForce 9500GT;Windows 7 Pro 64bit;
AcerASPIRE5230;Windows 7 Pro 64bit
Skype: nellopc90
Avatar utente
Fred
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3623
Iscritto il: mer apr 27, 2005 4:13 pm
Località: Urbe

Messaggioda Fred » gio lug 26, 2007 8:07 pm

Nessuno sa come aiutarmi? [cry]
In ogni evenienza rispiego meglio il mio problema:
Ora che ho creato la "base" del mio sito dovrei dargli un po' di vitalità, per farlo avrei bisogno di aggiungere nella colonna centrale (quella che si restringe) 2 box per le immagini con dimensioni 200*150. Questo di per se non è complicato, il problema sorge quando devono stare all'interno della colonna centrale e quindi devo imporre che i margini in base ai quali si deve posizionare devono essere rispetto alla colonna centrale (ad es.: quello di sx a 10px dal margine sinistro della colonna e quello di dx a 20px dal margine di dx).
Per favore rispondetemi presto. Grazie a tutti.
Asus M3N78SE;AMD Athlon 64X2 5200+@5400;2 GB DDR2;NVIDIA GeForce 9500GT;Windows 7 Pro 64bit;
AcerASPIRE5230;Windows 7 Pro 64bit
Skype: nellopc90
Avatar utente
Fred
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3623
Iscritto il: mer apr 27, 2005 4:13 pm
Località: Urbe

Messaggioda Fred » gio ago 02, 2007 9:42 pm

ok, questo l'ho risolto da solo... ora ho un altro problema: non riesco ad impostare uno sfondo per tutta la pagina, ho provato a creare un altro elemento con queste impostazioni:
Codice: Seleziona tutto
#Body
{
width: 100%;
height: 100%;
background color:#666666;
z-index:1
}

impostando z-index superiori a tutti gli altri elementi.
Ma niente, l'elemento non si adeguava all'altezza.
Allora ho fatto in modo che l'altezza complessiva della pagina sia 1000px ed ho provato a ragionare così:
Codice: Seleziona tutto
#Body
{
width: 100%;
height: 1000px;
background color:#666666;
z-index:1
}

Questa volta il problema è stato che gli elementi non si "accavallavano" ma si ponevano l'uno sotto all'altro.
Qualcuno ha una qualche soluzione alternativa?
Asus M3N78SE;AMD Athlon 64X2 5200+@5400;2 GB DDR2;NVIDIA GeForce 9500GT;Windows 7 Pro 64bit;
AcerASPIRE5230;Windows 7 Pro 64bit
Skype: nellopc90
Avatar utente
Fred
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3623
Iscritto il: mer apr 27, 2005 4:13 pm
Località: Urbe

Messaggioda eDog » ven ago 03, 2007 12:18 pm

Codice: Seleziona tutto
#Body {
background-color: #666666;

}
eDog,
"È meglio essere temuti o rispettati? Io dico: è troppo chiedere entrambe le cose?" - Tony Stark
Avatar utente
eDog
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3679
Iscritto il: sab dic 30, 2006 7:58 pm
Località: Vescovana (Padova)

Messaggioda Fred » sab ago 04, 2007 4:13 pm

No, non va...
Asus M3N78SE;AMD Athlon 64X2 5200+@5400;2 GB DDR2;NVIDIA GeForce 9500GT;Windows 7 Pro 64bit;
AcerASPIRE5230;Windows 7 Pro 64bit
Skype: nellopc90
Avatar utente
Fred
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3623
Iscritto il: mer apr 27, 2005 4:13 pm
Località: Urbe

Messaggioda Fred » ven set 14, 2007 12:39 pm

Acc, mi ero totalmente scordato di questa discussione [acc2] . In ogni caso ho risolto così: nel campo head:
Codice: Seleziona tutto
<body bg color="######">
Asus M3N78SE;AMD Athlon 64X2 5200+@5400;2 GB DDR2;NVIDIA GeForce 9500GT;Windows 7 Pro 64bit;
AcerASPIRE5230;Windows 7 Pro 64bit
Skype: nellopc90
Avatar utente
Fred
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 3623
Iscritto il: mer apr 27, 2005 4:13 pm
Località: Urbe


Torna a Sviluppo Web

Chi c’è in linea

Visitano il forum: Nessuno e 0 ospiti

cron
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