Как стать автором
Обновить

Комментарии 87

спасибо, отличное дополнение к предыдущей статье!
очень мило, логотип только пережали и иконку rss. Ей же (rss) не хватает прозрачного фона (внизу)
Из jpeg файла по определению качественных картинок получить нельзя )
ну почему же, без таких явных артефактов все-таки можно.
Да и потом, я ен наставиваю на jpeg, конечно это не оптимальный вариант
Или же кнопку rss сделать ниже на пару пикселей.
RSS-кнопка по сути своей является ссылкой, а ее сделали картинкой. Нехорошо, товарищи…
хмм… а вы как предлагаете?
Вероятно, текстовую ссылку, оформленную через CSS без тега
без тега &ltimg&gt.
img. Ну вы меня поняли, да?)
именно так, это семантично
Автору: сделайте скринкаст и запостите на nettuts.com/ :-)
Что-то как-то с картинками беда…
Очень много артефактов…
Не айс.
Упреждая законные упреки по поводу качества изображений напомню — макет верстался из jpeg, так как psd просто нет.
тогда претензии отзываются :)
за то что юзаются чьи-то наработки качество профессионализма, конечно же, не страдает. но оно страдает когда _не_ понимают что они используют. Эрика (чей ресет.ксс используется) я уважаю, а вот людей которые используют его наработки не обдуманно, зачастую нет. strong {font-weight: bold;} и некоторые другие абсурдные вещи, это конечно профессионализм, угу :)
ну это не преступление и кода не портит
много что не портит, возможно я зануда, но когда нет ничего лишнего и всё применено по обстоятельствам — это и есть профессионализм :)
Согласен.
Но в случае с приведенным вами примером про strong {font-weight: bold;} лишний возможно и оправдан.
Вдруг у пользователя найдется браузер у которого для жирного текста по умолчанию нежирное начертание?)
Ага, что еще?

Я вот, к своему сожалению, наотрез не воспринимаю людей, которые говорят/пишут ".ксс". Мало того, во мне пробуждаются деструктивные инстинкты. Ну вы понимаете, да?

Про бревно в глазу и конструктивную критику упоминать не будем, да?
разнобой тематических картинок не совпадающих по положению,
Large Publications отличается от Editorial Work, Interactive

Most recent: Modeling Website вообще не понятно положение, если книга и диск и еще одна открытая книга(с белыми страницами) лежат как бы на плоскости, то как лежит макбук.

в общем и целом верстка годится, но дизайн как таковой хромает.
вот так вот на экране и лежит=) (это же макбук!)
А в оригинале тоже дырка в диске непрозрачная?)
если он так лежит, то скажем работать на нем сложновато будет и композиция не состоялась.
да и цветовой разнобой на лицо, слишком много использовано раличных цветов, отвлекает от информации
Ну сверстали и чё? Я за последние четыре СТОЛЬКО САЙТОВ сверстал, что просто опупеть можно. Но я ж не пишу об этом на хабре каждый день…
*четыре ГОДА*
это продолжение статьи про верстку, одно плохо что вы показали уже сверстанный макет. где howto по xhtml верстке для начинающих?
народ сказал бы спасибо, а так мол нарисовали и сразу бац и результат, не вдаваясь в подробности верстки на XHTML 1.0 Strict. А ведь начинающие не знаю что это )) и в чем отличие… люди если захотят разобраться то разрыв между резкой в AI и конечным сверстанным результатом загонит их в ступор.
Я понимаю, что это типа продолжение, только вы же сами написали, что по факту это нифига не продолжение, а тупак какой-то.

Да-да, минусуйте, детишки. Можете с радостью злиться и биться головой, но пост — тупак!
кстате вот решил вдатся в XHTML и CSS — не подскажите хороших источников информации для начинающих?
HTML и что из себя представляет CSS я то знаю, вот как грамотно верстать нет :(
Нескромно порекомендую свой ресурс: http://rmcreative.ru/blog/tag/CSS. Далее по ссылкам. Там почти все путёвые пишущие верстальщики.
Молодцы прани. Правда я бы сделал пример резиновым и эластичным, с min- и max-width, использовал бы полупрозрачный png, дабы показать подводные камни кроссбраузерности и как с ними боряться хорошие верстальшики. Также я бы сделал стили для печати и лаптопов. В результате мы бы получили отличное живое пособие хорошего тона.
Резина тут ни к чему. А вот PNG был бы в тему.
Это мое мнение, я резину просто люблю ) это не очень то и просто продумать, что и как должно тянуться, поэтому это был бы более универсальный пример.
Я бы тоже, если бы у меня был PSD.
1. Использование двух оределений в спике, в этом случае, не к самое удачное решение с точки семантики (да в спецификациях разрешается, пусть и не явно использование более одного определения, речь именно о симантической красоте)

