БЛОГ НА HUSL


Как разместить в шапке сайта картинку справа а текст слева?

Автор вопроса: jonathan rogers 

<!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>Document</title>
    <style>
        div{
            background: gray;
            height: 100px; 
            text-align: right;                
        }
        p2{
            display: inline-block;
            background: orange;
            color: aliceblue;
            padding: 5px;
            margin: 40px 40px 60px 20px;
            border-radius: 20px;           
        }           
        img{                
            margin-left: 30px ;                
        }
        p3{
            margin: 10px 30px 10px 12px;
            color: aliceblue;
        }
        p4,p5{
            color: aliceblue;
            margin: 60px 30px 10px 12px;            
        }
        .logo{
            height: 80px;
            width: 158px;
            margin-right:400px;
        }
        div2{
            height:  100px;
            width: 100%;
        }
        h1{
            height: 120px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div>
        <img src="/html-css-starter-materials/006/DZ/images/logo.png" alt="">
        <img src="/html-css-starter-materials/006/DZ/images/phone icon.png" alt=""><p3>0 800 337 146</p3>
        <img src="/html-css-starter-materials/006/DZ/images/Skype icon.png" alt=""><p4>support_cbs</p4>
        <img src="/html-css-starter-materials/006/DZ/images/telegram icon.png" alt=""><p5>cbs_support</p5>
   
        <p2>Заказать консультацию</p2> 
    </div>
    <div2>
        <h1></h1>
    </div2>
    
</body>
</html>

Я только учусь html разметке, и мне дали задание введите сюда описание изображения

Все получается хорошо именно до того момента, когда я добавляю лого в левую часть. Вот так до добавление картинки слевавведите сюда описание изображения А вот уже после добавлениявведите сюда описание изображения Само лого можно разместить ближе к левому краю но вот информация с правой части никак не центрируется по вертикали. Прилагаю код и надеюсь на помощь(картинки не грузит потому что они у меня на компе)


Источник

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

Автор решения: SLideR11

Объединяйте необходимые элементы в группы. И советую почитать про flex-box, он Вам не раз спасёт положение.

введите сюда описание изображения

.head {
  background: gray;
  height: 150px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

p2 {
  display: inline-block;
  background: orange;
  color: aliceblue;
  padding: 5px;
  margin: 40px 40px 60px 20px;
  border-radius: 20px;
}

img {
  margin-left: 30px;
}

p3 {
  margin: 10px 30px 10px 12px;
  color: aliceblue;
}

p4,
p5 {
  color: aliceblue;
  margin: 60px 30px 10px 12px;
}

.logo {
  height: 80px;
  width: 158px;
  margin-right: 400px;
}

div2 {
  height: 100px;
  width: 100%;
}

h1 {
  height: 120px;
  width: 100%;
}
<!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>Document</title>
</head>

<body>
  <div class="head">
    <div class="head-logo">
      <img src="https://i.ibb.co/99DPhQC/logo.jpg" alt="logo" border="0">
    </div>
    <div class="head-cont">
      <img src="/html-css-starter-materials/006/DZ/images/phone icon.png" alt="">
      <p3>0 800 337 146</p3>
      <img src="/html-css-starter-materials/006/DZ/images/Skype icon.png" alt="">
      <p4>support_cbs</p4>
      <img src="/html-css-starter-materials/006/DZ/images/telegram icon.png" alt="">
      <p5>cbs_support</p5>

      <p2>Заказать консультацию</p2>
    </div>
  </div>
  <div2>
    <h1></h1>

  </div2>

</body>

</html>

Вариант без flex-box:

.head {
  background: gray;
  height: 150px;
  position: relative;
  display: block;
}

.head>div {
  display: block;
  width: 50%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.head-logo {
  float: left;
}

.head-cont {
  float: right;
  text-align: right;
}

p2 {
  display: inline-block;
  background: orange;
  color: aliceblue;
  padding: 5px;
  margin: 40px 40px 60px 20px;
  border-radius: 20px;
}

img {
  margin-left: 30px;
}

p3 {
  margin: 10px 30px 10px 12px;
  color: aliceblue;
}

p4,
p5 {
  color: aliceblue;
  margin: 60px 30px 10px 12px;
}

.logo {
  height: 80px;
  width: 158px;
  margin-right: 400px;
}

div2 {
  height: 100px;
  width: 100%;
}

h1 {
  height: 120px;
  width: 100%;
}
<!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>Document</title>
</head>

<body>
  <div class="head">
    <div class="head-logo">
      <img src="https://i.ibb.co/99DPhQC/logo.jpg" alt="logo" border="0">
    </div>
    <div class="head-cont">
      <img src="/html-css-starter-materials/006/DZ/images/phone icon.png" alt="">
      <p3>0 800 337 146</p3>
      <img src="/html-css-starter-materials/006/DZ/images/Skype icon.png" alt="">
      <p4>support_cbs</p4>
      <img src="/html-css-starter-materials/006/DZ/images/telegram icon.png" alt="">
      <p5>cbs_support</p5>

      <p2>Заказать консультацию</p2>
    </div>
  </div>
  <div2>
    <h1></h1>

  </div2>

</body>

</html>

→ Ссылка
Автор решения: Евгений Ли
  1. Не используйте <p2>, <p3>, <div2> и подобное, если хотите придать уникальность тегу - лучше задайте class - <p class="2">, <div class="2">
  2. При расстановке элементов по разные стороны друг от друга всегда знайте, что должно быть только два элемента, если их больше, вы должны обернуть эти несколько элементов, которые с одной стороны и элементы, которые с другой стороны, что бы получилось по сути два элемента с вложениями.
  3. Равные отступы для внутренних элементов делайте за счёт их родителя - header-у как вы видите я задал padding.
  4. Не задавайте отступы большие как вы задали у logo - margin-right: 200px так как этот промежуток между логотипом и меню не постоянен и варьируется от ширины экрана.
  5. Старайтесь не указывать точную высоту элементам как вы указали в header, так как она может изменяться в зависимости от вложений, проще использовать min-height, таким образом она не станет меньше, но может растянуться, если понадобится.
  6. Когда у вас идёт список - в данном случае меню ваше, обычно используются ul, ol теги, но не будет ошибкой, если вы используете div например
  7. У вас меню и кнопка - это ссылки, а ссылки должны оборачиваться в тег <a>
    Может ещё что упустил, но вы пока учитесь и наверное всё ещё придёт с практикой.

div {
  box-sizing: border-box;
}

.header {
  background: gray;
  min-height: 100px;
  padding: 25px 15px;
}

.logo {
  width: 100px;
  height: auto;
  float: left;
}
.logo img {
  display: block;
  max-width: 100%;
  height: 50px;
  background-color: white;
}

.menu {
  float: right;
  display: block;
  margin: 15px 0;
}

.menu-item {
  list-style: none;
  margin-left: 20px;
  float: left;
}

.menu-item a {
  text-decoration: none;
  color: white;
}
.menu-item.last a {
  padding: 5px 20px;
  border-radius: 50px;
  background-color: orange;
}

.menu-item img {
  float: left;
  width: 20px;
  height: 20px;
  background-color: white;
}

.menu-item p {
  float: left;
  margin-bottom: 0;
  margin-left: 5px;
  margin-top: 0;
  margin-right: 0;
}
<div class="header">
  <div class="logo">
    <img src="/html-css-starter-materials/006/DZ/images/logo.png" alt="">
  </div>
  <ul class="menu">
    <li class="menu-item first">
      <a href="#">
        <img src="/html-css-starter-materials/006/DZ/images/phone icon.png" alt="">
        <p>0 800</p>
      </a>
    </li>
    <li class="menu-item">
      <a href="#">
        <img src="/html-css-starter-materials/006/DZ/images/Skype icon.png" alt="">
        <p>supp</p>
      </a>
    </li>
    <li class="menu-item">
      <a href="#">
        <img src="/html-css-starter-materials/006/DZ/images/telegram icon.png" alt="">
        <p>cbs</p>
    </a>
    </li>
    <li class="menu-item last">
      <a href="#">Заказать</a>
    </li>
  </ul>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.