Web development is not my main focus, but when I delve into it, CSS always presents a frustrating challenge. My goal is to create a basic class that combines images with descriptions in a structured manner. Specifically, I aim to display two rows, each containing three images - a simple layout indeed.
The code I have for showing images exclusively seems to be functioning adequately.
img {
position: relative;
margin: 0 auto;
max-width: 650px;
padding: 5px;
margin: 10px 0 5px 0;
border: 1px solid #ccc;
}
<h3>Screenshots</h3>
<p>
<a href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
<a href="images/img2.png"><img src="images/img2.png" width="200" height="140"></a>
<a href="images/img3.png"><img src="images/img3.png" width="200" height="140"></a>
<a href="images/img4.png"><img src="images/img4.png" width="200" height="140"></a>
<a href="images/img5.png"><img src="images/img5.png" width="200" height="140"></a>
<a href="images/img6.png"><img src="images/img6.png" width="200" height="140"></a>
</p>
<h3>Installation</h3>
The current display showcases the images exactly as intended, with three in each row followed by a padding from < p > and then an Installation section. To add descriptions below the images within the same div, I modified 'img' in the CSS to 'div.img' and updated the HTML code:
<h3>Screenshots</h3>
<p>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
</p>
<h3>Installation</h3>
Assuming that the resulting web page would maintain the same appearance since 'img' in both cases carry identical attributes, this assumption proved wrong. With this adjustment, each div extends the full width of the column while the images stack vertically on the left side within each div.
I've also experimented with this code from W3Schools, yet this caused the Installation text and all subsequent content to overlap the images, disregarding the bottom margin set on the < p > tag.