I need to get the images below into two rows of three images and have the news section to the right hand side of that but below the navigation bar. I have tried all sorts and cannot get them to align properly. Both the link and the image need to be clickable however im not sure i have done that correctly either.
My HTML document is as follows:
body {
margin: 0;
padding: 0;
font-family: Times, "Times New Roman", Georgia, serif;
font-size: 14px;
color: #333333;
width: 1024px
}
.navigation {
background-color: #333333;
color: #fefefe;
width: 1024px;
font-size: 120%;
border-bottom: 3px solid #ff0000;
}
img {
width: 200px;
height: 100px;
}
.news {
float: right;
width: 25%;
padding-left: 20px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Walton Hall Museum of Odds & Ends</title>
<link rel="stylesheet" href="styles.css" />
<meta name="author" content="" />
<nav class="navigation">
<p>
<a href="index.html" title="index.html">Museum of Odds & Ends </a>
<a href="placeholder.html" title="placeholder.html">Visit Us</a>
<a href="placeholder.html" title="placeholder.html">Shop</a>
<a href="placeholder.html" title="placeholder.html">Our History</a>
</p>
</nav>
</head>
<body>
<h1><strong>Museum of Odds & Ends</strong></h1>
<p>Walton Hall, Milton Keynes</p>
<div class="contain">
<a href="https://www.europeana.eu/en/item/440/item_UBMLSJFMKZCDOGRRMBW2UY5RDAL3V4IP">
<img src="https://via.placeholder.com/400x300.jpg" alt="Budapest Chainbridge 1907" />
<p>Budapest Chainbridge 1907</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/369/_129030">
<img src="https://via.placeholder.com/400x300.jpg" alt="Three red-figure attic vases 5th centruy AD" />
<p>Three red-figure attic vases</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/325/MG061">
<img src="https://via.placeholder.com/400x300.jpg" alt="Bronze Enamel Ring Pin Early Medieval" />
<p>Bronze Enamel Ring Pin</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/9200271/BibliographicResource_3000058904600">
<img src="https://via.placeholder.com/400x300.jpg" alt="Glass-plate Slide by Erica Wagner" />
<p>Glass-plate Slide</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_3cd913c5_b586_4dd7_813b_14708e134f5e">
<img src="https://via.placeholder.com/400x300.jpg" alt="Oilpainting of Ettingen Village by Alois Kron" />
<p>Oilpainting of Ettingen Village</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_8a7b633f_8dfa_4bdb_ab43_5c7acb1d06ca">
<img src="https://via.placeholder.com/400x300.jpg" alt="Painting by Soja Feldmaier" />
<p>Painting by Soja Feldmaier</p>
</a>
</div>
<article class=news>
<h2>News</h2>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
</article>
</body>
</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
Wrap .contain
classes with a div
element then make that div
element to display as grid and use grid-template-columns
css property to do the trick
See Demo:
body {
margin: 0;
padding: 0;
font-family: Times, 'Times New Roman', Georgia, serif;
font-size: 14px;
color: #333333;
width: 1024px;
}
.navigation {
background-color: #333333;
color: #fefefe;
width: 1024px;
font-size: 120%;
border-bottom: 3px solid #ff0000;
}
img {
width: 200px;
height: 100px;
}
.news {
float: right;
width: 25%;
padding-left: 20px;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Walton Hall Museum of Odds & Ends</title>
<link rel="stylesheet" href="styles.css" />
<meta name="author" content="" />
</head>
<body>
<nav class="navigation">
<p>
<a href="index.html" title="index.html">Museum of Odds & Ends </a>
<a href="placeholder.html" title="placeholder.html">Visit Us</a>
<a href="placeholder.html" title="placeholder.html">Shop</a>
<a href="placeholder.html" title="placeholder.html">Our History</a>
</p>
</nav>
<h1><strong>Museum of Odds & Ends</strong></h1>
<p>Walton Hall, Milton Keynes</p>
<div class="wrapper">
<div class="contain">
<a href="https://www.europeana.eu/en/item/440/item_UBMLSJFMKZCDOGRRMBW2UY5RDAL3V4IP">
<img src="https://via.placeholder.com/400x300.jpg" alt="Budapest Chainbridge 1907" />
<p>Budapest Chainbridge 1907</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/369/_129030">
<img src="https://via.placeholder.com/400x300.jpg" alt="Three red-figure attic vases 5th centruy AD" />
<p>Three red-figure attic vases</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/325/MG061">
<img src="https://via.placeholder.com/400x300.jpg" alt="Bronze Enamel Ring Pin Early Medieval" />
<p>Bronze Enamel Ring Pin</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/9200271/BibliographicResource_3000058904600">
<img src="https://via.placeholder.com/400x300.jpg" alt="Glass-plate Slide by Erica Wagner" />
<p>Glass-plate Slide</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_3cd913c5_b586_4dd7_813b_14708e134f5e">
<img src="https://via.placeholder.com/400x300.jpg" alt="Oilpainting of Ettingen Village by Alois Kron" />
<p>Oilpainting of Ettingen Village</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_8a7b633f_8dfa_4bdb_ab43_5c7acb1d06ca">
<img src="https://via.placeholder.com/400x300.jpg" alt="Painting by Soja Feldmaier" />
<p>Painting by Soja Feldmaier</p>
</a>
</div>
</div>
<article class="news">
<h2>News</h2>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
</article>
</body>
</html>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
/* CSS */
body {
margin: 0;
padding: 0;
font-family: Times, "Times New Roman", Georgia, serif;
font-size: 14px;
color: #333333;
width: 1024px
}
.navigation {
background-color: #333333;
color: #fefefe;
width: 1024px;
font-size: 120%;
border-bottom: 3px solid #ff0000;
}
img {
width: 200px;
height: 100px;
}
.news {
float: right;
width: 25%;
padding-left: 20px
}
div.container {
display: table;
}
div.contain {
width: calc(100% / 3);
float: left;
margin-bottom: 20px;
}
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Walton Hall Museum of Odds & Ends</title>
<link rel="stylesheet" href="styles.css" />
<meta name="author" content="" />
</head>
<body>
<nav class="navigation">
<p>
<a href="index.html" title="index.html">Museum of Odds & Ends </a>
<a href="placeholder.html" title="placeholder.html">Visit Us</a>
<a href="placeholder.html" title="placeholder.html">Shop</a>
<a href="placeholder.html" title="placeholder.html">Our History</a>
</p>
</nav>
<h1><strong>Museum of Odds & Ends</strong></h1>
<p>Walton Hall, Milton Keynes</p>
<div class="container">
<div class="contain">
<a href="https://www.europeana.eu/en/item/440/item_UBMLSJFMKZCDOGRRMBW2UY5RDAL3V4IP">
<img src="img.jpg" alt="Budapest Chainbridge 1907" />
<p>Budapest Chainbridge 1907</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/369/_129030">
<img src="img.jpg" alt="Three red-figure attic vases 5th centruy AD" />
<p>Three red-figure attic vases</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/325/MG061">
<img src="img.jpg" alt="Bronze Enamel Ring Pin Early Medieval" />
<p>Bronze Enamel Ring Pin</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/9200271/BibliographicResource_3000058904600">
<img src="img.jpg" alt="Glass-plate Slide by Erica Wagner" />
<p>Glass-plate Slide</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_3cd913c5_b586_4dd7_813b_14708e134f5e">
<img src="img.jpg" alt="Oilpainting of Ettingen Village by Alois Kron" />
<p>Oilpainting of Ettingen Village</p>
</a>
</div>
<div class="contain">
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_8a7b633f_8dfa_4bdb_ab43_5c7acb1d06ca">
<img src="img.jpg" alt="Painting by Soja Feldmaier" />
<p>Painting by Soja Feldmaier</p>
</a>
</div>
</div>
<article class=news>
<h2>News</h2>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
<article>
<h2>News Entry Title</h2>
<h3>News Entry Date</h3>
<p>News Entry Text</p>
</article>
</article>
</body>
</html>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>