Ludwig Voltman
-
Posts
65 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Ludwig Voltman
-
-
У меня последний firefox, header ведет себя как на скринах Veseloff.
Мне вот как кажется:
1) перемудрили с кнопками, имхо. Такие кнопки можно делать, используя метод раздвижных дверей. Нужно будет 2 html тега, 2 стиля для тегов и две картинки (лучше один спрайт). подробнее о методе: http://www.webmascon.com/topics/coding/36a.asp
2) считается, что тег h1 должен быть один на страницу. Обычно им оформляют заголовок сайта. Хотя, конечно есть споры на эту тему.
3) перемудрили с картинками в правом нижнем блоке. Здесь спрайт, имхо не нужен. Просто шесть отдельных картинок <img>. И один класс для всех li в списке.
4) br советуют не использовать. В левой колонке в постах несколько раз используется этот тег. Лучше осуществлять перенос путем добавления ещё одного параграфа. Т.е. не так <p>blablabla<br>blablal</p>, а так: <p>blablabla</p><p>blablala</p>
-
В html нет атрибута style, я еще раз проверил даже. Или что Вы имеете ввиду?
1. <div class="bx-wrapper" style="max-width: 100%; margin: 0px auto;">
2. <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 300px;">
3. <ul class="bx-slider" style="width: 415%; position: relative; transition-duration: 0s; transform: translate3d(-325px, 0px, 0px);">
4. <li class="bx-clone" style="float: left; list-style: none outside none; position: relative; width: 325px;">
Эти inline-стили можно вынести в css файл, чтобы они не занимали место в html-коде.
Основной шрифт, который я подключил через гугл-фонтс имеет совсем другие кавычки, поэтому сделал через рисунок. Хотя, сейчас понял, что нужно было использовать :before и :after.Посмотрел макет - кавычки сделаны тем же шрифтом (lato). Это обычные кавычки (которые shift+2), размером 48 пунктов (где-то 48 пикселов).
-
1) не прописана ширина у враппера (body). Если сайт должен тянуться, то необходимо прописать параметры min-width, max-width. Сейчас при изменении ширины окна браузера дизайн разваливается.
2) логотип я бы сделал флоатом, а не позиционировал абсолютно. Сейчас при изменении ширины экрана панель навигации налезает на логотип
3) не совсем понял организацию стилей в области слайдера и навигации. Одни и те же стили написаны и в html (инлайн), и в css. Зачем? Можно переместить инлайновые стили в css файл?
4) цитату в слайдере я бы сделал через blockquote, а не через div. Почему кавычки сделаны через рисунок, да ещё и img?
5) почему background в блоке footer сделан через фоновую картинку, если там однотонная заливка (background-color)? Почему формат для однотонной фоновой картинки jpg, а не gif/png8?
-
Мне понравилась вот эта статья:
http://nicothin.ru/page/photoshop-dlja-html-verstalshhika
после неё нарезка макета не представляет сложностей.
Чтобы грамотно вырезать элемент, не повредив тени, просто тыкаю черной стрелкой на слой с нужной картинкой, дублирую его и делаю image-trim.
-
Не подскажешь , нужно ли для стрелки (2) создавать отдельный тег (span) , или стрелку нужно создавать в теге a???
Там и без дополнительного span есть несколько вариантов. background можно присвоить либо тегу li, либо тегу a. Я бы присвоил li.
-
Я недавно начал изучать css, поэтому где-то могу ошибаться, но вот как бы я сверстал:
1) название сайта я сделал бы заголовком h1
2) стрелочки у ссылок в блоке навигации нужно делать через свойство background, а не через img. Img только для ключевых изображений (фотки, логотип сайта и т.п.)
3) в верхнем навигационном меню (где ссылки home) очень сложная разметка (так ли нужен тег span, если стили можно задать и через nav, и через ul, и через li, и через a?)
4) очень длинный и ненужный каскад в css (лапша), например: .ff ul li a span. Небольшое изменение структуры меню и код придется переписывать. И как-то span, вложенный в a непривычно выглядит.
5) оформление параграфа с классом text1 мало отличается от оформления обычного параграфа. Зачем создавать лишний стиль ради margin? ведь margin можно задать и другим элементам (заголовку). text-align: justify, если не ошибаюсь, работает только в том случае, если строка заполнена целиком, поэтому смысла в классе text1, имхо, нет
6) содержимое тега blockquote должно быть вложено в тег p (в html4 strict точно, хотя, возможно для html5 это валидно)
7) в форме contact - зачем столько ul? 0_o
8) зачем создавать отдельный стиль для h3 только ради зеленого подчеркивания в правом блоке, если можно использовать два стиля (обычный для оформления h3 и стиль underline {border-bottom: 1px solid green;} Это касается и остальных элементов с подчеркиванием.
9) если не ошибаюсь, свойства класса wrapper можно передать body, так мы избавимся от лишнего дива в html.
10) по оформлению: лучше чтобы была какая-то система наименования классов и идентификаторов. Пока что вперемешку используются символы нижнего подчеркивания вперемешку с CamelCase, тяжело будет разбираться в таком коде.
11) в таблице, вместо того, чтобы задавать классы каждому столбцу, легче задать класс только четным/нечетным, и добавить оформление для тега tr.
-
Я сверстал этот макет и кое-что заметил.
В псд файле есть два слоя. Если их подключить, то они окрашивают весь макет в темно-синий цвет, а ссылки и кнопка поиска становится зелеными. А в первом сообщении макет синего цвета, т.е. эти слои выключены. Такой вопрос: учитывать эти слои при верстке и верстать зеленый макет, или же отключить их нафиг и делать синий? Кто как верстал?
Вот картинка макета с включенными слоями:
-
Решил проблему!
Вот полезные ссылки с обсуждениями по теме:
http://www.rsdn.ru/forum/winapi/5023789.flat
Использовал эту ссылку для оптимизации картинок для IE7:
-
Спасибо за ответы!
Я подумал, что проблема распространенная, поэтому написал кратко. Сейчас подробнее опишу проблему.
Мне нужно вырезать картинку, чтобы вставить её в макет. Я захожу в photoshop, вырезаю картинку и сохраняю её для веб, в формате png 24, без прозрачности. Картинка вот такая:
Теперь я пипеткой определяю цвет фона картинки и задаю этот цвет как background-color для body.
Код примитивнейший:
<html><head><style>body {background-color: #353a33;}</style><body><img src="logo.png" alt=""/></body></html>
Результат в IE7:
В чем проблема и как её решить?
-
Я пользуюсь windows XP и время от времени тестирую макеты в IE7. Я уже парочку макетов сверстал и везде одна и та же проблема: почему-то изображения в IE7 отображаются иначе, чем в Firefox, в результате элементы не совпадают. В Firefox такой проблемы нет.
Сделал скриншот:
Вопрос: в чем проблема? Как её решить?
-
Круто, работает!
спасибо за помощь!
-
hypnocolor,
Нет, форма с границами должна быть 29px, я задал 27px, учитывая +2 пикселя на границы. Когда обнулил padding кнопка не изменилась (27px), а высота текстового поля стала нормальной (29px), но поле ушло вниз на 1 пиксель.
-
Сейчас верстаю форму поиска и никак не могу понять, как рассчитывается высота.
http://jsfiddle.net/ludwigwoltmann/68jQT/2/
По макету высота текстового поля и кнопки должна быть 29px. Кнопка и текстовое поле должны располагаться на одной линии. Я задаю фиксированную высоту в 27px (с учетом верхней и нижней границы в 1px), в результате -- высота поля -- 31px, высота кнопки -- 27px. Не понимаю...
Сначала думал что это из-за шрифтов - но изменение их размеров и межстрочного интервала ничего не дает.
Подскажите пожалуйста, как решить проблему?
-
Я сегодня тоже про БЭМ читал. Очень неоднозначная оценка. Мне кажется, для больших и динамичных проектов БЭМ штука полезная. Для обычных страничек - много лишних классов и километровых имен.
По теме: если уменьшить размер окна элементы в шапке разъезжаются. Я не эксперт, конечно, но м.б. прописать overflow для главного блока в шапке и min-width для body?
-
Я тоже учусь верстать.
Сначала я прочитал "Большую книгу CSS" Макфарланда. Потом зашел на сайт бесплатных макетов для верстки и сверстал парочку. Думаю, когда закончу верстать двадцатый макет, научусь верстать правильно.
По поводу графического редактора. Тоже раньше стояла такая проблема. Пробовал гимп - psd-макеты не всегда воспринимаются корректно. Фотошоп можно скачать вполне легально, правда старую версию (CS2). Для верстки большего не нужно, имхо. Читать здесь: http://habrahabr.ru/post/164977/
По поводу резки макетов в фотошопе: мне помогла статья nicothin'a: http://nicothin.ru/page/photoshop-dlja-html-verstalshhika
-
Может быть, как-то так?
.menu { width: 20%; max-width: 100px (или, например, 10em); overflow: hidden;}
-
Сейчас верстаю макет для тренировки, все вроде бы хорошо, да футер уезжает, когда меняю ширину окна браузера.
Чтобы не быть голословным, накидал структуру блоков:
http://jsfiddle.net/ludwigwoltmann/hP2Xf/
Как можно увидеть, футер не растягивается на ширину экрана при его уменьшении. Я решил проблему, создав обертку для всех блоков, включая футер. Но, может быть есть решение поизящнее? И, самое главное -- почему футер так себя ведет? Почему он не растягивается на всю ширину при изменении масштаба?
Заранее спасибо!
-
Правильнее использовать сброс стилей. информации про это в интернете много.
Есть те, кто с этим не согласится)
Можно подробнее?
Просто четкого мнения я не встречал. Влад Мержевич пишет, что сброс стилей порождает безответственную верстку. Макфарланд и Майер, наоборот, призывают использовать глобальный сброс. Я стараюсь сбрасывать стили только для тех тегов, которые используются в макете. Есть другие варианты?
-
Спасибо за макет. Как разберусь с текущим, примусь верстать этот.
Один вопрос вдогонку: года два назад на этом форуме была тема с подборкой макетов для новичков (около 10 штук) по нарастающей сложности. Помню что первой темой в подборке была эта:
К каждому макету было написано ТЗ. Не могу найти эту тему! Кто знает, скиньте, пожалуйста, ссылку (можно в ПМ)!
Просьба оценить верстку
in Discussion of works
Posted
Не знаю, никогда не работал со слайдерами. Лучше вынести - код уродский получается. Но если нельзя - придется оставить.