Impostare un CSS per riempire una pagina

[Fred]

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.

[eDog]

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...

[M@ttia]

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 ).

[Fred]

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?

[M@ttia]

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! ).

[Fred]

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.

[M@ttia]

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
}

[ssjx]

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]

[Fred]

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.

[Fred]

Nessuno sa come aiutarmi?
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.

[Fred]

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?

[eDog]

Codice: Seleziona tutto

#Body {
background-color: #666666;

}

[Fred]

No, non va...

[Fred]

Acc, mi ero totalmente scordato di questa discussione . In ogni caso ho risolto così: nel campo head:

Codice: Seleziona tutto

<body bg color="######">