Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Igor_css
1 / 1 / 0
Регистрация: 08.04.2013
Сообщений: 15
#1

Верстка шапки шаблона - HTML, CSS

10.04.2013, 19:21. Просмотров 996. Ответов 9
Метки нет (Все метки)

При верстке шапки возникли первые проблемы:
1. Так как разрешение экрана моего ноутбука 1366:768, а высота фона шапки в макете 432 пикселя, то фон шапки занимает больше чем половину экрана (скриншот прикреплен к ответу). Это так и должно быть? (Размер исходного макета 1500:1490).
2.Как обычно верстают макеты? Пиксель в пиксель?
3. Как в Photoshop (CS2) точно высчитывать расстояния между объектами в пикселах? Когда я измерял высоту шапки, то проводил вспомогательную горизонтальную линию, затем увеличивал изображение и смотрел размер в пикселях в точке пересечения вспомогательной линии и вертикальной линейки. Сейчас нужно высчитать положение рекламы в пикселях относительно фона шапки. Выше описанным способом это будет сделать немного муторно. Может есть более простой способ расчета расстояний?

CSS фона шапки
CSS
1
2
3
4
5
.header {
    background-image: url(Header.jpg);
    height: 432px;
    width:100%;
}
0
Миниатюры
Верстка шапки шаблона  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.04.2013, 19:21
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Верстка шапки шаблона (HTML, CSS):

Верстка шапки. - HTML, CSS
Доброго времени суток, уважаемые! Вопрос в следующем, начал заниматься освоением верстки и взял у знакомого простенький сайт тестовый для...

СРОЧНО! Верстка шапки - HTML, CSS
В аттаче картинка. Подскажите пожалуйста, как сверстать? Должно растягивать по ширине - то есть резинка. Пожалуйста, ответьте. Премного...

Верстка нестандартной шапки сайта - HTML, CSS
Здравствуйте всем верстальщикам и другим специалистам. Получил заказ на верстку. Думал ничего сложного (одностраничник). Как обычно за пару...

Верстка адаптивной шапки сайта - HTML, CSS
Я только начинаю заниматься веб разработкой, пока для себя. И вот задумал я сверстать вот такую шапку как на прикрепленном изображении ...

Верстка шапки для сайта - HTML, CSS
Помогите сверстать шапку для сайта при помощи div 1 div логотип 2 div название сайта 3 div поиск 4 div добавление в закладки ...

Вёрстка шапки шаблона по готовому макету - HTML, CSS
Доброго времени суток. Я новичек в вебе. Прошу вашей помощи, прошел курсы html&css, скачал бесплатный шаблон для тренировки.. ...

9
Rang
5 / 5 / 0
Регистрация: 24.09.2011
Сообщений: 147
10.04.2013, 22:58 #2
По-поводу расстояния...В интернете полно утилит ,различных линеек.MySize,например...
0
Igor_css
1 / 1 / 0
Регистрация: 08.04.2013
Сообщений: 15
10.04.2013, 23:01  [ТС] #3
Спасибо за утилиту, в ближайшее время попробую.
Ссылка на макет сайта: http://psdmania.ru/psd_maketi_saitov...-template.html
0
Rang
5 / 5 / 0
Регистрация: 24.09.2011
Сообщений: 147
10.04.2013, 23:05 #4
Screen Calipers попробуйте.На мой взгляд,самая удобная.
0
Lavey222
0 / 0 / 0
Регистрация: 10.04.2013
Сообщений: 13
10.04.2013, 23:07 #5
Цитата Сообщение от Rang Посмотреть сообщение
Screen Calipers попробуйте.На мой взгляд,самая удобная.
Солидарен
0
Сергей Юрьевич
8 / 8 / 0
Регистрация: 22.04.2013
Сообщений: 59
22.04.2013, 22:20 #6
mySise-програмка конечно классная, но без подгонки всё равно не обойтись.
0
Donald28
странник
809 / 480 / 43
Регистрация: 28.05.2012
Сообщений: 1,516
Записей в блоге: 2
22.04.2013, 23:20 #7
а я на глаз все делаю даже если отмеряю направляющими точное расстояние стараюсь с точностью до 5px округлять.

Но есть исключительные случаи когда 1px очень важен - но я так понимаю это не в вашем случае.

А лучший отладчик верстки - это браузер (кроме IE) правой клавиши мыши и проинспектировать элемент (ну или что-то вроде этого) и там можно уже подогнать некоторые значения "налету"
0
bander313
1 / 1 / 2
Регистрация: 18.04.2013
Сообщений: 69
22.05.2013, 08:48 #8
Добавлено через 1 минуту
Цитата Сообщение от Donald28 Посмотреть сообщение

А лучший отладчик верстки - это браузер (кроме IE) правой клавиши мыши и проинспектировать элемент (ну или что-то вроде этого) и там можно уже подогнать некоторые значения "налету"
полностью согласен!!!
0
malframe
9 / 9 / 0
Регистрация: 11.05.2013
Сообщений: 110
22.05.2013, 09:08 #9
Я использую jRuler. Просто линейка и всё, такой здоровый минимализм - позволяет смотреть расстояния между объектами на экране и имеет несколько единиц измерения.
0
busta_k
0 / 0 / 0
Регистрация: 22.05.2013
Сообщений: 22
22.05.2013, 10:14 #10
Цитата Сообщение от Igor_css Посмотреть сообщение
При верстке шапки возникли первые проблемы:
1. Так как разрешение экрана моего ноутбука 1366:768, а высота фона шапки в макете 432 пикселя, то фон шапки занимает больше чем половину экрана (скриншот прикреплен к ответу). Это так и должно быть? (Размер исходного макета 1500:1490).
2.Как обычно верстают макеты? Пиксель в пиксель?
3. Как в Photoshop (CS2) точно высчитывать расстояния между объектами в пикселах? Когда я измерял высоту шапки, то проводил вспомогательную горизонтальную линию, затем увеличивал изображение и смотрел размер в пикселях в точке пересечения вспомогательной линии и вертикальной линейки. Сейчас нужно высчитать положение рекламы в пикселях относительно фона шапки. Выше описанным способом это будет сделать немного муторно. Может есть более простой способ расчета расстояний?

CSS фона шапки
CSS
1
2
3
4
5
.header {
    background-image: url(Header.jpg);
    height: 432px;
    width:100%;
}
https://quirktools.com/screenfly/
Это в помощь!
Просто незаменимый он-лайн инструмент...
Минус у него только один - сайт должен быть в сети. На локалке не протестите.
Вводим адрес сайта и выбираем нужное устройство и разрешение экрана.
0
22.05.2013, 10:14
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
22.05.2013, 10:14
Привет! Вот еще темы с ответами:

Верстка шаблона - HTML, CSS
Подскажите плз, как сделать у верхней панели навигации эти палочки

Верстка шаблона - HTML, CSS
Добрый вечер, совсем туго что то, помогите плиз header: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"...

Верстка шаблона из psd - HTML, CSS
Здравствуйте! Обращаюсь вот с такой проблемой. Я написал шаблон сайта по уроку http://www.photoshop-master.ru/lessons.php?rub=4&id=2005 и...

Верстка из .psd шаблона - HTML, CSS
Скачал вот такой вот шаблон, что бы попрактиковаться в верстке. Возник вопрос. Как видно по разметке страницы, макет имеет определенную...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru