The art of placing images using CSS

I'm having trouble aligning the images into two rows of three, with the news section on the right side below the navigation bar. I've tried different methods but can't seem to get it right. Both the image and link should be clickable, but I'm not sure if I have implemented that correctly.

This is what my HTML document looks like:

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 &amp; 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 &amp; 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 &amp; 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>

  // The rest of the code remains the same

htmlcss

Answer №1

To create a grid layout for the .contain classes, wrap them with a div element and set this div element to display as grid using the grid-template-columns css property

Check out the 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 &amp; 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 &amp; 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 &amp; 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to incorporate two Bootstrap navbars on a single page that are of varying heights?

Utilizing Bootstrap 3.0 with dual navbars on a single page that adjust in height using the same variable for both .navbar blocks. Despite attempting to incorporate an additional class to alter the height of the initial navbar, it remains unaffected. Check ...

csstwitter-bootstrapnavbar

"Enable a smooth transition and switch the visibility of a div element when clicked

How to create a dropdown form with a transition effect that triggers on click of an element? Once triggered, the transition works smoothly but clicking again only hides the div element without triggering the transition. See the demo here: Check out the fu ...

javascriptjqueryhtmlcss

How can I prevent StateHasChanged() from affecting all open browsers in a Blazor Server-Side application?

Hey there, I'm new to Blazor but familiar with C#. This is my first time asking a question here so please bear with me. :) I am working on a Blazor server-side application where users can enter information and validate it based on server data. So far ...

c#htmlasync-awaitblazorblazor-server-side

Material-inspired Design Device Compatible DIV slide with JS, JQuery, and CSS

My goal is to achieve something similar to this: Desired Live Website I am looking for a feature where clicking on the div will slide in content from the right, load an external page inside it, and close when prompted. The slider div should be device c ...

javascriptjquerycssfluid-layoutmaterial-design

Horizontal rule spans the full width of the content, appearing within an ordered list

Check out this example to see the issue with the horizontal rule not extending all the way across under the number. I've tried using list-style-position:inside;, but that interferes with positioning the number correctly due to the left image being flo ...

htmlcss

Issues with iOS 7's absolute positioning not functioning properly within a table-responsive container

I successfully implemented fixing the first two left columns in my tables by following the instructions on . The columns are only fixed when the screen size is less than 768px, making the table scrollable (check it out on jsFiddle). This functionality work ...

ioscsstwitter-bootstrapwebkit

Add a captivating backdrop to a div element

So I have this unique HTML element that showcases a large headline with two decorative lines on either side, extending to the full width of the element. However, I now have a requirement to display some text as a background behind this element. The issue ...

htmlcssbackground

The adhesive navigation bar isn't adhering

I'm having issues with making my navbar inside a header sticky over the whole page. Despite trying various solutions like removing overflow, adjusting the flexbox, and setting a specific height on the parent element, I still can't get it to work. ...

htmlcssnavbarsticky

Vue.JS and its Onclick event handler allows for dynamic and interactive

These are my two buttons: <button onclick="filterSelection('Action')">Action</button> and <button onclick="filterSelection('Adventure')">Adventure</button> Now, I'm trying to achieve the same fun ...

javascripthtmlvue.js

What's the deal with $routeProvider in angularJS?

I'm having some trouble with my simple web app that I'm trying to update using route provider. Everything works fine when I click on the list items on the page, but when I refresh the page, I get a 404 error. It seems like it's trying to acc ...

javascripthtmlangularjs

Using JSON as HTML data within Flexbox for interactive hyperlink rollovers

Utilizing JSON to extract HTML data with unique html tags within Flex has presented a challenge. The limited support for HTML in Flex has made it difficult to implement a basic font color rollover effect on links. While Flex only allows for a few HTML tags ...

htmlcssapache-flexjsonrollovers

Automatically substitute a term with a clickable link

Is there a way to automatically turn every word into a hyperlink? I have specific words that need to be linked. For example, I want Ronaldo (Only for the First Appearance) to link to a certain page. However, my attempted method did not work. <p> Ro ...

javascripthtmljquery

I am facing difficulties accessing an element within a controller in Angular

Struggling to access an element inside an AngularJS controller, I attempted the following: var imageInput = document.getElementById("myImage"); Unfortunately, this approach was unsuccessful as the element returned null. Curiously, when placing the statem ...

javascripthtmlangularjs

Typography Addition on Flexslider

I am currently working with flexslider and trying to incorporate a unique text overlay on each individual slide, but so far I have been unsuccessful. <div class="flexslider"> <ul class="slides"> <li> <img src ...

javascripthtmlflexslider

What sets apart auto, 0, and no z-index values?

Can you explain the distinctions between the following: z-index: auto z-index: 0 the absence of z-index In all scenarios mentioned, we have a container div that contains two inner divs, named div1 and div2, with respective z-index values of 9 and 10. T ...

htmlcssz-index

Show a few values as a string in Angular using Typescript

I am working with JSON data and I want to know how to display hobbies without including the word "all" in an Angular/TypeScript application. { "Name": "Mustermann1", "Vorname": "Max1", "maennlich& ...

htmlangulartypescript

What is the best way to merge two JSON values with the help of jQuery?

Two JSON Objects are provided below: The first one is: [{ "id": 5001, "count": "0", "type": "None" }, { "id": 5002, "count": "0", "type": "Glazed" }, { "id": 5005, "count": "0", "type": "Sugar" }, { "id": 5003, ...

jqueryjsonhtml

Is there a way to split each foreach value into distinct variables?

I am looking to assign different variables to foreach values. I have fetched data from an API in JSON format, and then echoed those values using a foreach loop. My goal is to display the echoed value in an input box using JavaScript. I attempted the follow ...

javascriptphphtml

Javascript callback function cannot access variables from its parent function

As a Javascript newbie, I am currently diving into callbacks for my project. The goal is to retrieve address input from multiple text boxes on the HTML side and then execute core functionalities upon button click. There are N text boxes, each containing an ...

javascripthtmlcallback

The browser is opting to download the HTML file rather than displaying it

Recently, I set up a server using Node.JS express where I specified the location of an HTML file in the public folder. app.use(express.static(__dirname + '/public')); app.listen(8080); In previous projects, this setup worked seamlessly. However ...

javascripthtmlnode.jsexpress