-
Errore nel CSS aiuto!
ciao a tutti qualcuno riesce a trovare l'errore che c'è in questo codice
Codice:
body{
margin:0 0 0 0;
padding:0 0 0 0;
font-family:Arial, Helvetica, sans-serif;
font-size:80%;
color:black;
background-color:#FFF;
line-height:180%;
}
#intestazione{
margin: 0 auto;
width:760px;
height:190px;
border-left-color:1px black solid;
border-top:1px;
border-bottom:1px;
background-image:url(../immagini/img01.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-color:#B2CEDC;
color:black;
}
h1{
margin: 0;
font: normal 280%;
font-family:Arial, Helvetica, sans-serif;
color:#41545F;
background-color:#B2CEDC;
padding-left: 0.6em;
padding-top: 0.1em;
}
#menu{
margin: 0 auto;
width:760px;
border-left:solid black 1px;
border-right:solid black 1px;
border-bottom:solid black 1px;
color:white;
}
#menu ul{
margin: 0;
padding-left: 0;
list-style-type: none;
}
#menu ul li{
background-color:#41545F;
font-size: 1.1em;
margin: 0;
padding: 0;
display:inline;
}
#menu ul li a{
text-decoration:none;
color:white;
}
a:hover{
color:#B2CEDC;
background-color:#05181E;
}
#contenuto{
margin: 0 auto;
width:740px;
padding: 1.25em 0.8em;
border:1px solid black;
border-top: 0;
border-bottom: 0;
background-color:white;
color:black;
}
#contenuto p{
font-size:100%;
line-height: 1.8em;
padding-left: 1em;
padding-right: 1em;
}
#contenuto h1{
padding-bottom: 0.3em;
padding-top: 0.3em;
font: normal 180%;
font-family:Georgia,"Times New Roman", Times, serif;
color:#05181E;
background-color:white;
}
#contenuto h2{
background-color:white;
color:#940D1E;
padding-bottom: 0.3em;
font: normal 150%;
font-family:Georgia, "Times New Roman", Times, serif;
border-bottom:dotted 1px #FF9006;
}
#footer{
margin:0 auto;
width:740px;
background-color:#41545F;
text-align:center;
color:white;
border: 1px solid black ;
border-top: 1px;
border-bottom: 1px;
font-family:Helvrtica, Arial, Verdana, Tahoma, sans-serif;
padding: 0.8em 0.8em;
}
in modo da far venire fuori il menù come questa immagine http://manulazph.altervista.org/aiuto/pagina_finita.GIF
su questo documento html:
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=UTF-8">
<title>TITOLO</title>
<link rel="stylesheet" type="text/css" href="stili.css">
</head>
<body>
<div id="intestazione">
<h1>Pagina 1</h1>
</div>
<div id="menu">
<ul>
<li><a href="http://palladio-tv.it">Pagina 1</a></li>
<li><a href="http://palladio-tv.it">Pagina 2</a></li>
</ul>
</div>
<div id="contenuto">
<h1>LAYOUT MONOLITICO FISSO</h1>
<h2>1.Div, questo misterioso</h2>
<p>È il contenitore per eccellenz per realizzare layout senza l'uso di tabelle</p>
<h2>2. Layout fisso </h2>
<p>In un layout fisso, il contenitore principale ha la largheza dimensionata il pixels</p>
<h2>3. Larhezze per monitor standard</h2>
<p>Vi sono due principali larghezze utilizzate per questo tipo di layout, a seconda delle due più diffuse risoluzioni del monitor:</p>
<ul>
<li>800x600 pixels</li>
<li>1024x768 pixels</li>
</ul>
</div>
<div id="footer">Per realizzare questo layout non sono state utilizzate tabelle</div>
</body>
</html>
-
Fintanto che quei li sono dei box inline, il risultato sarà quello, non importa quanto sia l'interlinea, il colore di sfondo è normalmente applicato alla content area del box inline, a meno di usare la proprietà text-height che però attualmente nessuno supporta. Puoi quindi far diventare i box di quegli elementi li di tipo block o inline-block, nel primo caso però per affiancarli sarà necessario adoperare i float (e la proprietà overflow sul contenitore), nel secondo caso invece dovrai rimuovere ogni singolo spazio bianco dal sorgente HTML tra i vari tag di apertura e chiusura all'interno dell'elemento ul, che altrimenti sarebbero visibili come spazi tra i vari box.
