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

Restrict User File Uploads in PHP

I have a system set up that enables users to upload files under 200 MB. Once the file is downloaded once, it will be automatically deleted. Additionally, all files are deleted from the server after 24 hours. I am looking for a way to limit the number of up ...

javascriptphphtmlajaxfile-upload

Change the background color on hover without affecting the text color

I am having some trouble with my code. I can only change the color of the "popup1_btn" button when hovering, but the text color remains the same. If I use .popup1_btn a:hover, it only changes the background and text color of the text, not the entire button ...

htmlcss

Discover the identity of an element through the value of another element

Looking for a way to retrieve the id value based on the input value in this HTML code. For instance, I need to identify the id value associated with the input value of number2 - which is unknown2. How can this be achieved using jQuery? <th id="unknow ...

javascriptjqueryhtml

Ways to collect email address or name from an email message

Suppose I send an email to someone with a link at the bottom. The text of the link might be something like click me. When the user clicks on this link, they will be directed to a webpage. On this webpage, a message saying "Thank you" will be displayed a ...

javascriptphpjqueryhtmlemail

Issues arise when attempting to animate letters using jQuery and CSS

My goal is to create a dynamic animation effect on a string when a user hovers over it. This involves turning the string into an array and applying different animations to each letter. Although the animations are working perfectly, I'm facing one issu ...

jqueryhtmlcssanimation

The Lifecycle of an HTML Page

Trying to grasp the life cycle of an HTML page has been a challenge for me. Unable to find comprehensive resources online, I took matters into my own hands by experimenting with the f12 tool in Internet Explorer. Through these experiments, I have formulate ...

html

Tips for showcasing the latest Google Map InfoWindows above previous ones

I have a dynamic Google Map with InfoWindows being added dynamically, but I am facing an issue where overlapping InfoWindows do not always display the most recent one on top of older ones. Is there a way to ensure that the latest InfoWindow always shows u ...

javascriptjqueryhtmlcssgoogle-maps

The layout of the keyboard in Cordova has been altered

Just starting out with my first Cordova app and I'm working on a simple login form. The issue I'm facing is that whenever I click on an input element, the keyboard pops up and completely messes up my layout, which should be straightforward. Has ...

javascripthtmlcsscordova

Flickering of image in JavaScript when mouse is hovered over and removed

I recently encountered an issue while attempting to create a mouseover effect that would display a larger image when hovering over a smaller default image. The problem arose when the larger image started flickering uncontrollably upon hover. Check out the ...

javascripthtml

How Jquery Can Be Used to Dynamically Add Extra Rows in HTML Without Submitting Data via POST Requests

When using jQuery to dynamically add extra rows to an HTML table, I encountered an issue where the fields of the extra rows were missing in the $_POST array when submitting the form. Can you please review the code and provide a solution to fix this problem ...

jqueryhtmlajax

Firefox experiencing issues with overflowing HTML content

I am facing an issue with a table inside a div container where the content exceeds the container size. Interestingly, in Internet Explorer, the parent containers automatically expand to fit the table content. However, in Firefox, the div container only w ...

htmlcssfirefoxoverflow

Each div will display the same image twice when loading the image

I have a grid where images are dynamically loaded with a link to a lightbox. Currently, this is how I am achieving it: $(".selection_thumb").each( function(i) { $(this).append("<a data-lightbox='image-1' href='img/folder/folder/"+(++ ...

javascriptjqueryhtmlcssforeach

When applying styles in Polymer, it's important to take into account the width and height

Having trouble setting the width of elements within container elements in Polymer. Here's a simple example that illustrates the issue: <!doctype html> <html> <head> <base href="https://polygit.org/polymer+:master/webcomponent ...

cssshadow-dompolymer-2.x

Having trouble getting JavaScript to select a stylesheet based on time?

I am attempting to implement two different styles based on the time of day. Here is the code I am using to select the CSS file depending on the current time: <script type="text/javascript"> function setTimedStylesheet() { var currentTim ...

javascripthtmlcss

Using jQuery to display the total number of div elements for the selected individuals

Hey there, I'm just diving into jQuery and could use some assistance. I'm attempting to achieve a specific outcome with my code, but I'm running into some difficulties. Hopefully someone can lend a helping hand! Here's the scenario: If ...

jqueryhtmlajaxforms

Determine line-height and adjust positions using JavaScript in the Chrome browser

I am creating a basic text reading application with a line to aid in easy reading. The functionality involves using the up and down arrow keys on the keyboard to adjust the position of a red line based on the line-height property. This is accomplished thr ...

javascriptjqueryhtmlcssgoogle-chrome

position blocks next to each other within a container

Thank you for all the hard work! I've been struggling to figure out how to align blocks next to each other within a div. It may not be that difficult, but I just can't seem to find an elegant solution... Here is the HTML code snippet: <div ...

javascripthtmlcss

Assign separate classes to even and odd div elements

My PHP code block has this structure: $flag = false; if (empty($links)) { echo '<h1>You have no uploaded images</h1><br />'; } foreach ($links as $link) { $extension = substr($link, -3); $image_name = ($extensi ...

phphtmlcss

Determine the exact location where the mouse was clicked on a webpage containing an iframe

I am trying to retrieve the mouse position on my HTML page, but I am encountering some issues. Here's what I have so far: document.onclick = function(click) { if (click.clientX<340){ myControl.inputs.selection = false; btnRotate.remove ...

javascripthtml

Adjusting the size of the Knob in Ionic 5 upon pressing it

Is there a way to change the size of the knob in an "ion-range" element when it is pressed? I have checked the documentation, but could not find any information in the "ion-range" section. I would like to make this adjustment in SCSS: Normal Behavior Pre ...

cssangularionic-framework