Want Image Under NavBar-CodePudding

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?

<!DOCTYPE html>
<!--[if lt IE 7]>      <html > <![endif]-->



<!--[if IE 7]>         <html > <![endif]-->



<!--[if IE 8]>         <html > <![endif]-->



<!--[if gt IE 8]>      <html > <!--<![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 ><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 >
               
                <img  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>







------- 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;
  
}

CodePudding user response：

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

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

CodePudding user response：

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>