[css] problema in un layout a due col. con posizionamento assoluto

[Marteueh]

Ciao a tutti
Premetto che sono un neofita dei css, ma seguendo una guida di html.it ho realizzato un layout a due colonne con posizionamento assoluto. Io vorrei inserire nell'id=content un nuovo div con immagine e testo. Ho inserito il seguente codice html:

<div class="xyz">
[img]../images/xyz.jpg[/img]


testo </p>
<div class="clearer"></div>

e il seguente css:

div#content{margin-right 220px; height: 400px; background:#FFFFFF;}
div.xyz { width: 500px; height: 200px; background:#FF9900; text-align:center; margin-top:25px; border:: 1px solid #000000;}
div.xyz img{ float:left;}
div.clearer {clear:left;}

in ie tutto ok, ma in ff l'immagine non si stacca dal bordo del "content" ma crea uno spazio tra header e content.
Spero di essere stato chiaro!
Attendo suggerimenti

[laycg]

No, non sei stato molto chiaro.
Se ho capito bene devi staccare di 25px l'immagine inserita nel content dal top del content stesso.

Se è così togli margin-top da div.xyz e metti padding-top su div.content.

Se non è così prova a chiarire meglio la questione postando anche la posizione del div.content.

[Sgro]

Allora, analizziamo bene la situazione. Innanzitutto c'è un errore nell'html in quanto il div più esterno (classe xyz) non è chiuso.

Poi non è ben chiaro quello che vuoi ottenre.. ti consiglio innanzitutto per i layout a colonne con i div di non utilizzare le proprietà margin, ma bensì i posizionamenti assoluti.

Esempio:

<div id="colonnasx"></div>
<div id="colonnadx"></div>

E i seguenti selettori CSS

#colonnasx
{
position : absolute;
width : 200px;
}

#colonnadx
{
position : absolute;
left : 200px;
right : 0;
}

Ovviamente se poi vuoi distanziare gli elementi fra di loro, aggiungere bordi, ecc. dovrai regolare le misure di conseguenza.

Se provi a spiegare in maniera più chiara quel che vuoi ottenere, provo a darti una mano.

Ciao

[Mich_]

Attenzione che i posizionamenti assoluti creano molti problemi e sono molto difficili da gestire.
Falliscono in particolare:
- quando il layout e` fluido
- quando non si conosce la larghezza o altezza dei blocchi
- quando il browser dell'utente forza un carattere piu` grande di quanto ha previsto il progrmmatore (ormai tutti i borwer permettono di ingrandire i font).

La cosa migliore e` NON USARE i posizionamenti, per lo meno finche` non si e` molto ferrati con i CSS.

In linea di massima risulta piu` semplice usare i float per affinacare i blocchi. L'unica accortezza: ricordarsi di "chiudere" la serie dei float con un blocco che contiene il clear; in alternativa usare tutti i blocchi float (compreso i contenitori).

[Sgro]

Originariamente inviato da Mich_
Attenzione che i posizionamenti assoluti creano molti problemi e sono molto difficili da gestire.
Falliscono in particolare:
- quando il layout e` fluido
- quando non si conosce la larghezza o altezza dei blocchi
- quando il browser dell'utente forza un carattere piu` grande di quanto ha previsto il progrmmatore (ormai tutti i borwer permettono di ingrandire i font).

La cosa migliore e` NON USARE i posizionamenti, per lo meno finche` non si e` molto ferrati con i CSS.

In linea di massima risulta piu` semplice usare i float per affinacare i blocchi. L'unica accortezza: ricordarsi di "chiudere" la serie dei float con un blocco che contiene il clear; in alternativa usare tutti i blocchi float (compreso i contenitori).

Allora, permettimi, hai scritto una serie di cose assolutamente NON VERE. Il layout di esempio che ho postato si scala automaticamente alla dimensione del carattere dell'utente (ovviamente settando i font-size in em) e anche alla risoluzione dello schermo.

Questo tipo di layout è stato pensato (e non da me, è ispirato a un esempio preso dal w3) proprio per risolvere tutti i problemi che hai elencato.

Ti invito a provare il layout che ho postato e fare tutti i test. L'unica cosa che non funziona correttamente è lo zoom di IE7 che non è "standard" e funziona solo con layout fissi, mentre con quelli fluidi rovina l'impaginazione.

Altro discorso sono i posizionamenti assoluti con le dimensioni in pixel o in percentuale, li si che ci sono una marea di problemi. Ti è sicuramente sfuggito che tutte le unità di misura sono in em. E se non sai come funzionano gli em, ti consiglio di leggere qui : http://www.w3.org/2002/03/csslayout-howto e qui http://www.bigbaer.com/css_tutorials/css_font_size.htm

Ciao

Edit: aggiungo anche in questo post il layout che avevo fornito in altri post

body
{
margin : 0;
padding : 0;
font-size : 1em;
}

#colsx, #centro, #coldx
{
top : 1em;
bottom : 1em;
}

#colsx, #coldx
{
position : absolute;
width : 8em;
border : 0.1em solid black;
}

#colsx
{
left : 1em;
}

#coldx
{
right : 1em;
}

#centro
{
position : absolute;
left : 10em;
right : 10em;
border : 0.1em solid red;
}

e l'html è semplicissimo, all'interno del body metti
<div id="colsx"></div>
<div id="centro"></div>
<div id="coldx"></div>