Результат верстки не соответствует макету, хотя все делаю правильно

@Georgiy2017 · Регистрация: 30.07.2017

Author24 — интернет-сервис помощи студентам

Добрый день, я не понимаю почему у меня результат верстки, не соответсвует макету.
Я в фотошопе выбрал логотип, он показывает что размер шрифта логотипа 24px и в меню текст 20px. Отступы тоже указывал верно, но даже при всем одинаковом, мне не хватает места для других элементов, хотя в макете все вмещается нормально, макет в ширину 1000px, я тоже указал 1000px. Может это у меня фотошоп автоматически увеличивает размеры шрифты?...

@gogolik · 06.02.2019, 00:32

Код?

@Georgiy2017 · 06.02.2019, 00:51 **[ТС]**

HTML5

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../Styles Conference/style/meyerweb.css">
    <link rel="stylesheet" href="styles/stylemain.css">
    <title>Practic</title>
</head>
 
<body>
    <header>
        <div class="header-container">
            <div id="logo">LO<span>GO</span></div>
            <nav>
                <ul class="menu">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Shop</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Pages</a></li>
                </ul>
            </nav>
        </div>
    </header>
</body>
 
</html>

CSS

.group::before,
.group::after {
    content: "";
    display: table;
}
 
.group::after {
    clear: both;
}
 
.group {
    background: #eaeaed;
    border-radius: 6px;
    clear: both;
    *zoom: 1;
}
 
* {
    margin: 0px;
    padding: 0px;
}
 
body {
    font-family: 'Sansation', sans-serif;
    color: white;
}
 
#logo {
    font-size: 24px;
    margin: 20px 93px 22px 30px;
}
 
#logo span {
    color: red;
}
 
header {
    background: url("../images/ap-ui.jpg") no-repeat top / cover;
    width: 1000px;
}
a {
    color: #fff;
    text-decoration: none;
    line-height: 26px;
}
 
ul {
    display: flex;
}
 
li {
    list-style-type: none;
    margin: 0px 59px 0px 0px;
    font-size: 20px;
}
.header-container {
    display: flex;
}
.menu {
    margin: 20px 0px 0px 40px;
}

@gogolik · 06.02.2019, 09:10

https://codepen.io/anon/pen/xMXpjr

HTML5

<header>
  <div class="header-container">
    <div id="logo">LO<span>GO</span></div>
    <nav>
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Pages</a></li>
      </ul>
    </nav>
  </div>
</header>

CSS

* {
  margin: 0px;
  padding: 0px;
}
body {
  font-family: 'Sansation', sans-serif;
  color: white;
}
header {
  background: url("https://via.placeholder.com/1000") no-repeat top / cover;
  width: 1000px;
  margin: 0 auto;
}
.header-container {
  display: flex;
  align-items: center;
  height: 70px;
}
#logo {
  font-size: 24px;
  margin: 0 93px 0 30px;
}
#logo span {
  color: red;
}
nav {
  width: 100%;
}
.menu {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  margin: 0 30px 0 0;
  
}
.menu a {
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  line-height: 26px;
}

@Georgiy2017 2 / 2 / 4 Регистрация: 30.07.2017 Сообщений: 42
		1
	Результат верстки не соответствует макету, хотя все делаю правильно 05.02.2019, 23:25. Показов 1280. Ответов 3 Метки не соответствующие размеры (Все метки) Добрый день, я не понимаю почему у меня результат верстки, не соответсвует макету. Я в фотошопе выбрал логотип, он показывает что размер шрифта логотипа 24px и в меню текст 20px. Отступы тоже указывал верно, но даже при всем одинаковом, мне не хватает места для других элементов, хотя в макете все вмещается нормально, макет в ширину 1000px, я тоже указал 1000px. Может это у меня фотошоп автоматически увеличивает размеры шрифты?... 0

@gogolik Модератор 2687 / 1759 / 760 Регистрация: 13.03.2010 Сообщений: 5,845
	06.02.2019, 00:32	2
	Код? 0

	06.02.2019, 09:10