2. Использование списка в футере под копирайты не уместно, лучше сделать и переопределить их через селектор родителя.
Очень клёво! Только я бы еше ссылки которые в #sections сделал бы блочными чтоб были на всю высоту блока.
И вопрос верстальщику — сколько времени ушло?
Я делал это на работе, периодически отвлекаясь, но думаю часа два, «чистого времени»
Чужое, конечно судить легко, но всё же:

Нет никаких альтернатив включенным картинкам:
— лого текстом не дублируется,
— «My website…» можно было бы и текстом.
— RSS снизу только картинкой.
— .thumb-ам не прописаны размеры. При отключении картинок всё некрасиво съёживается.

Используется img для офомительских картинок, а не контента.
— Альтернатива лого есть. Это Image replacement
— Можно было
— RSS не считаю кнопкой в данном случае, а именно ссылкой на поток, так что тут вопрос идеологии.
— Согласен

Где используется img для оформительского контента?

З.Ы. Ребята, это пример одного из вариантов верстки, не эталон и не «вылизаный» код на сдачу заказчику.
— Какой же это Replacement? Текст далеко слева. Его при отключенных картинках не видно.
— …
— Тут опять же вопрос отключенных картинок.
— …

img… книжки, компакты и др.

Пример должен быть примером ;) Чтобы не учить плохому.
В image replacement приходится выбирать для кого он, для людей или для поисковиков. Про выключеные картинки согласен, недоработка, в причины вдаваться не буду; не здесь и не сейчас.

Не думаю что мой пример учит чему-то плохому.
Не, плохому не учит :) Если разбирать, что да как — очень даже. Идеала ни у кого не бывает.
У меня вёрстка начинается с прибитого футера :)
Но я не буду холиварить, дабы дизайн более-менее позволял оставить «висюн».
Ну, а про картиночные ссылки Вам уже сказали.

… а так… Чистенький хтмл, не менее чистенькая цсс-ка, хоть и с перегруженным началом. Но и задачей изначально ставился элементарный дизайн.

P.S. Не понравилась xml-декларация: quirk mode, знаете ли…
Ах да! Ещё очеь смутил media=«all»: о печатных версиях всё же забывать нельзя.
Но это, думаю, только из-за показательного свойства статьи.
А ссылки кто будет подчеркивать?

Вот я не могу понять упрямость верстальщиков. По умолчанию подверкивание включено. НЕТ! Нужно потратить время и обязательно его выключить!
Бывают ситуации когда подчеркивание портит внешний вид ссылки. Ссылка обязательно должна отличаться внешним видом от окружающей среды и менять свой вид при наведении курсора, это да. Но это же необязательно должно выражаться в подчеркивании ;)
Ссылка никогда не портит текст. А если портит, то это проблемы верстальщика. Вот, например,
НЛО прилетело и опубликовало эту надпись здесь
Посмотрел код и был приятно удивлен — ну ооочень аккуратно и минималистично сверстано… Я бы наверно на такую же задачу раза в 2 больше кода бы написал.
Поясните, пожалуйста, зачем две ссылки на style.css (одна для IE, вторая для остальных)? Учитывая мой небольшой опыт в верстке, IE всегда корректно обрабатывал тег link в head. Или это новые причуды причуды осла? :) Спасибо за ответ.
Там подгружаются разные файлы, второй только для IE. Видимо костыли.
Точно, не обратил внимание, спасибо!
НЛО прилетело и опубликовало эту надпись здесь
Кстати, не проще ли вместо всего этого перечисления всех известных тегов «html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre… [и так далее, как в том style.css] {....}» написать "* {....}"?
Нет.
НЛО прилетело и опубликовало эту надпись здесь
не знал, спасибо
Написали бы урок
лого и кнопку RSS лучше пережать по-нормальному, нахуя там артефакты?
См. выше.
как бы в шопе обе картинки можно перерисовать за 10 минут
как бы цель была не в этом
как бы я о том, что внимание деталям тоже нужно уделять, в конце концов верстка маглов вряд ли интересует, а на картинки они обращают внимание.
Эм… А в чем идея статьи? О чем она? О том что вы сверстали страницу? Оч. поучительно.
Бред.
+1
а это нормально что она в фаерфоксе на 1440*900 чуток разползается?

