Layout tre colonne...

[fmortara]

Salve a tutti!

se in layout a tre colonne con due float left e right, e il corpo centrale, come faccio a fare in modo che se una delle colonne laterali manca, il corpo centrale ne occupi lo spazio?

[fmortara]

nessuno?

[Mich_]

Che significa "manca"?

Se hai una pagina con tre oggetti, non e` possibile che diventino due.

Forse stai pensando ad un CMS (o simile) che monta la pagina a seconda delle circostanze?
E/o forse stai pensando che in un sito ci possono essere alcune pagine con tre colonne, ed altre con due, e vorresti formattarle tutte con lo stesso CSS?
O forse stai pensando a qualcosa altro?

Per tutti i casi c'e` risposta, ma non c'e` una risposta unica per tutti. E in questi casi la risposta dipende in misura pesante dalla situazione al controno (compreso la tua capacita` di programmare lato server).

[fmortara]

si, infatti...

in pratica ho un 3 colonne left body e right.

a volte potrei non aver nessun contenuto in right e quindi non lo carico lato php. Vorrei però evitare di fare dei controlli per cambiare la classe al div centrale. invece preferirei se esiste qualche sistema che assegni al div la larghezza che mi serve senza cambiare nulla lato codice html.

ma temo di capire che non si possa fare.

il layout al momento è con i div laterali float a left e right e subito dopo carico il body con i margin 0 auto e larghezza per lo spazio rimanente.

[LuigiMem]

non so se ho capito bene...ti suggerisco una possibile soluzione

potresti impostare la larghezza del div "body" dinamicamente nel senso che inserisci nello stile una cosa tipo:

<div id="body" style="width:<?php echo $wid ?>">Contenuto</div>

metti un bel IF a inizio pagina e se non c'è il div RIGHT cambi dinamicamente il valore $wid

se la misura è fissa non dovrebbe essere difficile!

fammi sapere ciao!


OPS: Non mi ero convinto di essere nella sezione PHP!!

scusami con non detto!!

[Mich_]

Ci sono alcuni trucchi, ma credo che se programmi in PHP una soluzione tipo quella prospettata da Luigi puo` essere la piu` semplice da implementare.
Comunque queste informazioni le puoi ricavare dai siti dove ci sono i layout pronti: alcuni sono citati nei "link utili", altri li trovi mediante ricerca in rete.

Nota che la tecnica di Luigi va raffinata un attimo, e soprattutto adattata alle tue condizioni.
Chiaramente un margin: 0 auto; non ha senso se le due colonne laterali non sono di larghezza uguale; e tantomeno se c'e` una sola colonna.

Supponendo che le due colonne siano di larghezza fissa e di 200px a sin e 300px a dx, con la colonna centrale che si adatta, potresti avere:

NORMALMENTE (nel CSS):
margin 0 300px 0 200px;

mentre QUANDO MANCA la destra potresti ridefinire (anche in maniera inline, come propone Luigi)
margin-right: 0;

[fmortara]

Originariamente inviato da LuigiMem
non so se ho capito bene...ti suggerisco una possibile soluzione

potresti impostare la larghezza del div "body" dinamicamente nel senso che inserisci nello stile una cosa tipo:

<div id="body" style="width:<?php echo $wid ?>">Contenuto</div>

metti un bel IF a inizio pagina e se non c'è il div RIGHT cambi dinamicamente il valore $wid

se la misura è fissa non dovrebbe essere difficile!

fammi sapere ciao!


OPS: Non mi ero convinto di essere nella sezione PHP!!

scusami con non detto!!

Originariamente inviato da Mich_
Ci sono alcuni trucchi, ma credo che se programmi in PHP una soluzione tipo quella prospettata da Luigi puo` essere la piu` semplice da implementare.
Comunque queste informazioni le puoi ricavare dai siti dove ci sono i layout pronti: alcuni sono citati nei "link utili", altri li trovi mediante ricerca in rete.

Nota che la tecnica di Luigi va raffinata un attimo, e soprattutto adattata alle tue condizioni.
Chiaramente un margin: 0 auto; non ha senso se le due colonne laterali non sono di larghezza uguale; e tantomeno se c'e` una sola colonna.

Supponendo che le due colonne siano di larghezza fissa e di 200px a sin e 300px a dx, con la colonna centrale che si adatta, potresti avere:

NORMALMENTE (nel CSS):
margin 0 300px 0 200px;

mentre QUANDO MANCA la destra potresti ridefinire (anche in maniera inline, come propone Luigi)
margin-right: 0;

Grazie ad entrambi...
ovviamente il metodo che mi suggerite è quello più semplice da adottare lato php, ma siccome sto sviluppando un sistema che consente la modifica dei template, volevo slegare questa opzione dal codice php.

