How would I place a logo at the top left hand corner of the screen?

Question

Here is my code below. I'm having trouble displaying the logo at the top left hand corner of the screen.

My main problem is that the image is not showing up anywhere on the screen, although I inputted the correct file name into the image section.

If anyone would be able to help me, I'd really appreciate it! Thanks in advance.

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
        ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
          border-radius: 0px;
          position: fixed;
          top: 0;
          width: 100%;
        }

        li {
          float: right;
        }

        #logo {
          float: left;
          display: inline-block;
        }

        li a {
          display: block;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          font-size: 20px;
          margin-right: 20px;
        }

        /* Change the link color to #111 (black) on hover */
        li a:hover {
          background-color: #F29078;
          border-radius: 5px;
        }

        .active {
          background-color: #F29078;
        }

        .logo {
          width: 33px;
          height: 67px;
          border-radius: 5px;
        }
      </style>
    </head>

    <body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
          <ul>
              <li><img src="imageO.jpg" id="logo" class="logo"/> </li>
              <li><a href="#about">About</a></li>
              <li><a href="#pathway">Features</a></li>
              <li><a href="#implementation">Download</a></li>
          </ul>
    </div>
  </body>
</html>

and by the way, I would take the `img#logo` out of the `li`, and wrap your `ul` in a `nav`. And you don't need to `float:left` an `inline-block` — ravb79, Apr 17 '20 at 19:45
Does this answer your question? [How can find the image path for css](https://stackoverflow.com/questions/52919100/how-can-find-the-image-path-for-css) — WoAiNii, Apr 17 '20 at 19:49

WoAiNii · Answer 1 · 2020-04-17T19:37:17.100

Is your logo really 7x5 px? I just move the first li item to the left side and if imageO.jpg is in the same path of your Html, this works fine.

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
        ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
          border-radius: 0px;
          position: fixed;
          top: 0;
          width: 100%;
        }

        li {
          float: right;
        }

        #logo {
          float: left;
          display: inline-block;
        }

        li a {
          display: block;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          font-size: 20px;
          margin-right: 20px;
        }

        /* Change the link color to #111 (black) on hover */
        li a:hover {
          background-color: #F29078;
          border-radius: 5px;
        }

        .active {
          background-color: #F29078;
        }

        .logo {
          width: 70px;
          height: 50px;
          border-radius: 5px;
          border: 1px black;
        }
        li:first-child {
          float: left;
        }
      </style>
    </head>

    <body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
          <ul>
              <li><img src="imageO.jpg" alt="not found" id="logo" class="logo"/> </li>
              <li><a href="#about">About</a></li>
              <li><a href="#pathway">Features</a></li>
              <li><a href="#implementation">Download</a></li>
          </ul>
    </div>
  </body>
</html>

I just changed the dimensions of my logo to 67px by 33px and this is reflected in the code above. I also tried changing imgsrc to "../img/imageO.jpg", however, this did not make a difference. — Sarah, Apr 17 '20 at 19:35
The problem is now your imgSource. Here you'll find how to do it: https://stackoverflow.com/questions/52919100/how-can-find-the-image-path-for-css/52923662#52923662 — HamiD, Apr 17 '20 at 19:40

score 0 · Answer 2 · answered Apr 17 '20 at 19:41

Here, I've done this in another way:

ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
          border-radius: 0px;
          position: fixed;
          top: 0;
          width: 100%;
   display:flex;
   justify-content:flex-end;
        }



        li a {
          display: block;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          font-size: 20px;
          margin-right: 20px;
        }

        /* Change the link color to #111 (black) on hover */
        li a:hover {
          background-color: #F29078;
          border-radius: 5px;
        }

        .active {
          background-color: #F29078;
        }

        .logo {
          width: 50px;
          height: 50px;
          border-radius: 5px;
          position:fixed;
          left:20px;;
        }

    <body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
          <ul>
              <li><img src="https://www.ikea.com/at/de/images/products/klappa-soft-toy-ball-multicolour__0606619_PE682422_S5.JPG?f=s" id="logo" class="logo"/> </li>
              <li><a href="#about">About</a></li>
              <li><a href="#pathway">Features</a></li>
              <li><a href="#implementation">Download</a></li>
          </ul>
    </div>

score 0 · Answer 3 · answered Apr 17 '20 at 19:53

Hi hope this pen would help with the position of the logo, also notice you have a closing div tag that does not open, as the previous answer i took out the logo from the Ul because since you are floating all the ul content it takes the logo too.

https://codepen.io/MoneWebGuru/pen/WNQwVGX`

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
      div {
          list-style-type: none;
          margin: 0;
          padding: 10px;
          overflow: hidden;
          background: url(../img/bg-pattern.png),linear-gradient(to left,#FF6900, orange);
          border-radius: 0px;
          position: fixed;
          top: 0;
        left:0px;
          width: 100%;
        }

        li {
          float: right;
          list-style-type: none;
        }

        #logo {
          float: left;
          display: inline-block;
        }

        li a {
          display: block;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          font-size: 20px;
          margin-right: 20px;
        }

        /* Change the link color to #111 (black) on hover */  

        li a:hover {
          background-color: #F29078;
          border-radius: 5px;
        }    

        .active {
          background-color: #F29078;
        }    

        .logo {        
          border-radius: 5px;
          height: 50px;
          padding-top:10px;
        }
      </style>
    </head>

    <body data-spy="scroll" data-target="#myScrollspy" data-offset="0">
     <div style="width:100%">
       <img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg" id="logo" class="logo"/>                    <ul>            
              <li><a href="#about">About</a></li>
              <li><a href="#pathway">Features</a>                   </li>
              <li><a href="#implementation">Download</a></li>
          </ul>
    </div>
  </body>
</html>

`

How would I place a logo at the top left hand corner of the screen?

3 Answers3