Верстаем, верстаем!

    После того, как я опубликовал давече тему о создании макета страницы, нам с тов. CurlyBrace пришла в голову одна интересная мысль: а не сделать ли того, что мы умеем делать лучше всего?

    Да, вы правы! Денис любезно сверстал данный макет валидным и семантичным XHTML. Он — молодец, а я ему немного в этом подсобил, доделав небольшую деталь. Он большое внимание уделил размеру страницы и её исходного кода.

    Come on, user


    Внимание: топик не содержит WYSIWYG!
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

                                                                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                                    Самое читаемое