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>

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-коде. Посмотрел макет - кавычки сделаны тем же шрифтом (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.

Там и без дополнительного 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 http://boulderinformationservices.wordpress.com/2011/02/05/when-png-color-doesnt-match-hex-color-in-ie-smush-it/ Использовал эту ссылку для оптимизации картинок для IE7: http://www.smushit.com/ysmush.it/

Спасибо за ответы! Я подумал, что проблема распространенная, поэтому написал кратко. Сейчас подробнее опишу проблему. Мне нужно вырезать картинку, чтобы вставить её в макет. Я захожу в 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 штук) по нарастающей сложности. Помню что первой темой в подборке была эта: К каждому макету было написано ТЗ. Не могу найти эту тему! Кто знает, скиньте, пожалуйста, ссылку (можно в ПМ)!