Aiuto CSS - posizionamento div e altro...
Salve a tutti.
Ieri sera mi sono messo a rifare tutto il sito, non più basato su layout tabellare, ma con i div e css.
Il risultato di quello che ho fatto è questo:
pagina:
Codice HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="./stili/1/home.css" type="text/css" rel="stylesheet">
<title>Benvenuto su alemoppo.altervista.org!</title>
</head>
<body>
<div id='impo'>Impostazioni</div>
<div id='titolo'>Titolo</div>
<div id='principale'>
<div id='menu'>
<dir>
<li>Voce 1</li>
<li>Voce 2</li>
<li>Voce 3</li>
<li>Voce n</li>
</dir>
</div>
<div id='contenuto'>contenuto</div>
<div id='caratteristiche'>caratteristiche</div>
<div id='crediti'>crediti</div>
</div>
</body>
</html>
Con le relative "regole" css:
Codice HTML:
body
{
font-family:Century Gothic, Calibri, Verdana;
background-color:#3399CC;
margin:0px;
text-align:center;
font-size:14px;
}
#impo
{
margin:0px auto;
text-align:right;
width:900px;
height:20px;
background-color:white;
margin-top:30px;
}
#titolo
{
font-family:Ravie,Algerian;
font-size:30px;
margin:0px auto;
text-align:center;
width:900px;
height:50px;
background-color:white;
border:1px solid;
}
#principale
{
margin:0px auto;
text-align:center;
width:900px;
height:auto;
background-color:#ffffff;
}
#menu
{
text-align:left;
width:200px;
height:auto;
background-color:yellow;
margin-top:0px;
margin-left:0px;
}
#menu dir
{
list-style-type:none;
}
#menu li:hover
{
font-size:15px;
background-color:#3399CC;
}
#contenuto
{
background-color:green;
text-align:center;
margin-top:0px;
margin-left:200px;
width:500px;
}
#caratteristiche
{
background-color:pink;
text-align:right;
margin-top:0px;
margin-left:700px;
width:200px;
}
#crediti
{
margin-top:0px;
margin-left:0px;
}
Però con firefox mi da questi problemi:
1-> Le scritte dentro il menu le ho allineate a sinistra, ma non sono effettivamente posizionate a sinistra.
2->Tra il div "Titolo" e il div "principale" c'é uno spazio... perché? Io gli ho messo un margin:0px auto;.. quindi dovrebbe essere margin-top:0px; no?
3->I div "contenuto" e "caratteristiche" non sono allineati in alto rispetto al div "principale"... Perché? anche a questi gli ho dato (come al div menu) un margin-top:0px;
Poi, la goccia che ha fatto traboccare il vaso e quindi chiedere aiuto a voi, è stato quando l'ho visualizzato con IE (sperando in meglio, invece... :???:).
Grazie,
Ciao!
