Home > Software engineering >  Positioning of images in CSS
Positioning of images in CSS

Time：10-21

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

  <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 &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>
<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 &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="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>

Page link：https//www.codepudding.com/Softwareengineering/160872.html

Prev:How to print output of players names using JS & HTML
Next:How to set up th width without disturbing td
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding