Ho creato un semplice file html e un foglio css. Ho importato il foglio css nel file html tramite <link rel="stylesheet" type="text/css" href="stile.css">.
Il problema è che poi apro il file html con chrome o firefox ma la pagina non è formattata come descritto nel file .css ... o almeno, alcune cose sì alcune cose no ( i colori del background non vengono cambiati come descritto nel file .css, ma i colori dei testi sì).
Allego qui i codici, sia del file html che di quello css.
Ho seguito la guida del forum sui layout monolitici, il codice è tale e quale e non capisco perchè non funzioni come dovrebbe.
CODICE CSS:
/*stili per il layout fluido*/
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 76%}
/*stili generici, su header e footer*/
div#container{border: 200px;}
div#header{background-color:#36C;color: #ff0}
h1,h2{margin: 0;padding:0}
h1{padding-left:1.5em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}
div#footer{text-align:center; padding: 0.5em;
background-color: #69c; color: #000}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}
/*stili specifici per il layout*/
div#navigation{background-color:#9cf}
div#content{padding: 1em}
/*stili per la navigazione*/
div#navigation ul{margin: 0;padding: 0; list-style-type: none;}
div#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/
div#navigation a{color:#369;font: normal bold 1.2em/2.5em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #fff;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}
CODICE HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Monolitico</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link rel="stylesheet" type="text/css" href="fogliohome.css">
</head>
<body>
<div_id=”container”>
<div_id=”header”> <h1>TITOLO DELLA PAGINA</h1> </div>
<div_id=”navigation”>
<ul>[*]<a href=”#”>Homepage</a> [*] <a href=”#”>Foto</a> [*] <a href=”#”>Contatti</a>
<!– eccetera –>[/list]
</div>
<div_id=”content”>
<h2> Contenuti del Sito </h2>
Il sito contiente opere e disegni di giovarni artisti lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsum
</p>
- Qualcosa
- BLABLAH
- CIAO
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
<div_id=”footer”>
© 1997-2004 - Grafica, layout e guide sono di esclusiva proprietà di MagikART.it s.r.l.
Note e informazioni legali
</div>
</div> <!- FINE DEL DIV CONTAINER PRINCIPALE->
</body>
Rispondi quotando
