[CSS - XHTML] Problema 3 colonne

**ivanhalen** · 11-12-2004, 13:11

Salve,
Nell'ottica di realizzare un template CSS + XHTML da poter utilizzare come base per i miei prossimi siti ho approntato una pagina seguendo alcuni tutorial sparsi qua e là...

Sono giunto ad un problema che non riesco a superare: l'allineamento di 3 colonne...

I vari tutorial che trovo, per un verso o per un altro, non vanno bene: alcuni valgono per un layout liquido, a tutta pagina; altri invece hanno la limitazione che la colonna centrale deve essere sempre più lunga delle colonne laterali; altre ancora, per rendere il tutto compatibile con IE5 e 6, parlano di trucchi e stratagemmi a me incomprensibili...

Ho messo in rete la pagina "incriminata": http://www.ivanhalen.com/css/

Oltre al fatto che le colonne, nella loro parte superiore, non "toccano" l'header (rimane un fastidioso spazio bianco su Firefox, e "strano" su IE6 - mi è difficile descriverlo, ma potete vedere voi stessi!) e che, come dicevo, esse non sono allineate, ho scritto nella pagina stessa alcune cose che mi piacerebbe realizzare, ma nelle quali, provandoci, ho incontrato notevoli difficoltà...

In più nel footer, su IE, il margine superiore è leggermente più grande di quello inferiore: pecccchèèè?

Chi mi dà una mano a capirci di più?

Grassie!

**ivanhalen** · 12-12-2004, 13:39

ok, 9 visite e 0 risposte... mi viene il dubbio che non si possa proprio fare...
torno alle mie tabelle, va'...

**gizax** · 12-12-2004, 14:32

se ti può servire a qualcosa

http://atomsurfer.altervista.org/xht...s_floating.php

**Krek_Stealth** · 12-12-2004, 14:35

Tra le discussioni se cercavi forse trovavi la risposta cmq ti do il codice guarda un pò se risolve i tuoi problemi .. il piede mettilo tu che basta aggiungere un div ...

__________________

<html>
<head>
<title>::KREK_STEALTH:: :. 3 colonne .: </title>
<style type="text/css">
#corpo { width: 400; background-color: #ffff00}
#collsin {width: 100px; background-color: #ff0000; float: left}
#collcen {width: 200px; background-color: #00ff00; float: left}
#colldex {width: 100px; background-color: #0000ff; float: left}
</style>
</head>
<body>
<div id="corpo">
<div id="collsin">sinistra</div>
<div id="collcen">centro</div>
<div id="colldex">destra</div>
</div>
</body>
</html>
__________________

Per quanto riguarda il problema del margine bianco, non potendo vedere il default.css non so dirti il perchè...

Ciao ...

**Krek_Stealth** · 12-12-2004, 14:38

float: left
nella colonna di destra non sarebbe proprio indispensabile (in teoria) ... ma se su IE non lo metti ti salta tutto ... ciao

**gizax** · 12-12-2004, 14:40

beh non credo risolva il problema, dato che in questo modo diminuisce e/o aumenta le dimensioni dei box in base al testo che ci vado a mettere dentro.

**Krek_Stealth** · 12-12-2004, 14:40

???

**Krek_Stealth** · 12-12-2004, 14:48

Si ma basta mettere un immagine di sfondo ... io i box gli ho colorati solo per leggibilità al momento che visualizza la pagina ... se nel corpo centrale mette un immagine grigio-bianco-grigio ha risolto i suoi problemi con poco codice e poco peso per la pagina...

Cmq se hai una soluzione migliore

io sono qui per imparare

ciao

**ivanhalen** · 12-12-2004, 15:51

Grazie per l'interessamento, ragazzi...
il CSS originale è qui:

http://www.ivanhalen.com/css/default.css

La soluzione di Krek_Stealth:

codice:

...
<style type="text/css"> 
#corpo { width: 400; background-color: #ffff00} 
#collsin {width: 100px; background-color: #ff0000; float: left} 
#collcen {width: 200px; background-color: #00ff00; float: left} 
#colldex {width: 100px; background-color: #0000ff; float: left} 
</style> 
</head> 
<body> 
<div id="corpo"> 
<div id="collsin">sinistra</div> 
<div id="collcen">centro</div> 
<div id="colldex">destra</div>
...

l'ho già adottata (da me si chiamano #main, #main-left, #main-center e #main-right), forse non proprio nella stessa maniera, ma uno sguardo al codice vi renderà tutto più chiaro... le uniche differenze tra i due codici CSS si trovano sulla width della colonna centrale (nel mio non è specificata) e nel float della colonna destra (da me è settata a right; se la metto a left su IE sballa tutto)

In più non ho capito quella dell'immagine di sfondo... :master:

In ogni caso, continuo a sviluppare il template con le tabelle, che, checchè se ne dica, per quello che devo fare io al momento mi risultano più gestibili

, tentando di renderlo compatibile almeno con HTML 4.01...

Grazie ancora...

**Krek_Stealth** · 12-12-2004, 16:15

la tua e la mia soluzione non sono proprio uguali

cmq son contento per te che hai risolto ...

a non sapevo che la mia soluzione avesse un nome

Ciao

Discussione: [CSS - XHTML] Problema 3 colonne

Strumenti discussione

Ricerca discussione

Visualizza

[CSS - XHTML] Problema 3 colonne

Permessi di invio