Конфликт картинки и текста в css

Question

При создании шапки, я сделал текст "Главная", чтобы затем вложить в него ссылку на главную страницу, а позже решил что нужно вставить лого перед этим текстом.

После того, как я вставил картинку, она очень сильно съехала, и никакие параметры в CSS это не исправляют. Что делать не знаю, помогите пожалуйста.

* {
  margin: 0px;
  padding: 0px;
}

body {
  margin: 0px;
}

header {
  background-color: #000000;
  height: 120px;
  margin: 0px;
  padding: 0px;
}

#logo {
  padding-top: 28px;
  margin-left: 190px;
}

h1 {
  color: #757575;
  font-family: Sans-Serif;
  font-weight: 550;
  font-size: 13pt;
  padding-top: 28px;
  margin-left: 220px;
}

<!DOCTYPE html>
<html lang=ru>

<head>
  <meta charset=utf-8>
  <title>Pepeland</title>
  <!--заголовок, отображается в названии вкладки-->
  <link rel="stylesheet" href="csscode.css">
  <!--rel показывает что мы подключили стили, а href это название файла-->
</head>

<body>
  <header>
    <!--шапка сайта-->
    <img src="pictures/logo.png" width="50" id="logo">
    <h1>Главная</h1>
  </header>

  <footer>
    <!--подвал сайта, как шапка, но в самом низу-->
  </footer>
</body>

</html>

Answer 1

Вам нужно использовать свойство float. И желательно, разбивать лого и меню на отдельные div. Тогда получается такой код:

* {
  margin: 0px;
  padding: 0px;
}

body {
  margin: 0px;
}

header {
  background-color: #000000;
  height: 120px;
  margin: 0px;
  padding: 0px;
}

#logo {
  padding-top: 28px;
  margin-left: 190px;
  float: left;
}

h1 {
  color: #757575;
  font-family: Sans-Serif;
  font-weight: 550;
  font-size: 13pt;
  padding-top: 28px;
  margin-left: 220px;
}

<!DOCTYPE html>
<html lang=ru>

<head>
  <meta charset=utf-8>
  <title>Pepeland</title>
  <!--заголовок, отображается в названии вкладки-->
  <link rel="stylesheet" href="csscode.css">
  <!--rel показывает что мы подключили стили, а href это название файла-->
</head>

<body>
  <header>
    <!--шапка сайта-->
    <div id="logo">
      <img src="pictures/logo.png" width="50">
    </div>
    <div id="container_menu">
      <h1>Главная</h1>
    </div>
  </header>

  <footer>
    <!--подвал сайта, как шапка, но в самом низу-->
  </footer>
</body>

</html>

БЛОГ НА HUSL

Конфликт картинки и текста в css

Ответы (1 шт):