centrare box utilizzando float

[tommisceddu]

salve a tutti.
mi serve centrare un testo all'interno di un box così costituito:

| immagine | testo | immagine |

le immagini non sono altro che le curve del box.
Premetto, utilizzo solamente float e dimensioni in 'em' per un layout elastico.

codice utilizzato:

<div style="width:48.10em; height:1.56em; line-height:1.56em">
   <div>[img]img/ang_foot_sx.gif[/img]</div>
   <div style="float:left">ciao</div>
   <div>[img]img/ang_foot_dx.gif[/img]</div>
</div>

il problema è che mi posiziona il testo tutto a sinistra perchè logicamente ha il float left.
come faccio?
grazie

[tommisceddu]

up

[Mich_]

Secondo me stai sbagliando l'uso dei marcatori.
Una marcatura piu` corretta e`, secondo me, questa:

<div>
   [img]img/ang_foot_sx.gif[/img]
   [img]img/ang_foot_dx.gif[/img]
   

ciao</p>
</div>

Ci sono ancora dei problemi, dato che le immagini non fanno parte del contenuto della pagina, ma del layout, per cui andrebbero inserite nel CSS, non con il tag <img>; pero` dato che i CSS3 ancora non ci sono soprassediamo su questo problema.

A cui deve corrispondere un CSS:

div {
width:48.10em; 
height:1.56em; line-height:1.56em";
}
.ang_s {
float: left;
width:0.94em; height:1.56em;
}
.ang_d {
float: right;
width:0.94em; height:1.56em;
}
p {
  text-align: center;
}

[tommisceddu]

non sto sbagliando l'uso dei marcatori!
ci sto sbattendo la testa da un paio di giorni però grazie al te ci sono riuscito.

il problema con il tuo codice è che su IE ti visualizza un bordo intorno alle immagini, mentre mettendole all'interno di un div questo non succede.
inoltre se le immagini le metti nel CSS non verrebbero ridimensionate come invece tutto il resto del sito.
quindi il risultato è questo:

<div>
   <div class="flsx">[img]img/ang_foot_sx.gif[/img]</div>
   <div class="fldx">[img]img/ang_foot_dx.gif[/img]</div>
   

ciao</p>
</div>

mentre il CSS è:

div {
width:48.10em; height:1.56em; line-height:1.56em;";
}
.ang_s {
width:0.94em; height:1.56em;
}
.ang_d {
width:0.94em; height:1.56em;
}
p {
  text-align: center;
}
.flsx { float:left; 
}
.fldx { float:right; 
}

[Mich_]

E` inutile aggiungere sovrastrutture per togliere i bordi. Aggiungi al CSS delle immagini:
border: 0;

E le dimensioni le puoi inserire anche per le immagini (vedi il mio codice).

[tommisceddu]

E` inutile aggiungere sovrastrutture per togliere i bordi. Aggiungi al CSS delle immagini:
border: 0;

Hai perfettamente ragione è inutile aggiungere roba in più ...
... ma se anche aggiungendo il border : 0 meli lascia comunque cosa devo fare???
prova a vedere anche tu qui con IE

E le dimensioni le puoi inserire anche per le immagini (vedi il mio codice).

questo mi pare che non telo abbia contestato!!!

[Mich_]

Non posso installare IE per provare (lavoro con linux).

Comunque vedo molti errori di sintassi.

Anzitutto manca un DOCTYPE all'inizio. Questo ti permette anche di usare i valdidatori, oltre che imporre al browser il tuo linguaggio e non lasciarlo libero di interpretare come crede.

Poi il segno - (meno) non si puo` usare nei nomi: e` un segno matematico. Qualche browser lo accetta, ma non tutti e non in tutte le circostanze.

Terzo, in alcuni casi lo spazio PRIMA dei : (duepunti) puo` non permettere la corretta interpretazione del CSS. Quello dopo, invece, ci puo` stare (migliora la leggibilita`).

Ultima cosa: ci sono brwoser della famiglia IE che non accettano classi multiple.

[tommisceddu]

Anzitutto manca un DOCTYPE all'inizio

si lo so, lo avrei messo, ma ho iniziato a scrivere codice e mi sono dimenticato.

- il segno - (meno) non si puo` usare nei nomi ...
- in alcuni casi lo spazio PRIMA dei : (duepunti) puo` non permettere la corretta interpretazione del CSS ...
- ci sono browser della famiglia IE che non accettano classi multiple ...

ti ringrazio dei consigli, che verranno subito implementati.


quando dici delle classi multiple ti riferisci ad avere due classi sulla stessa riga? tipo

#nav a:link, #nav a:visited { ... }

[Another-Life]

#nav a:link, #nav a:visited { ... }

Dove sarebbero le classi in questo esempio??

p.s: Per classi multiple credo intenda due sezioni(ad esempio div)che hanno lo stesso nome nell'attributo class="valore"^^...tuttavia non ero a conoscenza di questo difetto da parte di alcune versione di IE.

[Mich_]

Che fate? tirate ad indovinare?

per classi multiple intendo, ad esempio,
<div class="cl1 cl2" ...>
dove il div deve seguire lo stile definito in ambedue le classi
.cl1 { ... }
.cl2 { ... }

E` una sintassi prevista nei CSS2, ma che non tutti i browser accettano (che io sappia), per cui puo` dare qualche sorpresa.

Altra considerazione:
la mancanza del DOCTYPE indica con certezza che non e` stata fatta la verifica sintattica del codice.
I validatori son molto migliori di qualunque umano nel trovare (un certo tipo di) errori di sintassi; val la pena usarli: si evitano enormi perdite di tempo e mangiate di fegato.