скриншот: ftp://nuclear.decay.ru/images/habr/cssfail.png
Иконки в хеадере можно было бы сделать и PNG-шками с тенями, чтобы при изменении цвета шапки не перерисовывать иконки. :) А сам фон вполне можно было слабать не одной картинкой.
А в остальном все замечательно. :)
несемантично (кривое слово то какое — жуть) вставлять иконки в меню не несущие никакой смысловой нагрузки на страницу в тегах img, практично, но их место в стилях

и да, логотип в h1 это пи… логотип — это как раз просто картинка, если показывать особо нечего — просто текст.
Ну почему же? h1 — это самый главный заголовок. Если на странице нет ничего похожего на заголовок такого типа, как, кстати, на линчуемой — использование h1 для логотипа вкупе со слоганом очень даже семантически приемлемо.

Про иконки полностью согласен. Использовать такой метод стоит разве что в ситуациях, когда по-другому просто не даёт, подчас гениальный, макет.
line 10 column 2 — Предупреждение: inserting «type» attribute
Учитывая фиксированные размеры thumbs и их расположение, можно было бы не нарушать структуру и сделать thumb-блок абсолютным. Ну и футер феерически несемантичен. Другое дело, если бы у li были бы классы какие-нибудь, объясняющие, что в нем лежит. Но это уже спорный вопрос, по сравнению с первым.
не пртендую на оригинальность, но в css так имхо будет вернее:

*
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
Главное чтобы использующий подобные ресеты, понимал, как это отразится на макете и не делал удивленные глаза, когда ему предъявлял бы заказчик.
Не буду оригинальным, но самый лучший ресет — свой ресет.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Ребята, вам бы сначало поучится потом статьи писать…
Ошибки:

1. Фикс. ширина. — Верстка аматера, который не умеет верстать масштабируемый сайт.

2. Элемент img, нет размеров изображения.

3. CSS… беда просто, вместо:

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

не проще ли:

* {
margin: 0;
padding: 0;
}

???? Он большое внимание уделил размеру страницы и её исходного кода. ????? :)))))))))

4. размер шрифта в px ???

5. Сначало задаете для h1 margin: 0; padding: 0; потом еще раз:

h1 {
float: left;

width: 288px;

height: 96px;

overflow: hidden;

background: url(../images/logo.png) left top no-repeat;

text-indent: -5000px;

!!! margin: 0 0 25px 0;!!!
}

Рекомендую авторам почитать: CSS — каскадные таблицы стилей. Подробное руководство. 3-е издание
Мейер Э

Ну и: Языки HTML и CSS — Хольцшлаг М.

Ну а потом статьи писать :)

Удачи Авторам в изучении верстки!!!

меня одного раздразил тон в котором были высказаны замечания? :)
Мне кажется нужно быть попроще и не задирать нос. Комментарии в стиле, совет от большого папы маленьким мальчикам ничего кроме раздражения и/или смеха не вызывает.
Не обращайте внимания, это известный тролль )
Сам тролль, видно по непрофессиональной верстке :))) Xa-xa-xa, xo-xo-xo!
Да здесь вроде как все учатся чему-то
у кого учатся? Где тут учитель? может быть CurlyBrace, который не знает про универсальный селектор — * и скороей всего не понимает почему каскадные таблицы стилей называются каскадными… в блоге по Веб-разработке нет одного авторитетного автора — если есть хорошая статья, она перевод.
На опыте других, на примерах, на разборе полётов, учимся объективному подходу
Это вы про метод «тыка» говорите, пробуем пока не получится. Не лутчше ли сначало поучится у экспертов (Мейер, Хольцшлаг)? Или думаете лутчше изобретать велосипед?
С седьмой оперой всё не совсем гладко — она каждый li начинает с новой строки. Всё внимание на верхнее меню:


У кого-нить есть идеи как через стили заставить седьмую оперу не начинать каждый li с новой строки, но при этом чтобы всё осталось валидным?
Нашёл :), мешает float:right, прописанный для UL
Можно либо обернуть ul в блок, который будет float:right, а сам ul уже будет без float'а, либо дописать display:block и ширину к ul.
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Истории