I need to use absolute positioning to get these images, along with the text under them in rows of three. I am new to HTML/CSS and this requires me to use absolute or some other simple positioning method i cant use grid etc. I also need to make sure the news section stays where it is.
This is my HTML code -
<!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="Tempany Johnson" content="zx813679"/>
</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>
<div class="heading"><h1>Museum of Odds & Ends</h1>
<div class="subheading"><h2>Walton Hall, Milton Keynes</h2>
<div id="museumimages">
<a href="https://www.europeana.eu/en/item/440/item_UBMLSJFMKZCDOGRRMBW2UY5RDAL3V4IP">
<img src="1.jpeg" alt="Budapest Chainbridge 1907"/>
<p>Budapest Chainbridge 1907</p>
</a>
<a href="https://www.europeana.eu/en/item/369/_129030">
<img src="3.jpeg" alt="Three red-figure attic vases 5th centruy AD"/>
<p>Three red-figure attic vases</p>
</a>
<a href="https://www.europeana.eu/en/item/325/MG061">
<img src="4.jpeg" alt="Bronze Enamel Ring Pin Early Medieval"/>
<p>Bronze Enamel Ring Pin</p>
</a>
<a href="https://www.europeana.eu/en/item/9200271/BibliographicResource_3000058904600">
<img src="7.jpeg" alt="Glass-plate Slide by Erica Wagner"/>
<p>Glass-plate Slide</p>
</a>
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_3cd913c5_b586_4dd7_813b_14708e134f5e">
<img src="10.jpeg" alt="Oilpainting of Ettingen Village by Alois Kron"/>
<p>Oilpainting of Ettingen Village</p>
</a>
<a href="https://www.europeana.eu/en/item/2058611/_kimbl_8a7b633f_8dfa_4bdb_ab43_5c7acb1d06ca">
<img src="11.jpeg" alt="Painting by Soja Feldmaier"/>
<p>Painting by Soja Feldmaier</p>
</a>
</div>
<article id=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>
This is my CSS file
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 {
position: absolute; right: 25px; top: 220px;
text-align: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#museumimages {
position: absolute; left: 24px; top: 200px;
}
Aucun commentaire:
Enregistrer un commentaire