[crossbrowser] quanto è difficile dire addio alle "table"

[franciscogoya]

salve,
sto realizzando il restyling di un sito (di cui non citerò l'indirizzo per evitare spam) e sto tentando di realizzare un sistema tableless che sia "Valid XHTML 1.0 Strict!".

il mio problema rimane per l'impaginazione ed i vari "crossbrowser problems".

sto letteralmente impazzendo per lasciare tutto su un solo foglio css ed i risultati sono abbastanza penosi se si utilizzano browser diversi da ff / mozilla.

ho allegato il layout primario della pagina, posso avere qualche "tricks" per risolvere i problemi di "sconquassamento" che si raggiungono con opera e ie?

grazie anticipatamente

[Another-Life]

In poche parole ci chiedi di realizzare il sito...-.-,posta magari il codice css oppure descrivi quali sono i problemi.

p.s: Un consiglio per la realizzazione di un buon sito,non esagerare come in questo caso con la varieta dei colori^^

[Francis87]

se gli elementi verdi stanno navigando nel layout sono stati tolti dal flusso della pagina con una proprietà float o un position: absolute.

forse dovresti ripristinare il flusso normale con

<br style="clear: both;" />

oppure

<div style="clear: both;">& n b s p ;</div>

ricordando che l'entità nbsp va messa senza spazi bianchi

[rebelia]

Originariamente inviato da franciscogoya
sto letteralmente impazzendo per lasciare tutto su un solo foglio css ed i risultati sono abbastanza penosi se si utilizzano browser diversi da ff / mozilla.

non e' difficile e una volta iniziato diventa una liberazione, vedrai

non so se hai gia' letto questo articolo: spiega come pensare un sito su div; qui inoltre trovi qualche tutorial

ad ogni modo il trucco che uso io per gestire il crossbrowsing e' abbastanza semplice: do la dimensione al div contenitore e lascio che quelli interni si regolino da soli (un elemento blocco usa solitamente il 100% dello spazio a sua disposizione), eventualmente impostando del margin per "stringerli": gia' cosi' risolvi un bel po' di problemi

altro trucco:
se vuoi fare delle colonne ricordati il clear both come ha detto francis, ma cerca di metterlo all'interno del div che le contiene: questo per arginare un fastidioso baco di firefox; ti faccio un esempio:

html:

<div id="contenitore">
   <div id="sinistra"></div>
   <div id="destra"></div>
   <div class="chiudifloat"></div>
</div>

css:

#contenitore {width: 600px;}
#sinistra {width: 45%; float: left;}
#destra {width: 45%; margin-left: 5%; float: left;}
.chiudifloat {clear: both;}

in questo modo il div contenitore si chiudera' esattamente sotto i div-colonna come dovrebbe e il div sottostante ripartira' col normale flusso

[indigoindigo]

Mi accodo a quanto ti hanno consigliato sopra, e se hai voglia e sei a digiuno dai anche un occhio alla guida CSS-base qua su html.it
l'indirizzo al sito lo puoi pubblicare se è rilevante per guardare il codice e risolvere i problemi..
naturalmente non per rifare tutto il sito (a meno che qualcuno non se ne prenda la briga :P ) , ma per dare consigli o risolvere errori è il benvenuto!!

[franciscogoya]

grazie mille!
eheheh non chiedevo a nessuno di farmi il sito (che come ho già scritto sopra) per ff non da problemi (visto che è già online) il solo problema è quando lo si visualizza con ie (per qualche div che strasborda e/o si allarga) e invece con opera succede il dramma più totale!


ho letto le guide (anche cartacee) in materia, ma non avevo trovato troppi "metodi" per superare il "crossbrowser problems".

ottima l'idea del "clear: both;" la metto subito in pratica!!!



grazie a tutti

[Another-Life]

Non ho ben capito l'uso del "clear: both;"...qualcuno mi fa un esempio calzante?? thx

[rebelia]

Originariamente inviato da Another-Life
Non ho ben capito l'uso del "clear: both;"...qualcuno mi fa un esempio calzante?? thx

l'immagine sopra ha questo codice:

<div style="border: 1px solid orange;">
<div style="width: 35%; float: left; border: 1px solid blue;"></div>
<div style="width: 60%; float: left; border: 1px solid blue;"></div>
</div>

l'immagine sotto ha questo codice:

<div style="border: 1px solid orange;">
<div style="width: 35%; float: left; border: 1px solid blue;"></div>
<div style="width: 60%; float: left; border: 1px solid blue;"></div>
<div style="clear: both;"></div>
</div>

se non usi quest'ultimo sistema, firefox ti visualizza il codice in alto come vedi, cioe' il div contenitore non avvolge i div che contiene, ma si ritira in alto; se non dai effetti al div contenitore, manco te ne accorgi, ma se gli dai un bordino, uno sfondo o qualcosa, questo problema spesso ti complica la vita

nota: ovviamente ho reso visibile il div con il clear both, ma e' solo per capirci meglio

ad ogni modo float modifica il flusso naturale del codice e clear both serve per ripristinare questo flusso; se non lo usi, il div footer - poniamo - si "spalmerebbe" in modo strano appoggiandosi a volte sui div flottanti, altre (a seconda del browser) attraversandoli... robe cosi'

[Another-Life]

Okiz capito thx^^