Почему в фотошопе все ровно, а в реальности при тех же стилях не ровно?

@inquisitor · Регистрация: 22.12.2015

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

Почему в фотошопе все ровно, а в реальности при тех же стилях не ровно?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
body{
    background-color:#f7f7f7;
}
table{
    background-color:#ffffff;
}
* {
  box-sizing: border-box;
}
 
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 
 
 
.header {
    background-image: url(../images/header.png);
    background-repeat: no-repeat;
    height: auto;
    min-height:160px;
    width:100%;
    max-width:100%;
    background-size: 100% auto;
}
.saunaimg{
    background-image: url(../images/sauna.png);
    background-repeat: no-repeat;
    height: auto;
    min-height:685px;
    background-size: 100% auto;
    margin-top: 25px;
    margin-right: 10px;
    width:100%;
    max-width:100%;
    background-size: 100% auto;
}
.geschenk{
    background-image: url(../images/Geschenk.png);
    background-repeat: no-repeat;
    height: auto;
    min-height:512px;
    background-size: 100% auto;
    width:100%;
    max-width:100%;
}
.footer {
    background-image: url(../images/footer.jpg);
    background-repeat: no-repeat;
    height: auto;
    min-height:160px;
    width:100%;
    max-width:100%;
    background-size: 100% auto;
}
.yeelow{
    background-repeat:repeat-y;
    
}
p{
    font-family: "Helvetica Neue";
    color:#000;
    font-size: 20px;
    line-height: 1.5;
    text-align: left;
    text-indent: 20px;
}
.Natura{
  font-family: "Helvetica Neue";
  color: #a7504d;
  font-weight: bold;
  text-align: left;
  text-indent: 20px;
}
.Natura2{
    font-weight:bold;
}
.Natura3{
    font-weight:normal;
}
.Diskreter{
  font-size: 20px;
  font-family: "Helvetica Neue";
  color: #4d7f00;
  font-weight: bold;
  line-height: 0.767; 
  text-align: left;
  text-indent: 70px;
  padding-left: 30px;
  margin-top:-30px;
}
.Dhl{
  font-size: 20px;
  font-family: "Helvetica Neue";
  color: rgb(77, 127, 0);
  font-weight: bold;
  text-align: left;
  text-indent: 20px;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="CSS/style.css" />
    <title>Dekovital_ebay</title>
</head>
<body>
<div class="header"></div>
    
<table  style="width: 94%;margin: 0 auto;"  >
<tbody>
<tr >
            <td><!-- 11 -->
            <img class="yeelow" src="images/yeelow_polosa.png" 
                width="2"  alt="lorem"/>
            </td>
            
            <td style="vertical-align:top;width:50% ">
            <!-- 22 -->
                <div class="saunaimg"></div> 
            </td>
            
            <td>
            <!-- 33 -->
            <img class="yeelow" src="images/yeelow_polosa.png" 
                width="2"  alt="lorem"/>
            </td>
            
            <td style="vertical-align:top;">
            <!-- 44 -->
                        <p class="Natura">Natura Siberica Sauna-Spa Massageol fjir den Korper 370 ml</p>
                        <p>Густое массажное масло для тела Natura Siberica "Sauna & Spa" было разработано специально для питания и восстановления кожи в сауне и после нее, когда поры глубоко очищены и раскрыты, благодаря чему активные компоненты глубоко проникают в кожу, насыщают ее питательными элементами, придают ей нежность и необыкновенную мягкость. В состав средства входят органическое розовое масло, вечерница сибирская, бархат амурский, белый воск.</p>
                        <p>Органическое розовое масло повышает эластичность и упругость кожи, придает ей ровный и красивый цвет. Белый воск смягчает и защищает кожу от вредных воздействий окружающей среды. Вечерница сибирская смягчает и увлажняет кожу. Бархат амурский способствует укреплению и увлажнению кожи, стимулирует синтез коллагена. Подходит для ежедневного использования.</p>
                        <p class="Natura2">Способ применения:<span class="Natura3">нанесите масло на чистую сухую кожу и проведите сеанс антицеллюлитного массажа</span></p>
                        <p class="Natura2">Inhalt:<span class="Natura3">370 ml</span></p>       
 
            </td>
</tr>
<tr>
 
<td><!-- 11 -->
<img class="yeelow" src="images/yeelow_polosa.png" 
                width="2"  alt="lorem"/>
</td>
<td style="vertical-align:top;">
<!-- 22 -->
<img  src="images/diskreter1.png" 
                width="85"  alt="lorem"/>
        <p class="Diskreter"><span style="text-decoration:underline;">Dis</span>kreter Premiumversand</p>
                <p class="Dhl">DHL — Premiumversand</p>
                <p>schnelle und diskrete Lieferung ,alle Bestellungen werden in 
                    unbeschriebenen Verpackungen verschickt ,auf den weder der Name, 
                    noch das Logo von Dekovital steht.</p>
<img  src="images/sichere1.png" 
                width="85"  alt="lorem"/>
                <p class="Diskreter"><span style="text-decoration:underline;">Sic</span>here Zahlung</p>
                <p class="Dhl">Zahlung per Paypal!</p>
                <p>oder, sofern Sie kein eingerichtetes PayPal Konto haben, 
                    mit Lastschrift oder Kreditkarte als Paypal Gast zu bezahlen.</p>
<img  src="images/gratis1.png" 
                width="85"  alt="lorem"/>
            <p class="Diskreter"><span style="text-decoration:underline;">Gra</span>tis Versand</p> 
            <p class="Dhl">Schauen Sie sich unsere anderen Artikel bei eBay!</p>
                <p>Beim Kauf mehrerer Artikel zahlen Sie nur einmal Versandkosten und 
                    ab einem Bestellwert von 20,00 Euro berechnen wir keine Versandkosten.</p>  
    </td>
 <td><!-- 33 -->
<img class="yeelow" src="images/yeelow_polosa.png" 
                width="2"  alt="lorem"/>
</td>
<td style="vertical-align:top;">
<!-- 44 -->
<div class="geschenk"></div> 
                 
</td>
 
</tr>
</tbody>
</table>
 
<section class="footer"> </section>
</body>
</html>

@inquisitor · 27.08.2018, 10:42 **[ТС]**

Картинки и шрифт
Decovital_ebay.rar

@inquisitor · 27.08.2018, 10:43 **[ТС]**

Делал на дивах,тоже самое получается.

@6elka1703 · 27.08.2018, 11:21

scherbakovss201, что верстали, то и получили. И если вы берете все стили из фотошопа, увы это уже не верстка, а бред

@inquisitor · 27.08.2018, 11:32 **[ТС]**

Сообщение от 6elka1703

scherbakovss201, что верстали, то и получили. И если вы берете все стили из фотошопа, увы это уже не верстка, а бред

я беру такие стили:
1 название шрифта
2 размер шрифта
3 его интерлияж
4 его тип(Жирный/курсив)
5 выравнивание текста в этом слое
6 само содержимое(сам текст из слоя)
7 цвет шрифта
8 картину сохраняю в png,как есть.
Все макеты в фотошопе абсолютно позиционированы,потому я позиции не беру.
А,что нужно из стилей брать?

@AlexZaw · 27.08.2018, 12:26

Межсимвольное расстояние еще бывает меняют в тексте. Из-за этого у вас текст может быть шире или уже чем в макете.
Либо дизайнер просто растягивает или наоборот сужает текстовый блок и тогда придется вручную подбирать это расстояние и далеко не факт что оно будет идеально подходить под макет

@inquisitor · 27.08.2018, 12:29 **[ТС]**

Сообщение от AlexZaw

Межсимвольное расстояние еще бывает меняют в тексте. Из-за этого у вас текст может быть шире или уже чем в макете.
Либо дизайнер просто растягивает или наоборот сужает текстовый блок и тогда придется вручную подбирать это расстояние и далеко не факт что оно будет идеально подходить под макет

и все таки,если взять стили с макета указанные выше для текста в левой колонке,с права адаптивную картинку.То картинку наполовину меньше текстового блока,а в макете фотошоп все ровно смотрите на картинку выше.
Что делать?

@6elka1703 · 27.08.2018, 12:32

scherbakovss201, чтоб всем было проще просто скиньте что ц вас получилось а не на словах, и покажите где проблема

@AlexZaw · 27.08.2018, 12:41

Взял ваш код, поместил туда случайные картинки (специально 100 на 100 пикселей размером) Все картинки растягиваются по высоте текстового блока.

@inquisitor · 27.08.2018, 13:36 **[ТС]**

Сообщение от AlexZaw

Взял ваш код, поместил туда случайные картинки (специально 100 на 100 пикселей размером) Все картинки растягиваются по высоте текстового блока.

Только картинка 512х567 и 340х465,ужать ее можно,только это будет нечто скомканное.Я пишу про две больше картинки9не шапка и не футер и не значки).

