Posizionamento immagine in Div

di il
2 risposte

Posizionamento immagine in Div

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?

2 Risposte

Devi accedere o registrarti per scrivere nel forum
2 risposte