Piccolo problema html

**marcocsm** · 07-04-2013, 10:57

perchè se metto la dichiarazione html <!doctype html> non riesco a vedere lo sfondo del menu e l'altezza della pagina cambia mentre se non la metto riesco a vedere tutto

ecco il codice

codice:

<!doctype html> 
<html>
 <head>
 <meta charset="UTF-8"> 
<title>HOME PAGE | COLLEPARDO</title> 
<link rel="stylesheet" type="text/css" href="aiuto.css">
 </head> 
<body> <div id="HEADER"> <h1> COLLEPARDO </h1> </div>
 <div id="MENU"> 
<ul id="menu-verticale"> [*] Home page [*] Cosa Visitare [*] Certosa [*] Mappa  [/list]</div>
 <div id="CONTENT"> <h2> BENVENUTI </h2> 

 <h3> 
In questo sito troverete una descrizione dei luoghi e dei cibi del paese Perch� Collepardo? Oltre ad essere un bellissimo paese li abitano i miei nonni materni </h3> 
<div id="caption"> [img]collenotte.JPG[/img] 
</div>
 </div> 
<div id="FOOTER"> COPYRIGHT E INFO DI CHIUSURA PAGINA... </div> </body> </html>

e css

codice:

body { color: #000000; margin: 0px 0px ; } 
div { font-size: 18px; font-family: Georgia; } /* ----- ----- ----- ----- ----- */
 h1{font-size: 90px;text-align:center;margin:1px auto;text-shadow:2px 2px 4px #000000; /* colore sfumato */}
 h2 { font-size:25px;}
 h3 { font-size:16px;text-align:left;} 
a:link {color:black;text-decoration:none;}
 a:visited {color:black;} 
#HEADER { margin: 3px auto; height:15%; color:white; border-width:4px; border-style:solid; border-color:#004A6E; text-shadow:2px 2px 4px #000000; /* colore sfumato */ background-color:#6161E6; /* border-bottom: solid 1px #000000;*/ }
 #MENU { float: left; width:20%; height:70%; margin:0px 5px; background-color:#6161E6; } 
#menu-verticale {list-style:none; margin:0; padding:0;font-size:large;}
 #menu-verticale li a {display:block; margin: 1px 0px; padding:5px 10px; background:#00CCFF; color:white; font-size:25px;}
 #menu-verticale li a:hover{ background:white; color:black; text-decoration:none;} #CONTENT { float: left; height:70%; width: 69%; background-color:#00CCFF; margin-left:auto; margin-right:auto; } #caption { font-family: Georgia; font-size: 10px; float: left; margin: 0; padding: 0; position: relative; overflow: hidden; } #caption img { float: left; margin: 0; padding: 0; background: #fff; border: none; width:80%; height:70%; } #FOOTER { clear: left; border-top: solid 1px #000000; }

**deleted_129** · 07-04-2013, 13:33

Io sono un autodidatta quindi non so 'precisamente' perchè , ma nel corso della mia esperienza ho capito che usare le % (invece dei pixel) provoca parecchi problemi, io credo che dichiarando <!doctype html> dichiari una pagina scritta in html5 , che magari gestisce le percentuali in modo diverso. (Se metti tutto in px vedrai che non cambia niente).

**Prill** · 07-04-2013, 14:13

L'uso di un doctype fa lavorare il browser in accordo con gli standard, in assenza di quello ogni browser interpreta a modo proprio.

Quando si usano altezze in percentuale, esse vengono sempre calcolate in base alle dimensioni del contenitore che debbono essere specificate. Manca nel tuo css l'indicazione dell'altezza dei contenitori padri che sono body e a un livello superiore html:

codice:

html, body {height:100%}

aggiungi anche padding:0; margin:0;

**marcocsm** · 07-04-2013, 16:41

grazie problema risolto

Discussione: Piccolo problema html

Strumenti discussione

Ricerca discussione

Visualizza

Piccolo problema html

Permessi di invio