@AlexZaw · 27.08.2018, 13:49

Сообщение от scherbakovss201

Только картинка 512х567 и 340х465

Без разницы, картинки у вас находятся в ячейке таблицы, все ячейки в одном ряду одинаковой высоты. Т.е. ячейка с картинкой у вас такой же высоты как и ячейка с текстом (так как они в одном ряду). Фон у вас растянут на всю ширину и высоту ячейки, и он не может быть меньше, значит ошибка в другом месте.

Сообщение от scherbakovss201

Я пишу про две больше картинки9не шапка и не футер и не значки)

Я понял, но еще раз говорю, ваш код с произвольными картинками работает нормально. Скиньте архив со всеми картинками и файлами, иначе мы будем до бесконечности гадать.

@inquisitor · 27.08.2018, 14:23 **[ТС]**

Добавлено через 3 минуты
Каюсь не ту ссылочку отправил,вот эта правильная на гугл диск
https://drive.google.com/open?... I-OUb_fLjO

@AlexZaw · 27.08.2018, 14:37

В вашем архиве картинка даже больше по высоте чем текстовый блок, но я понял про что вы говорили. У вас картинка с разделительной полосой 1112px в высоту, и она, соответсвенно, растягивает другие ячейки в ряду. Вставьте эту полосу фоном, а не картинкой. Можете даже сделать ее 1px высотой и просто прописать фону repeat-y

