Hello, I am trying to make an image get big enough so that the image is nice and big but also the header is below the boxes. Can someone look at my code for my html and stylesheet, so that I can expand the image and get the footer image below the dividers. HTML: Flexbox Coding Overview The First Doctor The Second Doctor The Third Doctor The Fourth Doctor The Fifth Doctor The Sixth Doctor The Seventh Doctor The Eight Doctor The Ninth Doctor The Tenth Doctor THe Eleventh Doctor The Twelfth Doctor The Thirteenth Doctor The Fourteenth Doctor The Fifteenth Doctor The Doctor is a Time Lord from the planet Gallifrey who travels through time and space in the TARDIS, a blue police box. Possessing the unique ability to regenerate into a new form when mortally wounded, the Doctor has been portrayed by various actors over the years. Motivated by a strong sense of justice and compassion, the Doctor works to thwart evil, solve problems, and protect civilizations, often accompanied by diverse companions on these thrilling adventures. Stylesheet: body { background-color: black; margin: 0; padding: 0; } .flex-container { display: flex; } .flex-container > div { background-color: white; width: 50%; margin: 10px; padding: 10px; font-size: 16px; } .header-image img { width: 100%; height: auto; } .footer-image { text-align: center; background-color: black; padding: 20px; } .footer-image img { width: 100%; height: auto; } img { width: 100%; height: auto; } /* Style images in the flex container */ .flex-container > div img { margin-bottom: 10px; } .flex-container > div img { float: right; width: 200%; }
Hello, I am trying to make an image get big enough so that the image is nice and big but also the header is below the boxes. Can someone look at my code for my html and stylesheet, so that I can expand the image and get the footer image below the dividers.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flexbox Coding</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header-image">
<img src="DoctorHeader.jpg" alt="Header Image">
</header>
<div class="flex-container">
<div>
<ul>
<li><a href="Page1.html">Overview</a></li>
<li><a href="Page2.html">The First Doctor</a></li>
<li><a href="Page3.html">The Second Doctor</a></li>
<li><a href="Page4.html">The Third Doctor</a></li>
<li><a href="Page5.html">The Fourth Doctor</a></li>
<li><a href="Page6.html">The Fifth Doctor</a></li>
<li><a href="Page7.html">The Sixth Doctor</a></li>
<li><a href="Page8.html">The Seventh Doctor</a></li>
<li><a href="Page9.html">The Eight Doctor</a></li>
<li><a href="Page10.html">The Ninth Doctor</a></li>
<li><a href="Page11.html">The Tenth Doctor</a></li>
<li><a href="Page12.html">THe Eleventh Doctor</a></li>
<li><a href="Page13.html">The Twelfth Doctor</a></li>
<li><a href="Page14.html">The Thirteenth Doctor</a></li>
<li><a href="Page15.html">The Fourteenth Doctor</a></li>
<li><a href="Page16.html">The Fifteenth Doctor</a></li>
</ul>
</div>
<div>
<ul>
<li>The Doctor is a Time Lord from the planet Gallifrey who travels through time and space in the TARDIS, a blue police box. Possessing the unique ability to regenerate into a new form when mortally wounded, the Doctor has been portrayed by various actors over the years. Motivated by a strong sense of justice and compassion, the Doctor works to thwart evil, solve problems, and protect civilizations, often accompanied by diverse companions on these thrilling adventures.</li>
</ul>
</div>
<div>
<ul>
<li><img src="OverviewImage.jpg" alt="Overview"</li>
</ul>
</div>
<footer class="footer-image">
<img src="TardisFooter.jpg" alt="Footer Image">
</footer>
</body>
</html>
Stylesheet:
body {
background-color: black;
margin: 0;
padding: 0;
}
.flex-container {
display: flex;
}
.flex-container > div {
background-color: white;
width: 50%;
margin: 10px;
padding: 10px;
font-size: 16px;
}
.header-image img {
width: 100%;
height: auto;
}
.footer-image {
text-align: center;
background-color: black;
padding: 20px;
}
.footer-image img {
width: 100%;
height: auto;
}
img {
width: 100%;
height: auto;
}
/* Style images in the flex container */
.flex-container > div img {
margin-bottom: 10px;
}
.flex-container > div img {
float: right;
width: 200%;
}
Step by step
Solved in 3 steps
