Newsgroup: it.comp.www.html
Titolo: Tabelle: emulatela, se vi riesce!

Un buon web designer non usa tabelle per il suo layout. E vabbé... ci sono
strumenti flessibili e moderni come i fogli di stile, è giusto usarli.
Però - sarò niubbo - continuo a cozzare contro cose che a prima vista sono
semplicissime! :-\
Ad esempio, prendiamo questa tabella semplicissima:
http://web.tiscali.it/maxart_x/tabelle.html
E' una cosetta che ogni browser degno di questo nome visualizza
correttamente. Certo, magari un po' litigano coi bordi, ma non era quello
l'intento. E' l'ABC dell'HTML, vogliamo dire versione 2.0?
Quello che mi chiedevo è: è possibile emularla in tutto e per tutto coi div,
senza magari incappare in problemi di compatibilità (come pure era con la
tabella)?
Come fareste voi? Magari senza i bordi, visto che li ho messi solo per
redere evidenti le celle...
Vi prego, uscirei da tanti dubbi! :-\
MaxArt

 Vi prego, uscirei da tanti dubbi! :-\
Questo il codice la visualizzazione è la stessa (i bordi li ho lasciati
bianchi):
CSS:
body {
  background-color: #000000;
  font-family: Verdana, Arial, sans-serif;
  color: #FFFFFF;
  font-size: 10pt;
  font-weight: normal
}
#conteiner {
  border: 0px;
  height: 100%;
  width: 100%
}
..alto {
  height: 40%
}
..cella1 {
  tex-align: left;
  margin-right: -4px;
  height: 100%;
  width: 70%;
  border: 2px solid #FFFFFF;
  float: left
}
..cella2 {
  height: 100%;
  border: 2px solid #FFFFFF;
  text-align: center
}
..basso {
  clear: both;
  height: 59%
}
..cella3 {
  tex-align: left;
  margin-right: -4px;
  height: 100%;
  width: 70%;
  border-top: 1px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  float: left;
  text-align: center
}
..cella4 {
  height: 100%;
  border-top: 1px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF
}
..posizione1 {
  position: absolute;
  top: 18%;
  left: 83%
}
..posizione2 {
  position: absolute;
  top: 68%;
  left: 30%
}
..posizione3 {
  position: absolute;
  top: 89%;
  left: 89%
}
Codice XHTML:
<div id="conteiner">
<div class="alto">
<div class="cella1">Prima cella</div>
<div class="cella2"><span class="posizione1">Seconda cella</span></div>
</div>
<div class="basso">
<div class="cella3"><span class="posizione2">Terza cella</span></div>
 <div class="cella4"><span class="posizione3">Quarta cella</span></div>
</div>
</div>
Ciao.
P.S.: se le classi compaiono con due punti (..) mettine uno solo (.classe).
-- 
[Non siamo materia che aspetta, ma schemi che si perpetuano.]
Rhadamanth.net (
http://www.rhadamanth.net
)
FIAG (
http://www.fiag.it
)
Savona Web (
http://www.savonaweb.net
)

Non dubitavamo della tua riuscita!
Un saluto dalla Puglia!
Roberto.
-- 
questo articolo e` stato inviato via web dal servizio gratuito 
http://www.newsland.it/news
 segnala gli abusi ad 
ab...@newsland.it

 bianchi):
Bello!
Ma si puo' fare col posizionamento relativo invece che assoluto? :-)
Ciao da Zelig
http://zeligplanet.altervista.org

 Ma si puo' fare col posizionamento relativo invece che assoluto? :-)
Sě, certo e in molti altri modi.
La pagina di prima la puoi trovare anche qui:
http://www.rhadamanth.net/Esempi/csspos.htm
Ciao.


 Roberto.
Saluti a te.


   tex-align: left;
Occhio! ;-)
MaxArt

 Opera è ok. Chi sa perché?)
[CUT]
E' un bug di IE. Interpreta in modo scorretto il box model:
