'Want Image Under NavBar

How do I get the image under the Navbar? Can I grid my photos another way to help not shift the structure if the website? It's my first time posting here and im currently in a bootcamp. Any help would be appreciated. My image in on top of my image grid and Im trying to put it under the Navbar. Whats the best way to structure my css?

body {
    margin: 0;
    background-color: white;
  }

  .image-grid {
    --gap: 16px;
    --num-cols: 4;
    --row-height: 300px;

    box-sizing: border-box;
    padding: var(--gap);

    display: grid;
    grid-template-columns: repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-height);
    gap: var(--gap);
  }

  .image-grid > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .image-grid-col-2 {
    grid-column: span 2;
  }

  .image-grid-row-2 {
    grid-row: span 2;
  }

  /* Anything udner 1024px */
  @media screen and (max-width: 1024px) {
    .image-grid {
      --num-cols: 2;
      --row-height: 200px;
    }
  }


  ul{
    width: auto;
    float: right;
    margin-top: 8px;

}

li{
    display: inline-block;
    padding: 15px 30px;
}

a { 
    text-align: center;
    color: #F10086;
    text-decoration: none;
    font-family: '';
    font-size: 1.2vw;
} 


.color {
  color: purple;
  text-align: center;
  margin-bottom: 10px;
  width: auto;

}
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->



<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->



<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->



<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Neon Photography</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <main>

            <div class="color"><h1>ColorPop Photography</h1></div>

            <nav>
                <ul>
                    <li><a href="aboutme.html" id="nav">About Me</a></li>
                    <li><a href="contact.html" id="nav">Contact Me</a></li>
                    <li><a href="contact.html" id="nav">Contact Me</a></li>
                </ul>

                <ul></ul><img src="https://live.staticflickr.com/65535/52005228378_481fa02c9f_m.jpg"> </ul>
            </nav>
            <div class="image-grid">
                <img class="image-grid-col-2 image-grid-row-2" src="https://lh6.googleusercontent.com/CGWnvifUEMkJLXwIjOMCa0TM39Uyo0O5ja4KRw7YhNcwbo4kMLUeZ8kubE9LEUzsRWDJrQK_noSFtBi1ZdRzFwt1yPquCMDZRW5zCYPAKzZFfAH-a2r0tFREaV_XldwZ1yOI4k57" alt="blackjoy">
                <img src="https://64.media.tumblr.com/b581fb1d18504035e344dacb05d52dda/tumblr_ooel41UFsj1vqr2b4o2_1280.jpg" alt="blackjoy">
                <img src="https://64.media.tumblr.com/09423884d13d4acd5967f71c6decfd42/tumblr_opfluukjjT1vqr2b4o3_1280.jpg" alt="blackjoy">
                <img src="https://pbs.twimg.com/media/EUn_LwTWsAMWawX?format=jpg&name=large" alt="architecture">
                <img src="https://i.pinimg.com/564x/72/17/cc/7217cc642ad4dc357ad69f2ae98cfacd.jpg" alt="blackjoy">
              </div>
        </main>
        <footer>
        </footer>
    </body>
</html>
htmlcss


Solution 1:[1]

Did you want something like that? continue editing it as you wish.

*,/::before,*::after {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  background-color: white;
}

nav{
  position:fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

.image-grid {
  --gap: 16px;
  --num-cols: 4;
  --row-height: 300px;
  padding: var(--gap);

  display: grid;
  grid-template-columns: repeat(var(--num-cols), 1fr);
  grid-auto-rows: var(--row-height);
  gap: var(--gap);
}

.image-grid > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-grid-col-2 {
  grid-column: span 2;
}

.image-grid-row-2 {
  grid-row: span 2;
}

/* Anything udner 1024px */
@media screen and (max-width: 1024px) {
  .image-grid {
    --num-cols: 2;
    --row-height: 200px;
  }
}

ul {
  width: auto;
  float: right;
  margin-top: 8px;
}

li {
  display: inline-block;
  padding: 15px 30px;
}

a {
  text-align: center;
  color: #f10086;
  text-decoration: none;
  font-family: "";
  font-size: 1.2vw;
}

.color {
  color: purple;
  text-align: center;
  margin-bottom: 10px;
  width: auto;
}
<main>

  <div class="color">
    <h1>ColorPop Photography</h1>
  </div>

  <nav>
    <ul>
      <li><a href="aboutme.html" id="nav">About Me</a></li>
      <li><a href="contact.html" id="nav">Contact Me</a></li>
      <li><a href="contact.html" id="nav">Contact Me</a></li>
    </ul>

    <img src="https://live.staticflickr.com/65535/52005228378_481fa02c9f_m.jpg"> </ul>
  </nav>

  <div class="image-grid">

    <img class="image-grid-col-2 image-grid-row-2" src="https://lh6.googleusercontent.com/CGWnvifUEMkJLXwIjOMCa0TM39Uyo0O5ja4KRw7YhNcwbo4kMLUeZ8kubE9LEUzsRWDJrQK_noSFtBi1ZdRzFwt1yPquCMDZRW5zCYPAKzZFfAH-a2r0tFREaV_XldwZ1yOI4k57" alt="blackjoy">
    <img src="https://64.media.tumblr.com/b581fb1d18504035e344dacb05d52dda/tumblr_ooel41UFsj1vqr2b4o2_1280.jpg" alt="blackjoy">
    <img src="https://64.media.tumblr.com/09423884d13d4acd5967f71c6decfd42/tumblr_opfluukjjT1vqr2b4o3_1280.jpg" alt="blackjoy">
    <img src="https://pbs.twimg.com/media/EUn_LwTWsAMWawX?format=jpg&name=large" alt="architecture">
    <img src="https://i.pinimg.com/564x/72/17/cc/7217cc642ad4dc357ad69f2ae98cfacd.jpg" alt="blackjoy">
  </div>

</main>

<footer>

</footer>

Solution 2:[2]

In this tag,

 <ul></ul><img src="https://live.staticflickr.com/65535/52005228378_481fa02c9f_m.jpg"> </ul>

why is the </ul> tag placed front of the <img /> tag?

I think that you have to change code like this.

<ul><img src="https://live.staticflickr.com/65535/52005228378_481fa02c9f_m.jpg" /> </ul>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Steve Walson
Solution 2 Laurel

Related Questions