Не совпадают пиксели в фотошопе и браузере. Как сделать что бы размеры совпадали?

artemtool

Не совпадают пиксели в фотошопе и браузере. В чем может быть проблема?
11 ответов

artemtool

artemtool, сверстано не в соответствие с макетом


artemtool

whiteapps,А что именно не так? Подскажите пожалуйста
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Квартиры</title>
</head>
<body>
    <header>
        <div class="header_wrap">
            <div class="logo">
                <h1><span>КВАРТИРЫ ПОСУТОЧНО</span> В МОСКВЕ</h1><br>
                <a href="#"><strong>home4night.ru</strong></a>
            </div>
            <ul class="top_menu">
                <li class="active"><img src="http://www.cyberforum.ru/images/1.png" alt="AA"><br><a href="#">Главная</a></li>
                <li><img src="http://www.cyberforum.ru/images/2.png" alt="AA"><br><a href="#">Квартиры</a></li>
                <li><img src="http://www.cyberforum.ru/images/3.png" alt="AA"><br><a href="#">Общая информация</a></li>
                <li><img src="http://www.cyberforum.ru/images/4.png" alt="AA"><br><a href="#">Контакты</a></li>
            </ul>
        </div>
        <div class="line_wrap"><div class="line"></div></div>
    </header>
    <div class="container_wrap">
        <div class="container">
            <div class="c1"></div>
            <div class="c2"></div>
        </div>
    </div>
</body>
</html>
body{
    margin: 0;
    padding: 0;
    background-color: #c5c5c5;
}
header{
    text-align: center;
    background: #1c1c1c;
}
@font-face {
    font-family: Bebas; /* Гарнитура шрифта */
    src: url(fonts/BebasNeue.ttf); /* Путь к файлу со шрифтом */
   }
 @font-face {
    font-family: Curlz; /* Гарнитура шрифта */
    src: url(fonts/Curlz.ttf); /* Путь к файлу со шрифтом */
 }
.header_wrap{
    width: 960px;
    display: inline-block;
    background: #1c1c1c;
    height: 86px;
}
.logo{
    padding-top: 12px;
    color: #fff;
    display: inline-block;
    float: left;
}
.logo h1{
    margin: 0;
    font-size: 20px;
    font-family: 'Bebas';
    text-align: center;
    display: inline-block;
}
.logo span{
    color: #bc2222;
}
.logo a{
    color: #fff;
    font-family: 'Curlz';
    text-decoration: none;
    font-size: 33px;
}
.top_menu{
    float: right;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: inline-block;
    padding-top: 16px;
}
.top_menu li.active, .top_menu li:hover{
    opacity: 1;
    border-bottom: 1px dashed #fff;
}
.top_menu li{
    display: inline-block;
    text-align: center;
    margin-right: 20px;
    opacity: 0.5;
        -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
.top_menu li a{
    font-family: 'Bebas';
    color: #fff;
    text-transform: uppercase;
    font-size: 20px;
    text-decoration: none;
}
.line_wrap{
    background-image: url(images/bottom_menu_stripe.png);
    background-repeat: repeat;
}
.line{
    height: 4px;
    background-image: url(images/bottom_menu_stripe.png);
    background-repeat: repeat;
    width: 960px;
    margin-top: -4px;
}
.container_wrap{
    text-align: center;
}
.container{
    width: 960px;
    height: 50px;
    display: inline-block;
    text-align: center;
    background-color: #8f8f8f;
}
.top_menu li:nth-child(4) {
    margin-right: 0;
}
.c1{
    width: 476px;
    height: 20px;
    display: inline-block;
    background-color: #fff;
}
.c2{
    width: 476px;
    height: 20px;
    display: inline-block;
    background-color: #fff;
}


artemtool

artemtool, а где макет или маркером на мониторе рисовать картинки, которые Вы в код добавляете...?


artemtool

Fedor92,


artemtool

artemtool, ну выглядеть эта шняга будет примерно так...test4.rar Здесь много всего можно оптимизировать в коде - это просто пример...


artemtool

Fedor92, Спасибо, только учусь


artemtool

Fedor92, а в чем проблема была, не правильная вырезка в фотошопе?


artemtool

Fedor92, а в чем проблема была, не правильная вырезка в фотошопе?
Там особо ничего не вырезалось, кроме иконок для меню... Проблема была в отступах, подборе размера шрифта, ширине блока лого и блока списка... Ну и не совсем правильно подключались кастомные шрифты... То что я правил - это тоже далеко не эталонный вариант... Есть свойства в коде у которых не хватает префиксов, есть лишние свойства, есть свойства, которые можно объединить... Моей задачей было показать расположение элементов в шапке...


artemtool

Ясно, то есть верстка,
Проблема была в отступах, подборе размера шрифта, ширине блока лого и блока списка
А вот это вот как подбирать с макета или на глаз подбирать?


artemtool

А вот это вот как подбирать с макета или на глаз подбирать?
В макете можно посмотреть с помощью инструмента "Прямоугольная область"...


artemtool

В макете можно посмотреть с помощью инструмента "Прямоугольная область"...
понятно, спасибо.