@inquisitor · 27.08.2018, 15:30 **[ТС]**

Сообщение от AlexZaw

В вашем архиве картинка даже больше по высоте чем текстовый блок, но я понял про что вы говорили. У вас картинка с разделительной полосой 1112px в высоту, и она, соответсвенно, растягивает другие ячейки в ряду. Вставьте эту полосу фоном, а не картинкой. Можете даже сделать ее 1px высотой и просто прописать фону repeat-y

4 желтые вертикальные полосы-картинки я могу убрать.Мне больше интересно,как картинку сразу под шапкой выровнять выровнять по высоте с текстом в правой rколонке и аналогично тест с зеленой картинкой в правом блоке над футером выровнять по высоте с текстом в левом блоке.Это возможно?
Показал оранжевой линией.

@AlexZaw · 27.08.2018, 15:50

Убираете или уменьшаете разделительные полосы, вместо дивов с картинками делаете эти картинки фоном для ячейки и задаете фону background-size: 100% 100%;

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@inquisitor 25 / 9 / 17 Регистрация: 22.12.2015 Сообщений: 2,097
	27.08.2018, 10:42 [ТС]
	Картинки и шрифт Decovital_ebay.rar 0

@inquisitor 25 / 9 / 17 Регистрация: 22.12.2015 Сообщений: 2,097
	27.08.2018, 10:43 [ТС]
	Делал на дивах,тоже самое получается. 0

@6elka1703 91 / 85 / 27 Регистрация: 29.10.2016 Сообщений: 928
	27.08.2018, 11:21
	scherbakovss201, что верстали, то и получили. И если вы берете все стили из фотошопа, увы это уже не верстка, а бред 1

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	27.08.2018, 12:26
	Межсимвольное расстояние еще бывает меняют в тексте. Из-за этого у вас текст может быть шире или уже чем в макете. Либо дизайнер просто растягивает или наоборот сужает текстовый блок и тогда придется вручную подбирать это расстояние и далеко не факт что оно будет идеально подходить под макет 0

@6elka1703 91 / 85 / 27 Регистрация: 29.10.2016 Сообщений: 928
	27.08.2018, 12:32
	scherbakovss201, чтоб всем было проще просто скиньте что ц вас получилось а не на словах, и покажите где проблема 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	27.08.2018, 12:41
	Взял ваш код, поместил туда случайные картинки (специально 100 на 100 пикселей размером) Все картинки растягиваются по высоте текстового блока. 0

@inquisitor 25 / 9 / 17 Регистрация: 22.12.2015 Сообщений: 2,097
	27.08.2018, 14:23 [ТС]
	Добавлено через 3 минуты Каюсь не ту ссылочку отправил,вот эта правильная на гугл диск https://drive.google.com/open?... I-OUb_fLjO 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	27.08.2018, 14:37
	В вашем архиве картинка даже больше по высоте чем текстовый блок, но я понял про что вы говорили. У вас картинка с разделительной полосой 1112px в высоту, и она, соответсвенно, растягивает другие ячейки в ряду. Вставьте эту полосу фоном, а не картинкой. Можете даже сделать ее 1px высотой и просто прописать фону repeat-y 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	27.08.2018, 15:50
	Убираете или уменьшаете разделительные полосы, вместо дивов с картинками делаете эти картинки фоном для ячейки и задаете фону `background-size: 100% 100%;` 0