css e layout a due colonne

**ciro78** · 09-08-2003, 16:07

sto rifacendo il mio sito che ,con le tabelle,aveva una struttura a due colonne.Per essere precisi a sinistra testo e a destra foto.

In maniera semplice come posso fare con i css?

**Pasco** · 09-08-2003, 16:48

ci sono svariati metodi , te ne scrivo uno :

CSS:

#sinistra { width: 20%; background: #000; text-align:center; padding:50px; height:100%; }

#destra { width: 80%; float:left; background: #333; text-align:center; padding:50px; height:100%; }

XHTML:

<body>
<div id="sinistra">Sinistra</div>
<div id="destra">Destra</div>
</body>

**ciro78** · 09-08-2003, 17:41

grazie

**ciro78** · 09-08-2003, 17:59

non mi funziona tanto bene

io devo inserire 4 oggetti

come se fossero iinseriti in una tabella 2*2

_________________________________

ogg1 | ogg2
__________________________________

3 |4
__________________________________

**Pasco** · 09-08-2003, 20:52

non ho ben capito

prova con questo:

<style type="text/css" >
p { padding:50px; }

#sinistra { float:left; background: #000; text-align:center; width:20%; color:#CCC;}
#destra { float:left; background: #333; text-align:center; width:80%; color:#CCC;}

</style>
</head>
<body>
<div id="sinistra">

Sinistra</p></div>
<div id="destra">

Destra</p></div>
</body>

**ciro78** · 09-08-2003, 22:54

ciao io ho eliminato il padding ma funziona lo stesso

mi potresti spiegare bene la storia del float come funziopna

**Shores** · 09-08-2003, 23:33

Attenzione: se quello che devi fare è un layout che usa una tabella, ovvero le due celle della prima riga devono essere sempre grandi come le due della seconda riga, allora USA UNA TABELLA.

L'intento di voler fare un layout tableless, cosa che ti fa onore, non va preso come un ostracismo completo al tag TABLE: semplicemente esso non va usato nel modo becero ed esagerato con cui veniva usato in passato, per esempio per lo slicing delle immagini.

Detto questo, se invece vuoi usare le div, procedi in questo modo.

Devi ragionare a contenitori rettangolari; il body è il primo, all'interno del quale inserisci le varie div, all'interno delle quali puoi inserire altre div ancora.

Il float funziona così: se dici float:left; quello che succede è che la div a cui l'hai assegnato si appoggia all'estrema sinistra dell'area interna della div in cui è contenuta, fatte salve altre div che prima di lei di fossero già appoggiate a sinistra.

Quando vuoi appoggiare qualcosa a sinistra, ma vuoi che sia a capo, e quindi risulti di nuovo appoggiato all'estrema sinistra, e non all'ultimo div appoggiato a sinistra, devi usare oltre alla float:left; anche la clear:left;.

Un esempio per chiarire:

codice:

<body>
	<div style="witdh:20%; float:left;">
		<div style="float:left; width:100%;">
			ogg1
		</div>
		<div style="clear:left; float:left; width:100%;">
			3
		</div>
	</div>
	<div style="witdh:80%; float:left;">
		<div style="float:left; width:100%;">
			ogg2
		</div>
		<div style="clear:left; float:left; width:100%;">
			4
		</div>
	</div>
</body>

Produce un layout come quello che tu hai postato, se ho capito bene il tuo disegno...

**ciro78** · 10-08-2003, 10:05

beh in effetti ora ho capitra ma,mi lascia perplesso il fatto che tu mi consigli le tabelle.Io prima avevo 3 righe *2 colonne ora sto cercando di realizzare il tutto con i css inquant credo,che il validatore non accetti la pagina...
fammi sapere

**Pasco** · 10-08-2003, 10:43

con i CSS è possibile fare tutto quello che facevi con le tabelle , bisogna avere solo un pochino di esperienza nel relizzare i posizionamenti , una volta che capisci i 3-posizionamenti fondamentali e la differenza tra inline e block potrai finalmente dire addio alle tabelle

,

resto cmq dello stesso parere di shores , le tabelle non vanno eliminate del tutto ma usate con più criterio...

se mi passi un esempio HTML con le tabelle ti dimostro come è possibile realizzare la stessa cosa ma con i posizionamenti CSS2

codice:

<body>
        <div style="witdh:20%; float:left; background: #999; ">
                <div style=" padding: 5px; ">
                        ogg1
                </div>
                <div style=" padding: 5px; ">
                        3
                </div>
        </div>
        <div style="witdh:80%; float:left; background: #777; ">
                <div style=" padding: 5px; ">
                        ogg2
                </div>
                <div style=" padding: 5px; ">
                        4
                </div>
        </div>
</body

anche questo produce lo stesso risultato

**Shores** · 10-08-2003, 11:09

Originariamente inviato da ciro78
beh in effetti ora ho capitra ma,mi lascia perplesso il fatto che tu mi consigli le tabelle.Io prima avevo 3 righe *2 colonne ora sto cercando di realizzare il tutto con i css inquant credo,che il validatore non accetti la pagina...
fammi sapere

Attenzione, i tag TABLE sono VALIDISSIMI, anche addirittura in XHTML...

Non pensare che TABLE=roba che non si valida, non è affatto così.

Ti faccio un esempio: usare UNA table nell'intera pagina è una cosa che non da nessun problema, usare una decina di tabelle annidate una dentro l'altra come fa questo forum su cui scriviamo, è invece una cosa inutilmente pesante, e da evitarsi; il che non toglie che probabilmente, a parte alcuni errori da poco, questa pagina su cui scriviamo si validerebbe eccome...

(Ps: pasco, avevo scritto così, pur sapendo che non era necessario, per fargli capire il senso del clear...)

Discussione: css e layout a due colonne

Strumenti discussione

Ricerca discussione

Visualizza

css e layout a due colonne

Permessi di invio