Как бы я поместил lo go в верхнем левом углу экрана? - PullRequest
Новая
       0

Как бы я поместил lo go в верхнем левом углу экрана?

1 голос
/ 17 апреля 2020

Вот мой код ниже. У меня проблемы с отображением lo go в верхнем левом углу экрана.

Моя основная проблема заключается в том, что изображение нигде не отображается на экране, хотя я ввел правильное имя файла в раздел изображения.

Если кто-нибудь сможет мне помочь, я буду очень признателен! Заранее спасибо. 

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

Ответы [ 3 ]

0 голосов
/ 17 апреля 2020

Здесь я сделал это по-другому: 

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>
0 голосов
/ 17 апреля 2020

Здравствуйте, надеюсь, что это перо поможет с позицией lo go, также обратите внимание, что у вас есть закрывающий тег div, который не открывается, так как в предыдущем ответе я вынул lo go из Ul, потому что, поскольку вы плавающий весь ul контент тоже занимает lo go.

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>

`

0 голосов
/ 17 апреля 2020

Ваш lo go действительно 7x5 px? Я просто перемещаю первый элемент li в левую сторону, и если imageO.jpg находится на том же пути, что и ваш Html, это прекрасно работает. 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...