Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 87
спасибо, отличное дополнение к предыдущей статье!
очень мило, логотип только пережали и иконку rss. Ей же (rss) не хватает прозрачного фона (внизу)
Автору: сделайте скринкаст и запостите на nettuts.com/ :-)
Что-то как-то с картинками беда…
Очень много артефактов…
Не айс.
Очень много артефактов…
Не айс.
Упреждая законные упреки по поводу качества изображений напомню — макет верстался из jpeg, так как psd просто нет.
за то что юзаются чьи-то наработки качество профессионализма, конечно же, не страдает. но оно страдает когда _не_ понимают что они используют. Эрика (чей ресет.ксс используется) я уважаю, а вот людей которые используют его наработки не обдуманно, зачастую нет. strong {font-weight: bold;} и некоторые другие абсурдные вещи, это конечно профессионализм, угу :)
ну это не преступление и кода не портит
Ага, что еще?
Я вот, к своему сожалению, наотрез не воспринимаю людей, которые говорят/пишут ".ксс". Мало того, во мне пробуждаются деструктивные инстинкты. Ну вы понимаете, да?
Про бревно в глазу и конструктивную критику упоминать не будем, да?
Я вот, к своему сожалению, наотрез не воспринимаю людей, которые говорят/пишут ".ксс". Мало того, во мне пробуждаются деструктивные инстинкты. Ну вы понимаете, да?
Про бревно в глазу и конструктивную критику упоминать не будем, да?
разнобой тематических картинок не совпадающих по положению,
Large Publications отличается от Editorial Work, Interactive
Most recent: Modeling Website вообще не понятно положение, если книга и диск и еще одна открытая книга(с белыми страницами) лежат как бы на плоскости, то как лежит макбук.
в общем и целом верстка годится, но дизайн как таковой хромает.
Large Publications отличается от Editorial Work, Interactive
Most recent: Modeling Website вообще не понятно положение, если книга и диск и еще одна открытая книга(с белыми страницами) лежат как бы на плоскости, то как лежит макбук.
в общем и целом верстка годится, но дизайн как таковой хромает.
Ну сверстали и чё? Я за последние четыре СТОЛЬКО САЙТОВ сверстал, что просто опупеть можно. Но я ж не пишу об этом на хабре каждый день…
*четыре ГОДА*
это продолжение статьи про верстку, одно плохо что вы показали уже сверстанный макет. где howto по xhtml верстке для начинающих?
народ сказал бы спасибо, а так мол нарисовали и сразу бац и результат, не вдаваясь в подробности верстки на XHTML 1.0 Strict. А ведь начинающие не знаю что это )) и в чем отличие… люди если захотят разобраться то разрыв между резкой в AI и конечным сверстанным результатом загонит их в ступор.
народ сказал бы спасибо, а так мол нарисовали и сразу бац и результат, не вдаваясь в подробности верстки на XHTML 1.0 Strict. А ведь начинающие не знаю что это )) и в чем отличие… люди если захотят разобраться то разрыв между резкой в AI и конечным сверстанным результатом загонит их в ступор.
Я понимаю, что это типа продолжение, только вы же сами написали, что по факту это нифига не продолжение, а тупак какой-то.
Да-да, минусуйте, детишки. Можете с радостью злиться и биться головой, но пост — тупак!
Да-да, минусуйте, детишки. Можете с радостью злиться и биться головой, но пост — тупак!
кстате вот решил вдатся в XHTML и CSS — не подскажите хороших источников информации для начинающих?
HTML и что из себя представляет CSS я то знаю, вот как грамотно верстать нет :(
HTML и что из себя представляет CSS я то знаю, вот как грамотно верстать нет :(
Нескромно порекомендую свой ресурс: http://rmcreative.ru/blog/tag/CSS. Далее по ссылкам. Там почти все путёвые пишущие верстальщики.
xhtml.ru/category/xhtml-vyorstka/
переройте весь www.webmascon.com
для совсем не понимающих www.intuit.ru там все доступно разжовано
переройте весь www.webmascon.com
для совсем не понимающих www.intuit.ru там все доступно разжовано
Молодцы прани. Правда я бы сделал пример резиновым и эластичным, с min- и max-width, использовал бы полупрозрачный png, дабы показать подводные камни кроссбраузерности и как с ними боряться хорошие верстальшики. Также я бы сделал стили для печати и лаптопов. В результате мы бы получили отличное живое пособие хорошего тона.
1. Использование двух оределений в спике, в этом случае, не к самое удачное решение с точки семантики (да в спецификациях разрешается, пусть и не явно использование более одного определения, речь именно о симантической красоте)
2. Использование списка в футере под копирайты не уместно, лучше сделать и переопределить их через селектор родителя.
2. Использование списка в футере под копирайты не уместно, лучше сделать и переопределить их через селектор родителя.
Очень клёво! Только я бы еше ссылки которые в #sections сделал бы блочными чтоб были на всю высоту блока.
И вопрос верстальщику — сколько времени ушло?
И вопрос верстальщику — сколько времени ушло?
Чужое, конечно судить легко, но всё же:
Нет никаких альтернатив включенным картинкам:
— лого текстом не дублируется,
— «My website…» можно было бы и текстом.
— RSS снизу только картинкой.
— .thumb-ам не прописаны размеры. При отключении картинок всё некрасиво съёживается.
Используется img для офомительских картинок, а не контента.
Нет никаких альтернатив включенным картинкам:
— лого текстом не дублируется,
— «My website…» можно было бы и текстом.
— RSS снизу только картинкой.
— .thumb-ам не прописаны размеры. При отключении картинок всё некрасиво съёживается.
Используется img для офомительских картинок, а не контента.
— Альтернатива лого есть. Это Image replacement
— Можно было
— RSS не считаю кнопкой в данном случае, а именно ссылкой на поток, так что тут вопрос идеологии.
— Согласен
Где используется img для оформительского контента?
З.Ы. Ребята, это пример одного из вариантов верстки, не эталон и не «вылизаный» код на сдачу заказчику.
— Можно было
— RSS не считаю кнопкой в данном случае, а именно ссылкой на поток, так что тут вопрос идеологии.
— Согласен
Где используется img для оформительского контента?
З.Ы. Ребята, это пример одного из вариантов верстки, не эталон и не «вылизаный» код на сдачу заказчику.
— Какой же это Replacement? Текст далеко слева. Его при отключенных картинках не видно.
— …
— Тут опять же вопрос отключенных картинок.
— …
img… книжки, компакты и др.
Пример должен быть примером ;) Чтобы не учить плохому.
— …
— Тут опять же вопрос отключенных картинок.
— …
img… книжки, компакты и др.
Пример должен быть примером ;) Чтобы не учить плохому.
У меня вёрстка начинается с прибитого футера :)
Но я не буду холиварить, дабы дизайн более-менее позволял оставить «висюн».
Ну, а про картиночные ссылки Вам уже сказали.
… а так… Чистенький хтмл, не менее чистенькая цсс-ка, хоть и с перегруженным началом. Но и задачей изначально ставился элементарный дизайн.
P.S. Не понравилась xml-декларация: quirk mode, знаете ли…
Но я не буду холиварить, дабы дизайн более-менее позволял оставить «висюн».
Ну, а про картиночные ссылки Вам уже сказали.
… а так… Чистенький хтмл, не менее чистенькая цсс-ка, хоть и с перегруженным началом. Но и задачей изначально ставился элементарный дизайн.
P.S. Не понравилась xml-декларация: quirk mode, знаете ли…
А ссылки кто будет подчеркивать?
Вот я не могу понять упрямость верстальщиков. По умолчанию подверкивание включено. НЕТ! Нужно потратить время и обязательно его выключить!
Вот я не могу понять упрямость верстальщиков. По умолчанию подверкивание включено. НЕТ! Нужно потратить время и обязательно его выключить!
Посмотрел код и был приятно удивлен — ну ооочень аккуратно и минималистично сверстано… Я бы наверно на такую же задачу раза в 2 больше кода бы написал.
Поясните, пожалуйста, зачем две ссылки на style.css (одна для IE, вторая для остальных)? Учитывая мой небольшой опыт в верстке, IE всегда корректно обрабатывал тег link в head. Или это новые причуды причуды осла? :) Спасибо за ответ.
Кстати, не проще ли вместо всего этого перечисления всех известных тегов «html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre… [и так далее, как в том style.css] {....}» написать "* {....}"?
Написали бы урок
лого и кнопку RSS лучше пережать по-нормальному, нахуя там артефакты?
Эм… А в чем идея статьи? О чем она? О том что вы сверстали страницу? Оч. поучительно.
Бред.
Бред.
а это нормально что она в фаерфоксе на 1440*900 чуток разползается?
скриншот: ftp://nuclear.decay.ru/images/habr/cssfail.png
скриншот: ftp://nuclear.decay.ru/images/habr/cssfail.png
Иконки в хеадере можно было бы сделать и PNG-шками с тенями, чтобы при изменении цвета шапки не перерисовывать иконки. :) А сам фон вполне можно было слабать не одной картинкой.
А в остальном все замечательно. :)
А в остальном все замечательно. :)
несемантично (кривое слово то какое — жуть) вставлять иконки в меню не несущие никакой смысловой нагрузки на страницу в тегах img, практично, но их место в стилях
и да, логотип в h1 это пи… логотип — это как раз просто картинка, если показывать особо нечего — просто текст.
и да, логотип в 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;
}
*
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
Своим постом вы чуток показали баг на хабре: ipicture.ru/Gallery/Viewfull/8854604.html :)
Ребята, вам бы сначало поучится потом статьи писать…
Ошибки:
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 — Хольцшлаг М.
Ну а потом статьи писать :)
Удачи Авторам в изучении верстки!!!
Ошибки:
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 — Хольцшлаг М.
Ну а потом статьи писать :)
Удачи Авторам в изучении верстки!!!
меня одного раздразил тон в котором были высказаны замечания? :)
Мне кажется нужно быть попроще и не задирать нос. Комментарии в стиле, совет от большого папы маленьким мальчикам ничего кроме раздражения и/или смеха не вызывает.
Мне кажется нужно быть попроще и не задирать нос. Комментарии в стиле, совет от большого папы маленьким мальчикам ничего кроме раздражения и/или смеха не вызывает.
Да здесь вроде как все учатся чему-то
С седьмой оперой всё не совсем гладко — она каждый li начинает с новой строки. Всё внимание на верхнее меню:
У кого-нить есть идеи как через стили заставить седьмую оперу не начинать каждый li с новой строки, но при этом чтобы всё осталось валидным?
У кого-нить есть идеи как через стили заставить седьмую оперу не начинать каждый li с новой строки, но при этом чтобы всё осталось валидным?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Верстаем, верстаем!