Problema layout fluido 2 colonne

**Balördög** · 12-03-2007, 19:19

Benritrovati.

Ho un grosso problema con un layout xhtml + css.

Il layout è a 2 colonne, con quella sinistra che contiente un immagine di dimensioni variabili (con un max di 300px di larghezza)

A destra c'è del testo, un paio di box e qualche link.

Il fatto è che la colonna di sinistra deve essere sempre sgombra sotto l'immagine, e quindi il layout si sposava alla perfezione con le tabelle, molto più difficile è sistemarla con i DIV.

(il margin-left alla colonna destra è ovviamente improponibile a causa della variabilità della dimensione della colonna di sinistra, idem per i dimensionamenti fissi)

Posto un'immagine esplicativa.

**Balördög** · 13-03-2007, 13:22

Uh, dove siete, detrattori e studiosi del layout table less.

**Mich_** · 13-03-2007, 13:29

la cosa e` stata trattata piu` volte ...

Devi semplicemente avere due blocchi: in uno ci metti l'immagine, nell'altro tutto il resto.
Poi ciascun blocco dovra` avere
float:left;
Il blocco a destra dovra` anche avere un
margin-left: 5px;

Riassumendo:

codice:

<body>
  <div id="margine">
    <img ... />
  </div>
  <div id="conten">
    ... qui tutto il tuo contenuto...
  </div>
</body>

Il CSS corrispondente dovra` esser del tipo:

codice:

body {
  width: 100%;
  font: ...;
}
#margine {
  float: left;
}
#conten {
  float: left;
  margin-left: 5px;
}

**Balördög** · 13-03-2007, 14:09

Purtroppo il tuo sbrigativo metodo non mi garantisce risultati ottimali nei diversi browsers.

Il box di destra, infatti, contiene una quantità viariabile di testo, spesso considerevole. Quando ciò avviene in FF il box "conten" va a capo, come mostro in immagine allegata:

**Mich_** · 13-03-2007, 15:46

MA hai del testo tutto in un'unica parola che eccede la larghezza a disposizione?
Perche` semmai e` quello che ti fa andare sotto il blocco che dovrebbe stare a destra.

**Balördög** · 13-03-2007, 16:06

Ci sono, come è ben visibile nel print screen allegato, tanti spazi a separare le parole. Il box che contiene il testo non ha proprietà associate, se non lo sfondo grigio atto a far vedere la sua posizione.

**Mich_** · 13-03-2007, 16:13

E` possibile vedere il link? Ho il sospetto di qualche errore da qualche parte.
Hai gia` validato la pagina rispetto al codice HTML e CSS?

**Balördög** · 13-03-2007, 16:41

Originariamente inviato da Mich_
E` possibile vedere il link? Ho il sospetto di qualche errore da qualche parte.
Hai gia` validato la pagina rispetto al codice HTML e CSS?

Sto sviluppando in locale. Il css è validissimo, l'html lo sto riguardando un attimo, presenta degli errori in alcuni form, roba che non centra coi nostri box incriminati.

Tipo che il tag "form" non ha l'attributo "name", quisquilie del genere.

**Balördög** · 13-03-2007, 17:35

Naturalmente cambiando il doctype a xhtml 1.0 schifo transizionale è completamente valido. L'1.1 da problemi appunto su attributi come il "name" dell'anchor o dei form (perchè l'han tolto poi?).

Valido quindi l'xhtml e valido il css ma il problema posto in precedenza rimane, identico.

**Mich_** · 13-03-2007, 17:47

Anzitutto se usi XHTML 1.1 non puoi sistemare sia per IE6 che per gli altri browser. Quindi conviene evitarlo ancora per un po'.
La scelta migliore consigliabile per avere una cosa cross-browser e` XHTML 1.0 Strict senza prologo XML.

Il name e` stato tolto dai tag in cui non serviva, allo scopo di semplificare la sintassi (e la vita al browser, che potrebbe avere capacita` limitate).
Anche altri tag e attributi sono stati tolti, quando il loro uso mescolava contenuto e formattazione.

Per il resto no so che dirti. Dovrei vedere il codice HTML e CSS, per poterci (forse) capire qualcosa.

Discussione: Problema layout fluido 2 colonne

Strumenti discussione

Ricerca discussione

Visualizza

Problema layout fluido 2 colonne

Permessi di invio