Как сделать так, чтобы изображение «lo go» отображалось в заголовке? - PullRequest
Новая
       5

Как сделать так, чтобы изображение «lo go» отображалось в заголовке?

1 голос
/ 07 мая 2020

Я очень, очень новичок в HTML и CSS, извините за мое незнание! Я пытаюсь добавить изображение в свой заголовок в go слева и над навигацией. Любая помощь, которую может дать кто угодно, была бы потрясающей !!

Я пробовал два способа добавления изображения, первый использовал, но он не отображался (я мог видеть «содержимое» изображения, выделенное синим цветом на странице, когда я был в консоли, но я не мог не вижу изображения. Второй способ, который я использовал, а затем css ниже: 

body {
    background-color:#4A4849;
    margin: 0 auto;
    font-family:Arial, helvetica, sans-serif;    
}

.Logo {         
        display: inline;
        float:left;
        width: 100%;
        height: 100%;
        background-image: url('../Images/Logo.png');
}

header {
    text-align: center;
    width: 100%;
    height: 15%;
    background-color: white;
    margin: 0;
}

Мой полный CSS включает в себя ниже ... Я чувствую, что проблема связана с , поскольку в консоли размеры отображаются как 1304x0 (но я могу видеть навигацию), поэтому я попытался настроить заголовок, поэтому он дублируется с .topnav. (см. ниже):) 

.topnav {
        font-weight: bold;
        background-color: white;
        overflow: hidden;
        position: fixed;
        top: 0;
        left 0;
        width:100%;
        height:15%;
       }

.topnav ul  {
        list-style-type:none;
        overflow: hidden;
        margin:0;
        padding: 0;
}

.topnav li  {
            display:inline;
            padding: 0px;
            margin: 0px;

            }

.topnav a {

        float: right;
        color: #4A4849;
        text-align: center;
        padding: 20px 10px;
        text-decoration:none;
        width:10%;
        }

Было бы здорово, если бы кто-нибудь мог помочь, так как я пробовал разные вещи, основываясь на ресурсах, которые я нашел в Интернете!

*HTML, в случае необходимости: 

<body>
  <header>
      <div class="Logo"></div>

    <nav>
      <div class="topnav">
        <ul>
            <li><a href="Contact.html">CONTACT US</a></li>
            <li><a href="About.html">ABOUT US</a></li>
            <li><a href="GraphicDesign.html">GRAPHIC DESIGN</a></li>
            <li><a href="HouseArt.html">MARKET</a></li>
            <li><a href="Home.html">HOME</a></li>

        </ul>
      </div>

  </nav>
</header>

1 Ответ

0 голосов
/ 07 мая 2020

Есть несколько вещей, которые можно изменить в зависимости от того, как вы настраиваете вещи:

  1. Я бы рекомендовал не делать ваш lo go background-image в div, когда * Тег 1005 * будет работать лучше в вашем случае (<img src="path/to/your/logo.png">).
  2. Если вы используете его как background-image в div, вы должны помнить, что фоновые изображения не влияют на высоту элемента .
  3. Установка высоты % в .Logo div также не будет работать, поскольку процентная высота должна быть относительно содержащего элемента, и вы также установите его как элемент inline (высота будет не применять). Поскольку его родительский элемент (header) имеет высоту 15%, но этот элемент также не имеет ссылки на 15% - например, 15% чего? Тег body должен иметь высоту 100%.

Только для вашего lo go, я бы просто сделал это: 

<header>
    <img src="your logo link">

    <nav>
      <div class="topnav">
        <ul>
            <li><a href="Contact.html">CONTACT US</a></li>
            <li><a href="About.html">ABOUT US</a></li>
            <li><a href="GraphicDesign.html">GRAPHIC DESIGN</a></li>
            <li><a href="HouseArt.html">MARKET</a></li>
            <li><a href="Home.html">HOME</a></li>

        </ul>
      </div>

  </nav>
</header>

Если вы действительно хотите сделать его фоновым изображением: 

.Logo {
  height: whatever your logo height is;
  display: block;
  background-image: url( ../Images/logo.png );
  background-repeat: no-repeat;
}
<header>
      <div class="Logo"></div>

    <nav>
      <div class="topnav">
        <ul>
            <li><a href="Contact.html">CONTACT US</a></li>
            <li><a href="About.html">ABOUT US</a></li>
            <li><a href="GraphicDesign.html">GRAPHIC DESIGN</a></li>
            <li><a href="HouseArt.html">MARKET</a></li>
            <li><a href="Home.html">HOME</a></li>

        </ul>
      </div>

  </nav>
</header>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...