Buongiorno,
ho un problema con la suddivisione della pagina attraverso i Div.
Questi sono i due file , uno in html e l'altro in css :
Codice html:
<!DOCTYPE html>
<html>
<head>
<title>Car Dealer</title>
<link rel = "stylesheet" href = "cssfile.css" type = "text/css">
</head>
<body bgcolor = "#FFFF00">
<div class="container">
<header>
<font color = "red"><h1>Car Dealer</h1></font>
</header>
<nav>
<ul>
<li><a href="https://www.lamborghini.com/it-en/">Go to Lamborghini's site</a></li>
<li><a href="http://www.pagani.com/it/">Go to Pagani's site</a></li>
<li><a href="https://www.ferrari.com/it-IT">Go to Ferrari's site</a></li>
</ul>
</nav>
<main>
<div id = "image1"><img src = "cascate.jpg">cascate</div>
</main>
<footer>
Contact us with <a href = "cardealer@gmail.com">Email</a> or <a href = "3527289276">Telephone</a>
</footer>
</div>
</body>
</html>
E il codice CSS :
html {
font-family : Arial, Helvetica, sans serif;
}
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: red;
background-color: white;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 200px;
height : 300px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
main {
margin-left: 100px;
border-left: 1 px black;
padding: 1em;
overflow: hidden;
div.image1 {
height: 200px;
width: 200px;
padding: 10px;
border: 3px solid #002c53;
float: right;
}
}
Non capisco come mai quando nel file in html scrivo <div id = "image1"> e carico l'immagine; l'immagine che viene stampata sulla pagina web non assume le caratteristiche rappresentate nel file CSS come ad esempio l'altezza e la larghezza di 200px.
Qualcuno riuscirebbe ad aiutarmi per piacere?