How to add a profile picture in header of my website-CodePudding

I want to add a profile picture on the left side of the home in the navigation panel can anyone tell me how can I do that without javascript just using HTML and CSS
I want a picture on the top left part of the webpage and I tried many time and can't figure out how
Thank You
--------------------------------------------------------------------------------------
Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PS 2</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        header{
            background-color: black;
            color: white;
            position: sticky;
            top: 0;
        }
        ul{
            padding: 19px;
        }
        li{
            list-style: none;
            display: inline;
            padding: 0 53px;
            font-size: 33px;
        }
        .container{
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: space-between;
        }
        .left{
            background-color: red;
            height: 80vh;
            width: 40vw;
        }
        .right{
            background-color: blue;
            height: 80vh;
            width: 40vw;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Contact Us</li>
            </ul>
        </nav>
    </header>
    <div >
        <div >
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis consequuntur porro recusandae beatae, debitis sapiente, adipisci nostrum voluptate pariatur veniam, aliquid iusto consequatur nemo quidem. Quia eveniet fugit mollitia tempora harum eligendi modi natus?
            </p>
        </div>
        <div >
            <p>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, totam sapiente unde quos, quia dolor et natus tenetur, nesciunt tempora cum. Facilis laboriosam quas consectetur, placeat adipisci consequuntur consequatur cupiditate deserunt veritatis odit natus delectus tempore possimus, aspernatur ex amet quaerat vero sequi praesentium inventore. Facere distinctio magni, praesentium modi nemo sit quibusdam laudantium molestiae. Provident.
            </p>
        </div>
    </div>
</body>
</html>

CodePudding user response：

I've made your nav a flex container and used a div to place your image on the lhs of your navbar. The image is placed in the center of the div using grid and place-items:center.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header {
  background-color: black;
  color: white;
  position: sticky;
  top: 0;
}

nav {
  display: flex;
  padding: 1rem 2rem;
}

.image {
  flex: 0 1 auto;
  display: grid;
  place-items: center;
}

.image>img {
  width: 4rem;
}

ul {
  padding: 19px;
}

li {
  list-style: none;
  display: inline;
  padding: 0 53px;
  font-size: 33px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}

.left {
  background-color: red;
  height: 80vh;
  width: 40vw;
}

.right {
  background-color: blue;
  height: 80vh;
  width: 40vw;
}

<header>
  <nav>
    <div ><img src="https://www.fillmurray.com/500/500"></div>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact Us</li>
    </ul>
  </nav>
</header>
<div >
  <div >
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis consequuntur porro recusandae beatae, debitis sapiente, adipisci nostrum voluptate pariatur veniam, aliquid iusto consequatur nemo quidem. Quia eveniet fugit mollitia tempora harum eligendi
      modi natus?
    </p>
  </div>
  <div >
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, totam sapiente unde quos, quia dolor et natus tenetur, nesciunt tempora cum. Facilis laboriosam quas consectetur, placeat adipisci consequuntur consequatur cupiditate deserunt veritatis odit
      natus delectus tempore possimus, aspernatur ex amet quaerat vero sequi praesentium inventore. Facere distinctio magni, praesentium modi nemo sit quibusdam laudantium molestiae. Provident.
    </p>
  </div>
</div>

CodePudding user response：

change your css header to

header{
        background-color: black;
        color: white;
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
    }

and add the class

.header-img {
        width: 50px;
        height: 50px;
        background-color: red;
        margin: 10px;
    }

and now you can add in your html header

<img  src=""/>

in src="" you can chose the path of your img

CodePudding user response：

Add a list element in the header.

            <ul>
                <li><img src="https://smaller-pictures.appspot.com/images/dreamstime_xxl_65780868_small.jpg" alt="Girl in a jacket" width="50" height="50"></li>
                <li>Home</li>
                <li>About</li>
                <li>Contact Us</li>
            </ul>