How to become an author
Search
Write a publication
Pull to refresh

Comments 87

спасибо, отличное дополнение к предыдущей статье!
Total votes 1: ↑1 and ↓0+1
очень мило, логотип только пережали и иконку rss. Ей же (rss) не хватает прозрачного фона (внизу)
Total votes 3: ↑3 and ↓0+3
Из jpeg файла по определению качественных картинок получить нельзя )
Total votes 4: ↑2 and ↓20
ну почему же, без таких явных артефактов все-таки можно.
Да и потом, я ен наставиваю на jpeg, конечно это не оптимальный вариант
Total votes 3: ↑2 and ↓1+1
Или же кнопку rss сделать ниже на пару пикселей.
This comment wasn’t rated yet0
RSS-кнопка по сути своей является ссылкой, а ее сделали картинкой. Нехорошо, товарищи…
Total votes 4: ↑3 and ↓1+2
хмм… а вы как предлагаете?
This comment wasn’t rated yet0
Вероятно, текстовую ссылку, оформленную через CSS без тега
Total votes 3: ↑3 and ↓0+3
img. Ну вы меня поняли, да?)
Total votes 4: ↑4 and ↓0+4
именно так, это семантично
Total votes 1: ↑1 and ↓0+1
Автору: сделайте скринкаст и запостите на nettuts.com/ :-)
Total votes 3: ↑3 and ↓0+3
Что-то как-то с картинками беда…
Очень много артефактов…
Не айс.
Total votes 2: ↑1 and ↓10
Упреждая законные упреки по поводу качества изображений напомню — макет верстался из jpeg, так как psd просто нет.
Total votes 7: ↑7 and ↓0+7
тогда претензии отзываются :)
Total votes 2: ↑2 and ↓0+2
за то что юзаются чьи-то наработки качество профессионализма, конечно же, не страдает. но оно страдает когда _не_ понимают что они используют. Эрика (чей ресет.ксс используется) я уважаю, а вот людей которые используют его наработки не обдуманно, зачастую нет. strong {font-weight: bold;} и некоторые другие абсурдные вещи, это конечно профессионализм, угу :)
Total votes 6: ↑3 and ↓30
ну это не преступление и кода не портит
Total votes 2: ↑1 and ↓10
много что не портит, возможно я зануда, но когда нет ничего лишнего и всё применено по обстоятельствам — это и есть профессионализм :)
This comment wasn’t rated yet0
Согласен.
Но в случае с приведенным вами примером про strong {font-weight: bold;} лишний возможно и оправдан.
Вдруг у пользователя найдется браузер у которого для жирного текста по умолчанию нежирное начертание?)
Total votes 2: ↑2 and ↓0+2
Ага, что еще?

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

Про бревно в глазу и конструктивную критику упоминать не будем, да?
Total votes 6: ↑3 and ↓30
разнобой тематических картинок не совпадающих по положению,
Large Publications отличается от Editorial Work, Interactive

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

в общем и целом верстка годится, но дизайн как таковой хромает.
This comment wasn’t rated yet0
вот так вот на экране и лежит=) (это же макбук!)
А в оригинале тоже дырка в диске непрозрачная?)
This comment wasn’t rated yet0
если он так лежит, то скажем работать на нем сложновато будет и композиция не состоялась.
This comment wasn’t rated yet0
да и цветовой разнобой на лицо, слишком много использовано раличных цветов, отвлекает от информации
Total votes 2: ↑0 and ↓2-2
Ну сверстали и чё? Я за последние четыре СТОЛЬКО САЙТОВ сверстал, что просто опупеть можно. Но я ж не пишу об этом на хабре каждый день…
Total votes 17: ↑7 and ↓10-3
*четыре ГОДА*
Total votes 4: ↑2 and ↓20
это продолжение статьи про верстку, одно плохо что вы показали уже сверстанный макет. где howto по xhtml верстке для начинающих?
народ сказал бы спасибо, а так мол нарисовали и сразу бац и результат, не вдаваясь в подробности верстки на XHTML 1.0 Strict. А ведь начинающие не знаю что это )) и в чем отличие… люди если захотят разобраться то разрыв между резкой в AI и конечным сверстанным результатом загонит их в ступор.
This comment wasn’t rated yet0
Я понимаю, что это типа продолжение, только вы же сами написали, что по факту это нифига не продолжение, а тупак какой-то.

Да-да, минусуйте, детишки. Можете с радостью злиться и биться головой, но пост — тупак!
Total votes 6: ↑2 and ↓4-2
кстате вот решил вдатся в XHTML и CSS — не подскажите хороших источников информации для начинающих?
HTML и что из себя представляет CSS я то знаю, вот как грамотно верстать нет :(
This comment wasn’t rated yet0
Нескромно порекомендую свой ресурс: http://rmcreative.ru/blog/tag/CSS. Далее по ссылкам. Там почти все путёвые пишущие верстальщики.
Total votes 1: ↑1 and ↓0+1
Молодцы прани. Правда я бы сделал пример резиновым и эластичным, с min- и max-width, использовал бы полупрозрачный png, дабы показать подводные камни кроссбраузерности и как с ними боряться хорошие верстальшики. Также я бы сделал стили для печати и лаптопов. В результате мы бы получили отличное живое пособие хорошего тона.
Total votes 2: ↑2 and ↓0+2
Резина тут ни к чему. А вот PNG был бы в тему.
Total votes 3: ↑0 and ↓3-3
Это мое мнение, я резину просто люблю ) это не очень то и просто продумать, что и как должно тянуться, поэтому это был бы более универсальный пример.
Total votes 1: ↑1 and ↓0+1
Я бы тоже, если бы у меня был PSD.
Total votes 4: ↑2 and ↓20
1. Использование двух оределений в спике, в этом случае, не к самое удачное решение с точки семантики (да в спецификациях разрешается, пусть и не явно использование более одного определения, речь именно о симантической красоте)

