Impaginazione CSS

[Trinità]

dovendo realizzare un nuovo sito, mi sono imposto di farlo utilizzando div e css al posto delle tabelle
Il design che ho scelto per il sito, se realizzato con tabelle, lo avrei fatto per la parte sopra così (semplificando)

<table>
<tr>
<td width="100">[img]1.gif[/img]</td>
<td width="100%" bgimage="pippo.gif"></td>
<td width="100">[img]2.gif[/img]</td>
</tr>
</table>


1 cella fissa, 2° cella con backgroud e liquida, 3° fissa

qual'è ora il modo più corretto per realizzare questo con i css e div ?

avevo provato con
<div id="primario">[img]1.gif[/img][img]2.gif[/img]</div>

ma non riuscivo. O l'immagine 2 andava sotto, oppure lo sfondo del div primario non si vedeva

ho dovuto risolvere così

<div class="AllineaSinistra">[img]img/testata1.gif[/img]</div>
<div id="testata">[img]img/testata2.gif[/img]</div>

dove allinea sinistra è
.AllineaSinistra{
float: left;
width: 124px;
margin: 0px;
}
#testata{
background-image: url(img/testata_sfondo.gif);
margin: 0px;
text-align: right;
}



ho fatto bene ? il risultato mi sembra ok, ma racchiudere la 1° immagine in un div non sò se sia corretto

[Mich_]

Un'immagine DEVE stare dentro un altro oggetto: non puo` stare da sola dentro il body.

Per il tuo porblema, puoi risolvere in due modi, a seconda del risultato che vuoi ottenere:

1.

<div id="sin">[img]1.gif[/img]</div>
<div id="des">[img]2.gif[/img]</div>
<div id="main">

qualcosa</p></div>

-- con CSS:
#sin {
  width: 100px;
  height: 100%;
  float: left;
}
#main {
  width: 100%;
  height: 100%;
  float: left;
  background: url(pippo.gif);
}
#des {
  width: 100px;
  height: 100%;
  float: right;
}

Alla fine devi ricordarti di dare un clear:both, altrimenti ti trovi anche altri blocchi tra il main e il des.
Ho dato i nomi sin e des per chiarezza, ma non sono semanticamente corretti: infatti i nomi devono indicare quello che i blocchi contengono, non la posizione.


2.

<div id="testata">
  [img]1.gif[/img]
  [img]2.gif[/img]
  

qualcosa</p>
</div>

-- con CSS:
#testata {
  width: 100%;
  background: url(pippo.gif) no-repeat top center;
}
#sin { 
  float: left;
}
#des { 
  float: right;
}

Se vuoi puoi mettere anche un colore di sfondo (per coprire eventuali parti non coperte dall'immagine); in tal caso inseriscilo nel background prima dell'url().

[Trinità]

grazie per la risposta. Ho provato la tua soluzione 2 perchè più si avvicinava al metodo che usavo per le tabelle.

con explorer 6 l'immagine che deve allinearsi a destra non stà aderente al bordo dx, ma rientra di qualche pixel

(il body che contiene tutto ha questo stile
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
)

con firefox, sta aderente a dx, ma lo sfondo di testata non c'è
questo
#testata {
width: 100%;
background: url(pippo.gif) no-repeat top center;
}
l'ho modificato con
#testata {
width: 100%;
background: url(pippo.gif) ;
}

[Mich_]

Non ho capito se con lo sfondo di testata hai risolto.

Per i problemi con IE, credo sia il "bug dei tre pixel"; lo risolvi con un hack specifico per IE (fai uan ricerca).

Comunque vale la pena di specificare border, margin e padding a zero nelle immagini (qualche browser ha il default dei bordi a 1px).

[Trinità]

No non ho risolto perchè come dicevo con IE rientra di 3 pixel (quindi credo sia il suo bug)
con firefox non si vede lo sfondo.

Vabbè alla fine mi va bene come avevo fatto io, era solo per chiarirmi un pò le cose.

Piccola info, come fate per debuggare con fi vari browser e vedere i comportamenti dei vari box model ?
soprattutto tra ie 5 e ie 6 che non credo possano stare sulla stessa macchina ?
C'è qualche trucco per simulare ie5 ?

[edy72]

per installare più versioni di Internet Explorer sullo stesso computer:
http://pro.html.it/articoli/id_403/idcat_31/pro.html

Un altro metodo che uso io, quindi non so se è quello più corretto, è testare le pagine simulando i diversi rendering del box model dichiarando il Doctype in modo incompleto o aggiungendoci il prologo xml in modo da mandare I.E. 6 in modalità quirks che gli fa interpretare il box model come I.E. 5.x

Qui trovi approfondimenti sul Doctype
http://pro.html.it/articoli/id_312/idcat_31/pro.html

ciao!!

[Trinità]

come multipli ie ho trovato qui
http://www.quirksmode.org/browsers/multipleie.html

e mi pare funzioni

interessante per il prologo xml, devo provare

grazie a tutti, ciao