Mich_ hai qualche link da suggerirmi senza che ne debba spulciare io decine? O qualche riga di codice da suggerire?

Il margin 0 auto implica che ovviamente le colonne sono uguali, altrimenti metterei il margin esplicitandolo, e toglierei il width alla colonna body.

[Mich_]

Originariamente inviato da fmortara
Grazie ad entrambi...
ovviamente il metodo che mi suggerite è quello più semplice da adottare lato php, ma siccome sto sviluppando un sistema che consente la modifica dei template, volevo slegare questa opzione dal codice php.

Intelligente questo ... (solo che non lo so fare in questo momento)

Mich_ hai qualche link da suggerirmi senza che ne debba spulciare io decine? O qualche riga di codice da suggerire?

Non ho nulla sottomano. Io inizierei a guardare tra i layout proposti se ce n'e` uno con la possibilita` di passare da 3 a 2 colonne. Oppure farei una ricerca tra gli articoli di HTML.it

Il margin 0 auto implica che ovviamente le colonne sono uguali, altrimenti metterei il margin esplicitandolo, e toglierei il width alla colonna body.

Ma ti porta a sovrapposizioni di elementi se la finestra e` stretta.
Per le prove che devi fare tu, iio eviterei gli automatismi e partirei da una situazione fissa.
Inoltre con auto non funziona se poi modifichi un margine in altro posto.

[fmortara]

Originariamente inviato da Mich_
Intelligente questo ... (solo che non lo so fare in questo momento)

Non ho nulla sottomano. Io inizierei a guardare tra i layout proposti se ce n'e` uno con la possibilita` di passare da 3 a 2 colonne. Oppure farei una ricerca tra gli articoli di HTML.it

Ma ti porta a sovrapposizioni di elementi se la finestra e` stretta.
Per le prove che devi fare tu, iio eviterei gli automatismi e partirei da una situazione fissa.
Inoltre con auto non funziona se poi modifichi un margine in altro posto.

Aggiungo che margin 0 auto, è stabilito nel template...
per cui cambiano il template con uno con le colonne diverse chiaramente il css sarebbe diverso.

ti faccio vedere come è la struttura del template, mi dici se secondo te è ok?

Uso un div content per contenere i float e il body in modo da non dover usare un clear alla fine.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>

<style type="text/css">
/* CSS */

/* reset */
html, body, table, tr, td, div, h1, h2, h3, h4, h5, h6, p, ul, ol, form, fieldset, img {margin:0; padding:0; border:0;}

* {font-family: verdana, arial; font-size:10px;}

/* general settings */
html {margin:0; border:0px solid #f00;}
body {margin:0; border:0px solid #f00;}

#container {width:990px; margin:0 auto;}
#content {height:auto; overflow:hidden;}
#header {height:auto; overflow:hidden;}
#top {height:auto; overflow:hidden;}
#left {float:left; width:180px;}
#right {float:right; width:180px;}
#body {border:1px solid #00f; width:620px; margin:0 auto;}
#bottom {height:auto; overflow:hidden;}
#footer {height:auto; overflow:hidden;}
</style>

</head>
<body>

<div id="container">

	<div id="header">		
	</div>
	
	
	<div id="top">
	</div>
	
	<div id="content">
		
		<div id="left">
		</div>
		
		<div id="right">
		</div>
		
		<div id="body">
		</div>
	
	</div>
	
	<div id="bottom">
	</div>

	<div id="footer">
	</div>

</div>

</body>
</html>

[Mich_]

Non mi piace avere due oggetti con lo stesso nome (body e #body): in qualche caso si potrebbero creare conflitti.

Per il resto il tuo e` un layout fisso: un po' troppo largo per i miei gusti (io tengo la finestra del browser larga circa 850 px, in modo da avere altre finestre visibili nello schermo (e con linux posso anche interagire con le finestre parzialmente coperte)).
Questo significa che c'e` sempre una barra di scorrimento orizzonatale, anche quando non e` necessaria

Nel tuo template non hai definito la larghezza di #header e #top: se per caso sono stretti, il float successivo (il #left nel tuo caso) potrebbe finire a destra del #top (e anche di #header in casi estremi). Credo convenga definire
width: 100%
(o anche qualcosa meno, se vuoi) in #header e #top

Altro errore: ti manca definire la dimensione di html e body: questo vuol dire che se la finestra e` piu` larga di 990px il sito viene allineato a sinistra: Trasforma html e body in:

html , body {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
}

Se puoi vuoi divertirti a veder cosa succede ai tuoi blocchi, da' colori diversi ai singoli blocchi: e` un esercizio molto utile a capire cosa succede in alcuni casi.

Il clear lo hai sostutiuto con l'overflow: e` una tecnica alternativa per "chiudere" i blocchi che contengono i float.