Layout 3 colonne inusuale

**Miroku** · 06-03-2009, 01:06

Ciao a tutti,
sto cercando di creare un semplicissimo box contentente tre semplicissime colonne dove però quella centrale sia di dimensione fissa e le altre due di dimensione in percentuale (a me servirebbero di stessa grandezza).

Ho guardato i link all'inizio del forum e ho trovato layout a 3 colonne di tutte le paste: con una colonna fissa, con due colonne esterne fisse, tutte le colonne fisse, tutte le colonne dinamiche... ma non l'esempio quello che cerco io u_u

qualcuno potrebbe darmi una mano? =)

**Mich_** · 06-03-2009, 10:11

Ecco una possibile soluzione.
Non e` molto bella dal punto di vista semantico, dato che ha necesita` di marcatura aggiuntiva.
E fa uso di posizionamenti assoluti, per cui va usata con cautela (se direttamente nel body non ci dovrebbero essere problemi).

codice:

HTML:
<body>
  <div id="contSx">
    <div id="boxSx"> ... </div>
  </div>  
  <div id="boxCen"> ... </div>
  <div id="contDx">
    <div id="boxDx"> ... </div>
  </div>  
</body>

CSS:
html, body {
  width: 100%;
}
#contSx {
  position: absolute;
  top: 0;
  left: 0;
  width: 49.9%;
}
#contDx {
  position: absolute;
  top: 0;
  right: 0;
  width: 49.9%;
}
#boxCen {
  position: absolute;
  width: XXpx;           /* definisci la larghezza */
  top: 0;
  left: 50%;
  margin-left: -XXXpx;  /* meno meta` di XX */
}
#boxSx {
  position: absolute;
  top: 0;
  left: 0;
  margin-right: XXXpx;  /* meta` di XX */
}
#boxDx {
  position: absolute;
  top: 0;
  right: 0;
  margin-left: XXXpx;  /* meta` di XX */
}

**Miroku** · 06-03-2009, 15:02

Grazie mille, funziona alla perfezione *___*

EDIT: ugh mi sono accorto di una cosa: non funziona più nessun link, nessun menu a tendina del sito °_°
se ci passi sopra o ci clicchi non succede nulla di nulla .___.
guarda qui per verificare: http://www.phyrosia.com/cose/SCPfansite/

**Miroku** · 07-03-2009, 14:27

uh, dimenticavo di dire che il metodo a tre colonne lo utilizzo nell'header.

**Mich_** · 09-03-2009, 10:54

Ci sono un po' di errori in quella pagina ...

1. Lo script non puo` stare nella pagina HTML (stai usando XHTML Strict, non una transitional qualsiasi!!)
2. Usi commenti condizionali innestati. Non credo si possa fare
3. Ci sono troppi innestamenti doppi: e` un errore semantico, ma potrebbe portare facilmente ad errori di impostazione dei CSS
4. L'attributo align non fa parte della DTD usata

Inoltre stai usando i posizionamenti in modo errato. Io avevo specificato "se direttamente nel body non ci dovrebbero essere problemi", mentre tu lo hai messo dentro un blocco non posizionato: questo non si puo` fare.
Vedi questi articoli, ma se non li capisci, devi approfondire l'argomento sui manuali completi:
I posizionamenti assoluti
Capire i posizionamenti relativi

**Miroku** · 09-03-2009, 15:45

Originariamente inviato da Mich_
1. Lo script non puo` stare nella pagina HTML (stai usando XHTML Strict, non una transitional qualsiasi!!)

Intendi il JavaScript?

Originariamente inviato da Mich_
2. Usi commenti condizionali innestati. Non credo si possa fare

Questa parte l'ho copiata da un tutorial per aggiustare il position:static consigliato proprio da html.it, quindi l'ho preso per giusto.

Originariamente inviato da Mich_
3. Ci sono troppi innestamenti doppi: e` un errore semantico, ma potrebbe portare facilmente ad errori di impostazione dei CSS

Cosa intendi per "innestamenti doppi"?
Cose di questo tipo?

codice:

<div id="box1">
  <div id="box2">
    <div id="box3"></div>
  </div>
</div>

Originariamente inviato da Mich_
4. L'attributo align non fa parte della DTD usata

Non mi risulta di aver usato attributi align .___.

Originariamente inviato da Mich_
Inoltre stai usando i posizionamenti in modo errato. Io avevo specificato "se direttamente nel body non ci dovrebbero essere problemi", mentre tu lo hai messo dentro un blocco non posizionato: questo non si puo` fare.

Ah cavolo, non avevo capito bene ^^;;;

Cmq ho semplicemente tolto il box che racchiudeva il tutto e ora funziona.

Grazie mille per la pazienza.

Discussione: Layout 3 colonne inusuale

Strumenti discussione

Ricerca discussione

Visualizza

Layout 3 colonne inusuale

Permessi di invio