Newsgroup: it.comp.www.html
Titolo: Impaginazione con CSS

Ciao a tutti,
finalmente mi sono deciso ad abbandonare l'impaginazione a tablelle a favore
di quella coni css.
ho provato a creare la pagina che ho riportato sotto e, ad una prima prova,
con IE funziona bene (in realtà al ridimensionamento della pagina ogni tanto
esce una riga bianca sul lato destro) mentre con Mozilla non si vede
assolutamente nulla...che cavolo ho sbagliato???
La pagina la trovate pubblicata a questo indirizzo:
http://www.myjungle.it/publi/layout.php
sperando che qulcuno riesca ad aiutarmi
vi saluto!!!
Grazie
ciao
=======================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
" lang="it">
<head>
<title>Tre colonne: Liquido con colonne a larghezza fissa</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="style/style2.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="corpo">
<div id="corpo-colonna1"></div>
<div id="corpo-colonna2"></div>
<div id="corpo-colonna3"></div>
</div>
</body>
</html>
=======================
e questo foglio di stile:
=======================
body { text-align:center;
 background-color: #646D65;
 height: 100%;
 margin: 0px 0px 0px 0px;
 padding: 0px;
 }
/* testa */
/* corpo */
#corpo {
 width:70%;
 position:relative;
 background-color: #646D65;
 height: 100%;
}
#corpo-colonna1 {
 top:0px;
 left:0px;
 background-image: url(../image/riga_left.jpg);
 width: 20px;
 height: 100%;
 position: absolute;
 float:left;
}
#corpo-colonna2 {
 background-color: white;
 width:100%;
 height: 100%;
}
#corpo-colonna3 {
 top:0px;
 right:0px;
 background-image: url(../image/riga_right.jpg);
 width: 20px;
 height: 100%;
 position: absolute;
 float: right;
}
=======================

Rintoccavano le 16:12, mercoledě 18 agosto 2004, quando Web Inside vocifero'
che ...
.... amio modesto parere manca il classico "clear:both" da applicare magari
ad un <div> che fa da footer. Direi che cosi' dovrebbe funzionare:
-------------------------------------------------------
<head>
  <title>Tre colonne: Liquido con colonne a larghezza fissa</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<style>
  body
  {
    text-align:center;
    background-color: #646D65;
    margin: 0px 0px 0px 0px;
    padding: 0px;
  }
  #corpo
  {
    width:70%;
    position:relative;
    background-color: #ED9F0E;
    height:100%;
    margin-left:auto;
    margin-right:auto;
  }
  #corpo-colonna1
  {
    top:0px;
    left:0px;
    background-color: #DBCF4D;
    width: 20%;
    position: absolute;
    height:100%;
    float:left;
  }
  #corpo-colonna2
  {
    background-color: white;
    width:100%;
    height:100%;
  }
  #corpo-colonna3
  {
    top:0px;
    right:0px;
    background-color: #6DBDB5;
    width: 20%;
    height:100%;
    position: absolute;
    float: right;
  }
  #footer
  {
    clear: both;
    background-color: #e1e1e1;
  }
</style>
<body>
  <div id="corpo">
    <div id="corpo-colonna1">colonna 1</div>
    <div id="corpo-colonna2">colonna 2</div>
    <div id="corpo-colonna3">colonna 3</div>
    <div id="footer">footer</div>
  </div>
</body>
</html>
-------------------------------------------------------
-- 
Questo messaggio si autodistruggera' entro 10"
    _     _
  o' |,=./ `o
     (o o)    
 ooO--(_)--Ooo-