Ciao a tutti
stavo sviluppando un layout, quando mi sono accorto di due stranezza incredibili:
- Il contenuto della pagina web esce dai suoi margini, sebbene io abbia indicato un blocco dalla larghezza di 760px come contenitore (opportunamente richiamato nella pagina web
- Il padding non funziona ... invece di distanziare il contenuto nella pagina, mi fa allungare i bordi sia in altezza che in laghezza
Vi posto il codice, sperando che qualcuno ci capisca (è stato passato al validator e non ha nessun errore):
Codice HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>itWeb - </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" href="style2.css" type="text/css" />
</head>
<body>
<div id="contenitore">
<div id="testata">
<img src="immagini/logo_dn.png" alt="Logo" />
</div>
<div id="menu">
<a href="index2.html"><img src="immagini/home.png" alt="Menu" /></a>
<a href="guide.html"><img src="immagini/guide.png" alt="Menu" /></a>
<a href="grafica.html"><img src="immagini/grafica.png" alt="Menu" /></a>
<a href="whoami.html"><img src="immagini/whoami.png" alt="Menu" /></a>
</div>
<div id="corpo">
<p>Testo di prova... aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
</div>
</body>
</html>
Codice:
body {
background-color: white;
margin: 0px;}
h4 {
font-family: "Verdana Ref", Verdana, sans-serif;
font-size: 14px; color: #009900;
text-align: left;
margin: 0px; }
h3 {
font-family: "Verdana Ref", Verdana, sans-serif;
font-size: 18px; color: #2586C0;
text-align: left;
margin: 0px; }
h1 {
font-family: "Verdana Ref", Verdana, sans-serif;
font-size: 24px; color: #009900;
text-align: left;
margin: 0px; }
p {
font-family: "Verdana Ref", Verdana, sans-serif;
font-size: 12px; color: #555555;
text-align: left;
margin: 0px 10px 0px 10px;}
a {
font-family: "Verdana Ref", Verdana, sans-serif;
font-size: 12px; color: #66CC66;
text-align: left;
margin: 0px 10px 0px 10px; }
li {
font-family: "Verdana Ref", Verdana, sans-serif;
font-size: 12px; color: #555555;
text-align: left;
margin: 0px; }
#contenitore {
width: 760px;
margin: auto;
border-left: 1px solid #A3A3A3;
border-right: 1px solid #A3A3A3;}
#testata {
width: 760px;
height: 100px;
background-color: transparent; }
#testata img {
border: 0px; }
#corpo {
width: 760px;
height: auto;
padding: 0px;
background-color: transparent;
border-top: 1px solid #A3A3A3;
padding: 15px 15px 15px 15px; }
#menu {
width: 760px;
height: 50px;
text-align: right;
border-top: 1px solid #A3A3A3; }
#menu img {
border: 0px; }
Vi ringrazio anticipatamente per l'aiuto