2. Использование списка в футере под копирайты не уместно, лучше сделать и переопределить их через селектор родителя.
This comment wasn’t rated yet0
Очень клёво! Только я бы еше ссылки которые в #sections сделал бы блочными чтоб были на всю высоту блока.
И вопрос верстальщику — сколько времени ушло?
This comment wasn’t rated yet0
Я делал это на работе, периодически отвлекаясь, но думаю часа два, «чистого времени»
Total votes 2: ↑2 and ↓0+2
Чужое, конечно судить легко, но всё же:

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

Используется img для офомительских картинок, а не контента.
Total votes 5: ↑3 and ↓2+1
— Альтернатива лого есть. Это Image replacement
— Можно было
— RSS не считаю кнопкой в данном случае, а именно ссылкой на поток, так что тут вопрос идеологии.
— Согласен

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

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

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

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

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

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

P.S. Не понравилась xml-декларация: quirk mode, знаете ли…
Total votes 1: ↑1 and ↓0+1
Ах да! Ещё очеь смутил media=«all»: о печатных версиях всё же забывать нельзя.
Но это, думаю, только из-за показательного свойства статьи.
This comment wasn’t rated yet0
А ссылки кто будет подчеркивать?

Вот я не могу понять упрямость верстальщиков. По умолчанию подверкивание включено. НЕТ! Нужно потратить время и обязательно его выключить!
Total votes 4: ↑2 and ↓20
Бывают ситуации когда подчеркивание портит внешний вид ссылки. Ссылка обязательно должна отличаться внешним видом от окружающей среды и менять свой вид при наведении курсора, это да. Но это же необязательно должно выражаться в подчеркивании ;)
Total votes 3: ↑2 and ↓1+1
Ссылка никогда не портит текст. А если портит, то это проблемы верстальщика. Вот, например,
Total votes 6: ↑1 and ↓5-4
UFO just landed and posted this here
Посмотрел код и был приятно удивлен — ну ооочень аккуратно и минималистично сверстано… Я бы наверно на такую же задачу раза в 2 больше кода бы написал.
Total votes 2: ↑2 and ↓0+2
Поясните, пожалуйста, зачем две ссылки на style.css (одна для IE, вторая для остальных)? Учитывая мой небольшой опыт в верстке, IE всегда корректно обрабатывал тег link в head. Или это новые причуды причуды осла? :) Спасибо за ответ.
Total votes 1: ↑0 and ↓1-1
Там подгружаются разные файлы, второй только для IE. Видимо костыли.
This comment wasn’t rated yet0
Точно, не обратил внимание, спасибо!
This comment wasn’t rated yet0
UFO just landed and posted this here
Кстати, не проще ли вместо всего этого перечисления всех известных тегов «html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre… [и так далее, как в том style.css] {....}» написать "* {....}"?
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
лого и кнопку RSS лучше пережать по-нормальному, нахуя там артефакты?
Total votes 5: ↑2 and ↓3-1
как бы в шопе обе картинки можно перерисовать за 10 минут
Total votes 4: ↑2 and ↓20
как бы цель была не в этом
Total votes 3: ↑3 and ↓0+3
как бы я о том, что внимание деталям тоже нужно уделять, в конце концов верстка маглов вряд ли интересует, а на картинки они обращают внимание.
Total votes 4: ↑0 and ↓4-4
Эм… А в чем идея статьи? О чем она? О том что вы сверстали страницу? Оч. поучительно.
Бред.
Total votes 7: ↑5 and ↓2+3
а это нормально что она в фаерфоксе на 1440*900 чуток разползается?

скриншот: ftp://nuclear.decay.ru/images/habr/cssfail.png
This comment wasn’t rated yet0
Иконки в хеадере можно было бы сделать и PNG-шками с тенями, чтобы при изменении цвета шапки не перерисовывать иконки. :) А сам фон вполне можно было слабать не одной картинкой.
А в остальном все замечательно. :)
Total votes 1: ↑0 and ↓1-1
несемантично (кривое слово то какое — жуть) вставлять иконки в меню не несущие никакой смысловой нагрузки на страницу в тегах img, практично, но их место в стилях

и да, логотип в h1 это пи… логотип — это как раз просто картинка, если показывать особо нечего — просто текст.
Total votes 4: ↑1 and ↓3-2
Ну почему же? h1 — это самый главный заголовок. Если на странице нет ничего похожего на заголовок такого типа, как, кстати, на линчуемой — использование h1 для логотипа вкупе со слоганом очень даже семантически приемлемо.

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

*
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
Total votes 1: ↑0 and ↓1-1
Главное чтобы использующий подобные ресеты, понимал, как это отразится на макете и не делал удивленные глаза, когда ему предъявлял бы заказчик.
Не буду оригинальным, но самый лучший ресет — свой ресет.
Total votes 2: ↑1 and ↓10
UFO just landed and posted this here
UFO just landed and posted this here
Ребята, вам бы сначало поучится потом статьи писать…
Ошибки:

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 — Хольцшлаг М.

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

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

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


У кого-нить есть идеи как через стили заставить седьмую оперу не начинать каждый li с новой строки, но при этом чтобы всё осталось валидным?
This comment wasn’t rated yet0
Нашёл :), мешает float:right, прописанный для UL
Можно либо обернуть ul в блок, который будет float:right, а сам ul уже будет без float'а, либо дописать display:block и ширину к ul.
This comment wasn’t rated yet0
Sign up to leave a comment.

Articles

Your account

Sections

Information

Services

Support
© 2006–2024, Habr