Верстка скругленных границ и острых углов

    Сложность элементов интерфейса увеличивается с каждым новым макетом, что доставляет немало хлопот верстальщикам. Развивающиеся технологии позволяют создавать в WEBе сложные приложения (Google не даст мне соврать), поэтому дизайнеры себя не сдерживают и рисуют всё более навороченные вещи. Как правило, это приводит к большому количеству графики на страницах.

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


    1. Скругленные границы


    Сразу поясню о чем речь:



    Необходимо сверстать этот блок так, чтобы он тянулся по ширине и высоте. Как правило, первое что приходит в голову — сверстать таблицу 3x3. В угловые ячейки положить 4 разных изображения с уголками, в центр поместить контент, а остальным ячейкам повесить соот-ие бордеры. Способ кроссбраузерный и довольно простой. Но во-первых, верстать такие блоки таблицами не по фэншую, а во-вторых можно отказаться от четырех мелких изображений.

    Итак, соберем четыре угла в одно изображение. В моем примере получился такой результат (32x26 px):



    Теперь нам осталось спозиционировать это изображение в фоне четырьмя разными способами в блоках
    размером 16x13px, стоящими в углах блока. В результате у автора получилось вот так:

    CSS:
    .roundborder {
    border-top:1px solid #DBDBDB;
    border-bottom:1px solid #DBDBDB;
    }
    .roundborder .content {
    border-left:1px solid #DBDBDB;
    border-right:1px solid #DBDBDB;

    text-align:center;
    color:#7A7A7A;
    padding:10px 15px;
    }
    .roundborder .t, .roundborder .b {
    position:relative;
    height:12px;
    }
    .roundborder .t div, .roundborder .b div {
    position:absolute;
    width:16px; height:13px;
    padding:0; margin:0;
    }
    .roundborder .t .l {
    top:-1px; left:0;
    background:#FFF no-repeat url(https://habrastorage.org/getpro/habr/post_images/10b/dea/8b5/10bdea8b5274eecd5da42b02b9d2cc9f.gif) top left;
    }
    .roundborder .t .r {
    top:-1px; right:0;
    background:#FFF no-repeat url(https://habrastorage.org/getpro/habr/post_images/10b/dea/8b5/10bdea8b5274eecd5da42b02b9d2cc9f.gif) top right;
    }
    .roundborder .b .l {
    background:#FFF no-repeat url(https://habrastorage.org/getpro/habr/post_images/10b/dea/8b5/10bdea8b5274eecd5da42b02b9d2cc9f.gif) bottom left;
    bottom:-1px; left:0;
    }
    .roundborder .b .r {
    background:#FFF no-repeat url(https://habrastorage.org/getpro/habr/post_images/10b/dea/8b5/10bdea8b5274eecd5da42b02b9d2cc9f.gif) bottom right;
    bottom:-1px; right:0;
    }


    HTML:
    <div class="roundborder">
        <div class="t">
            <div class="angles l"></div>
            <div class="angles r"></div>
        </div>

        <div class="content">
            Content
        </div>
       
        <div class="b">
            <div class="angles l"></div>
            <div class="angles r"></div>
        </div>
    </div>

    Изначально углы были сверстаны через 4 ДИВа, разбросанных по углам, и всё бы хорошо, если бы не одно НО — IE6. В нем этот номер не пролез, пришлось всё переверстывать таким вот образом. Итак, задача решена: мы избавились от таблиц и уменьшили число HTTP-соединений на три, за счет сбора углов в один овал.

    2. Углы меньше 90°


    Вы видите макет с вот таким блоком:



    Первое что приходит в голову: «Чооорт, придется вырезать этот треугольник и как-то прицеплять к блоку». Оказывается не нужно. Прием был подсмотрен в верстке hh.ru, за что верстальщику хэдхантера громадный респект!

    Оказывается, границы блока делят совместные углы в равных долях, что позволит создать любые острые углы. Иллюстрация:



    Это всего лишь одна строчка HTML/CSS-кода:

    <div style="border-top:25px solid #00aeef; border-left:150px solid #ec008c; border-bottom:100px solid #fff200; border-right:50px solid #999;"></div>

    Здесь вы найдете более причудливое применение этого приёма. Скриншот для тех, кому лень заглядывать в демку:



    За примером использования далеко ходить не надо. Всем знакома морда Яндекса:



    Вместо png-шки, которую они используют для создания угла, можно создать такой угол из единственного бордера:

    <div style="border-top:34px solid #FFF; border-left:17px solid #FFCC00; border-bottom:34px solid #FFF;"></div>

    И кстати, не забываем, что из конечного числа треугольников можно собрать произвольный многоугольник.

    Заключение


    Если кто-то желает поделится своими способами решения аналогичных задач — прошу в комменты. Удачи вам в борьбе с дизайнерским произволом!

    Кросспост Скругленные границы и острые углы с 2007.fastcoder.ru.

    Дополнения


    1) Камрад maxshopen верно подметил, что бордер бывает и прозрачным, что позволяет нам верстать не оглядываясь на фон страницы. А dmitrybaranovskiy дополнил, что проблема использования прозрачного бордера в ИЕ6 решается IE-фильтром Chroma.
    2) Камрады vasilioruzanni и dmitrybaranovskiy подсказывают, что идея с острыми углами не нова и встречается здесь:
    www.uselesspickles.com/triangles/demo.html
    tantek.com/CSS/Examples/polygons.html
    Поделиться публикацией
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 96
      +6
      Автору большое спасибо — особенно за второй прием. Очевидно же до безобразия, а поди ж ты догадайся :) Спасибо!
        +7
        добавлю, что бордер бывает еще и прозрачным, поэтому пример с яндексом я бы переписал так —

        <div style="
        	border-top:34px solid transparent;
        	border-left:17px solid #FFCC00;
        	border-bottom:34px solid transparent
        "></div>
        

        — тогда блок можно класть на любой фон, а не только на белый. Проверено в IE7/FF3/Safari. В остальных тоже должно по идее работать.

          +2
          ie6 с прозрачными бордерами посылает нас к непрозрачным
            +5
            Решается через фильтр chrome. (не путать с одноимённой поделкой Гугла)
              +1
              Спасибо вашей ветке, дополнил статью.
                +1
                Я бы еще порекомендовал к просмотру статью Сергея Чикуенка «Создание блоков со скругленными уголками». В ней описаны два метода: «Бордюр» и «Звездочка», которые используют один графический файл. Интересны тем, что с их помощью возможно создание скругленного блока на неоднородном фоне, а также использование разных радиусов закругления. Работает в ie6.
                  0
                  Ниже я про это уже упомянул…
                  • НЛО прилетело и опубликовало эту надпись здесь
                • НЛО прилетело и опубликовало эту надпись здесь
                    0
                    Супер дабавил в избранное
            –27
            Простите за оффтоп. Топик создать не могу, да и не форум это для вопросов.

            Пожалуйста, подумайте о моем предложении. Никто из авторов статей не имеет желание и возможность написать статью (обзор) различный JavaScript-фреймворков? Я бы с удовольствием прочитал.

            Заранее спасибо за внимание.
              –20
              >1. Скругленные границы
              глючат в ie6 при ресайзе окна браузера.

              >2. Углы меньше 90°
              видел подобные примеры с полгода назад на зарубежном сайте. Техника явно заимствована (дай бог не содрана полностью), ссылки на источник — нет, что не есть гуд.

              >bur
              _fastcoder.org/articles/?aid=405
              «Александр Бурцев 2 декабря 2008»
              раскрутка сайта на лицо ;) в конце статьи указывать свое авторство чужих примеров — вдвойне незачет.
                +3
                Ну смотря что значит «заимствована». Кто первооткрыватель.
                Я впервые столкнулся с этой фичей уже давно, в реализации псевдо-3D на uselesspickles.com
                  0
                  Первооткрывателем считается Тантек Челик (Tantek Çelik) Страница с примером за январь 2001 года. Ссылку поставить бы не помешало, да.
                    0
                    Поставил, не следует забывать о первооткрывателях :-)
                    0
                    Спасибо, дополнил статью ссылкой. Фича отличная!
                    +3
                    какая-то нездоровая критика, абсолютно неадекватна.
                    >глючат в ie6 при ресайзе окна браузера.
                    ie6 это сам по себе большой глюк, этот вариант работает, и отображается корректно. можно смело забить на смещение границ на 1 пиксель при ресайзе в IE6

                    >видел подобные примеры…
                    каждый много чего видел, автор решил на это обратить внимание.

                    >в конце статьи указывать свое авторство чужих примеров
                    автор подписался под статьей, на абсолютное авторство примеров не претендуя

                    >раскрутка сайта на лицо
                    что то мы даем хабру, чтото хабр дает нам

                    за статью спасибо. тема закруглений, правда, затерта до дыр на хабре и не только, а углы — интересно, надо поупражняться
                    • НЛО прилетело и опубликовало эту надпись здесь
                        +2
                        Забивать не будем, попытаюсь найти фикс и дополню им статью.
                          +2
                          Почитайте у тов. Чикуёнка про хитрое позиционирование без использования right:0 и bottom:0, зато с margin-top:100%… У этой техники есть свои ограничения (поля, отступы и рамки контейнера с pos:rel), зато она сходу работает во всех целевых браузерах.
                        +3
                        можно смело забить на смещение границ на 1 пиксель при ресайзе в IE6


                        Если есть простой фикс, то зачем забивать? Идеология «IE6 — унылое говно, поэтому баги под него не правим» плохо существует в реальном мире, достаточно почитать статистику на ночь.
                          0
                          >ie6 это сам по себе большой глюк, этот вариант работает, и отображается корректно. можно смело забить на смещение границ на 1 пиксель при ресайзе в IE6
                          любые глюки, даже самые незначительные, превращают хорошую верстку в «говноверстку».
                          >автор подписался под статьей, на абсолютное авторство примеров не претендуя
                          подписываться под статьей значит подразумевать «свое» авторство.

                          +4
                          Уважаемый pupsik!

                          Давайте по пунктам:
                          > 1) Скругленные границы глючат в ie6 при ресайзе окна браузер

                          Есть такая беда, мой недосмотр, буду фиксить

                          > 2) видел подобные примеры с полгода назад на зарубежном сайте. Техника явно заимствована (дай бог не содрана полностью), ссылки на источник — нет, что не есть гуд.

                          Сама идея острых углов подсмотрена на сайте hh.ru, если быть точным, вот здесь: hh.ru/employer/40565 (ссылка «Я хочу здесь работать»). О чем я честно написал в статье. Все примеры придуманы на 100% мной и нигде не подсмотрены, так что никакие ссылки ставить больше не обязан…

                          > 3) раскрутка сайта на лицо ;) в конце статьи указывать свое авторство чужих примеров — вдвойне незачет.

                          Статья была написана для сайта fastcoder. Потом автор трудился и публиковал её здесь, а это не простой копипаст, поверьте. Так что вознаграждение виде ссылки считаю закономерным, тем более что это ссылка на самый что ни на есть оригинал.

                          — Ну и просто от себя добавлю. Во многих хороших постах иногда вижу комментарии, где с улюлюканьем поносят автора и кричат: «украдено!», «баян», и прочее. Так вот, далеко не всё украдено, авторы в рунете могут и сами писать. Зато почти всё уже изобретено до нас и по-настоящему оригинальную вещь написать сложно. Но если бы не было повторных открытий, то большинство классных велосипедов пылилось бы на никому неизвестных сайтах…
                        • НЛО прилетело и опубликовало эту надпись здесь
                            0
                            Спасибо, очень полезно. В мемориз
                              0
                              Ссылка в ему:
                              Использован только CSS
                              www.cssplay.co.uk/menu/lighthouse
                                0
                                Забавненько
                                +2
                                ну на самом деле по груглым углам уже давно все перепридумали и выделяется особняком 3 техники их создания… на известном сайте Сергей Чикуенок довольно популярно разобрал их, если кто-то еще не смотрел — посмотрите скринкаст тот.
                                  0
                                  Спасибо, давненько не заглядывал в техногрет…
                                    0
                                    Про скругленные углы соглашусь. Уж сколько всего было понаписано и понапридумывано!
                                    0
                                    автор, спасибо за статью — вынес из неё новое для себя.
                                      –2
                                      в избранное!
                                        +3
                                        Острые углы это для меня открытие! Главное не начать на радостях их лепить где не попадя (8
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                            +1
                                            небольшое замечание:
                                            background: — задать для всех углов единым стилем…
                                            для других углов ставить background-position: ** **;

                                            пример:

                                            .roundborder .t .l,
                                            .roundborder .t .r,
                                            .roundborder .b .l,
                                            .roundborder .b .r {
                                            top:-1px;
                                            background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) top left;
                                            }
                                            .roundborder .t .r {
                                            right:0;
                                            background-position: top right;
                                            }
                                            .roundborder .b .l {
                                            background-position: bottom left;
                                            bottom:-1px; left:0;
                                            }
                                            .roundborder .b .r {
                                            background-position: bottom right;
                                            bottom:-1px; right:0;
                                            }

                                            как то так должно получится!
                                            + не советую использовать position: absolute; bottom: ***; — bottom иной раз дает непредсказуемые результаты!
                                              0
                                              Проверил в ИЕ6+, FF1.5+,Opera9,Safari,Chrome — везде ОК.
                                              –1
                                              небольшое замечание:
                                              background: — задать для всех углов единым стилем…
                                              для других углов ставить background-position: ** **;

                                              пример:

                                              .roundborder .t .l,
                                              .roundborder .t .r,
                                              .roundborder .b .l,
                                              .roundborder .b .r {
                                              top:-1px;
                                              background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) top left;
                                              }
                                              .roundborder .t .r {
                                              right:0;
                                              background-position: top right;
                                              }
                                              .roundborder .b .l {
                                              background-position: bottom left;
                                              bottom:-1px; left:0;
                                              }
                                              .roundborder .b .r {
                                              background-position: bottom right;
                                              bottom:-1px; right:0;
                                              }

                                              как то так должно получится!
                                              + не советую использовать position: absolute; bottom: ***; — bottom иной раз дает непредсказуемые результаты!
                                                0
                                                + не советую использовать position: absolute; bottom: ***; — bottom иной раз дает непредсказуемые результаты!

                                                Это, пардон, какие? Или это нельзя понять, а можно только запомнить? ;)
                                                  –2
                                                  это можно только запомнить!!!
                                                  иной раз ослик просто не понимает bottom, не понимает вообще… почему, разобраться не до сих пор не удалось!
                                                    +1
                                                    В IE6 у блока должен быть hasLayout для того, чтобы в нём что-то стабильно позиционировать, иначе будет мешать padding, будут прятаться элементы и мёртвые с косами выйдут на дорогу…
                                                +1
                                                Фигасе, не знал про такую особенность бордеров (

                                                Автор, спасибо )
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                      0
                                                      НО — IE6. В нем этот номер не пролез, пришлось всё переверстывать таким вот образом.

                                                      А какая именно проблема возникла с позиционированием?
                                                        0
                                                        Изначально я заверстал блок со скругленными углами вот так:

                                                        В верстке этого блока используется единственное изображение

                                                        .roundborder {
                                                        border:1px solid #DBDBDB;
                                                        position:relative;
                                                        }
                                                        .roundborder .content {
                                                        text-align:center;
                                                        color:#7A7A7A;
                                                        padding:10px 15px;
                                                        }
                                                        .roundborder .angles {
                                                        position:absolute;
                                                        width:16px; height:13px;
                                                        background:red;
                                                        padding:0; margin:0;
                                                        }
                                                        .roundborder .tl { /*top-left*/
                                                        top:-1px; left:-1px;
                                                        background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) top left;
                                                        }
                                                        .roundborder .tr { /*top-right*/
                                                        top:-1px; right:-1px;
                                                        background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) top right;
                                                        }
                                                        .roundborder .bl { /*bottom-left*/
                                                        background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) bottom left;
                                                        bottom:-1px; left:-1px;
                                                        }
                                                        .roundborder .br { /*bottom-right*/
                                                        background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) bottom right;
                                                        bottom:-1px; right:-1px;
                                                        }

                                                        Работает прекрасно везде кромее IE6 и ниже. В этих браузерах слетает bottom и нижних уголков просто не видно.
                                                        0
                                                        Потерялся HTML-код :-(
                                                        Как бы его выложить?
                                                          0
                                                          Вот вариант, неработающий в ИЕ6:
                                                          fastcoder.org/demo/roundAngles_2.html
                                                            0
                                                            zoom 1 + font-size 0
                                                            попробуйте

                                                            Статья шикарна
                                                              +1
                                                              Для .roundborder дать hasLayout (zoom:1, например). Для .roundborder .angles добавить font-size:0; (просто overflow:hidden; почему-то не сработал). Затем, для уголков эмулируем right:-1px; и bottom:-1px:

                                                                .roundborder .tl {
                                                                  ...
                                                                }
                                                              
                                                                .roundborder .tr {
                                                                  top:-1px;
                                                                  margin-left:100%;
                                                                  left:-15px;
                                                                  ...
                                                                }
                                                              
                                                                .roundborder .bl {
                                                                  ...
                                                                  top:100%;
                                                                  margin-top:-12px;
                                                                  left:-1px;
                                                                }
                                                              
                                                                .roundborder .br {
                                                                  ...
                                                                  top:100%;
                                                                  left:-15px;
                                                                  margin:-12px 0 0 100%;
                                                                }
                                                              

                                                            0
                                                            Все таки не стоит у элементов с закругленными уголками задавать цвет фона (некрасиво в случае с отключенной графикой). В вот еще оригинальая идея использования острых углов :)
                                                              0
                                                              Да, от фона надо избавляться.
                                                              Домик прекрасен, но фаербаг говорит, что углы сделаны без бордеров.
                                                                +1
                                                                Пардон, но все же вот еще один домик, с углами.
                                                                  0
                                                                  Замечательный дом!
                                                                  Возможности CSS2 не перестают меня удивлять, спасибо вам.
                                                                    0
                                                                    Только я собрался дать ссылку на домик, а ты уже тут как тут. :)
                                                                –1
                                                                как сделать скруглённые уголки для слоёв с разным фоном?
                                                                  0
                                                                  использовать такую html-структуру мне кажется излишним, ибо имеем слишком много «ненужных» div.

                                                                  лично для себя я выработал простую схему: целевому блочному блочному элементу задается position:relative, внутрь в любом месте добавляются 4 span-а, которые средствами CSS делаются блоками, позиционируются абсолютно внутри целевого блока и имеют бекграунд-картинку с изображением скругленного угла.
                                                                  (описано здесь: nicothin.ru/zakruglennye-ugly-v-ideale.html)

                                                                  при желании, эти span-ы можно добавлять средствами JS (это для извращенцев, к которым я себя причисляю). получим семантически верный html и вполне универсальное решение для скругленных углов, позволяющее тянуть что угодно и куда угодно.
                                                                    0
                                                                    да, кстати, в IE6 способ работает прекрасно.
                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                        0
                                                                        Имхо, даже если в ИЕ6 возникает смещение на 1 пиксель при ресайзе, это лучше, чем иметь громоздкий HTML как у автора.

                                                                        Т.е. в первую очередь — максимально правильный и семантически верный HTML. (4 дива для уголков это тоже плохо, но в зависимости от ситуации необходимо). Затем уже подгонка под ИЕ6 средствами CSS, JS и т.п.

                                                                        (Эту ошибку я замечал, да, и по моим наблюдениям она возникает тогда, когда ширина блока либо нефиксированная в пикселях, либо фиксированная в пикселях, но нечётная.)
                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                            0
                                                                            Почитал, полезно, пригодится, сенкс. Во как )
                                                                            А код городить предложил автор, почему я и написал этот коммент. Потом уже увидел это решение.

                                                                            «Изначально углы были сверстаны через 4 ДИВа, разбросанных по углам, и всё бы хорошо, если бы не одно НО — IE6. В нем этот номер не пролез, пришлось всё переверстывать таким вот образом.»
                                                                        +1
                                                                        Эм, вот это:

                                                                        .top-right {right:-2px}
                                                                        .bot-right {bottom:-2px; right:-2px}
                                                                        .bot-left  {bottom:-2px}
                                                                        


                                                                        Как бы не решает проблему)
                                                                          0
                                                                          а как-бы, в чем проблема то?
                                                                          nicothin.ru/html-coding/corners.html — работающий пример, в моем IE6 выглядит так, как должно.
                                                                          (ишак6 имеет пролему с высотой span, но она решается указанием фонт-сайза такого же, как необходимая высота блока)
                                                                          если в примере Ваш ишак показывает что-то глючное (а такое бывает — столкнулся в одном проекте, что у меня и у браузершота все прекрасно в 6-м ишаке, а у клиента — глюки), не сочтите за труд — дайте ссылку на скрин.

                                                                          >>Изначально углы были сверстаны через 4 ДИВа, разбросанных по углам, и всё бы хорошо, если бы не одно НО — IE6. В нем этот номер не пролез, пришлось всё переверстывать таким вот образом.

                                                                          не указана возникшая проблема.
                                                                            0
                                                                            упс, сорри, не прочел комменты выше.
                                                                              +1
                                                                              Вообще у этого решения потенциально может быть 3 проблемы в IE6:

                                                                              1. 1. Неправильное позиционирование абсолютно спозиционированных углов при отсутствии hasLayout для блока контейнера.
                                                                              2. 2. Блоки с уголками будут иметь другую высоту из-за того, что IE6 почему-то всегда в блочном элементе рендерит контейнер строки, даже если ни одного текстового чайлда у элемента нет. Высота уголка будет равна высоте строки (line-height) унаследованной от родительского элемента/значения по-умолчанию.
                                                                              3. 3. Неправильная обработка свойств right и bottom при абсолютном позиционировании элемента. При нечетных размерах элемент будет отставать на 1 пиксель (нечетной высоте для bottom, нечетной ширине для right или одновременно, и ширине и высоте, когда используются оба свойства вместе).

                                                                              В вашем примере Вы исправили проблему №1 (указали ширину для родительского блока), также Вы исправили проблему №2 путем указания font-size:0; для уголков. Но Вы не исправили проблему №3, точнее Вы попытались ее исправить, но это вовсе не решение. Попробуйте просто поресайзить окно браузера и сами все увидите.

                                                                              Мне известно два способа решения этой проблемы:
                                                                              Первый – с применением экспрешна right:expression(parentNode.offsetWidth % 2? '-1px': 0); для right:0; и bottom:expression(parentNode.offsetHeight % 2? '-1px': 0); для bottom:0;
                                                                              Второй, описанный в техногрете Лебедева, через эмуляцию right и bottom с помощью margin-left/left и margin-top/top.

                                                                              Я выше привел пример как можно сделать.
                                                                                0
                                                                                спасибо за подробное разъяснение!
                                                                                (+ в карму)
                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                    0
                                                                                    Имхо, через margin-top/top хрен этот вопрос решишь.

                                                                                    Почему нет? Так как Вы говорите тоже можно (top:auto; и отрицательный margin-top), но в таком случае нужно будет располагать блоки с нижними уголками в коде в самом низу (после контента и верхних уголков). А если использовать просто top:100%; и margin-top:-%высота уголка%; то не нужно будет специально менять положение нижних уголков в коде, что, на мой взгляд, выглядит более гибким. Не отрицаю, что при эмулировании таким способом, и с auto и с 100%, нужно быть аккуратным с полями и отступами вложенных элементов.
                                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                                        0
                                                                                        Да действительно, равноценен. Обидно, а вроде все работало когда ресайзил, а сейчас посмотрел, и действительно иногда отстает, но почему-то гораздо реже. Ну что жe придется тогда уголки в коде правильно располагать и с top:auto; и отрицательным margin-top делать. Спасибо!
                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                              0
                                                                              ну, я, вроде, ни разу еще не переусердствовал.
                                                                              а комп у меня стаааренький — двуядерный (по 1,8) камень, 2 гектара мозгов — в современных условиях очень средний вариант.
                                                                              единственный валидатор, которому я доверяю — который на W3C.com :)

                                                                              а вообще, я посмотрел и потестил — увы, к стыду своему, я упустил пролбему 1px для right и bottom в IE6 :(
                                                                              так что, мой вариант имеет слишком ограниченную область использования :(
                                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                            –3
                                                                            «верстать такие блоки таблицами не по фэншую» ?!?

                                                                            Вы кто у нас? Донателла Версаче по HTML ??!? xa, xa ,xa!

                                                                            Таблицами ефективно и кросбраузерно, пока IE не начнет подерживать display: table-cell;

                                                                            А запихивать div в div, писать громоздкий CSS, куча лишних class, использовать свойства не по назначению (float прдназначен для обтекания, а не для позиционирования) — это неправильный подход к верстке без пракитческого приложения.

                                                                            А так, ради эксперимента или феншуя — можно. :)
                                                                              +3
                                                                              > А запихивать div в div, писать громоздкий CSS, куча лишних class, использовать
                                                                              > свойства не по назначению (float прдназначен для обтекания, а не для позиционирования)

                                                                              > это неправильный подход к верстке без пракитческого приложения.

                                                                              Я не думаю, что таблицы предназначены для оформления уголков. Они предназначены для табличных данных. Так что здесь они тоже использовались бы не по назначению. Но при этом у таблиц есть предопределенное семантическое значение, а у div — нет, поэтому применение блоков мне кажется меньшим злом.
                                                                                0
                                                                                1. Пользователю веб страницы всеравно что вы используете

                                                                                2. Таблицами быстрее, понятнее, меншье кода, соотвествено уходит меньше времени

                                                                                3. кросбраузерно

                                                                                4. предназначены для табличных данных — изначально… интернет изначально был предназначен для военных…

                                                                                5. float — для обтекания --вы предлагаете заменить таблицы которые как вы говорите не предназначены для оформления, свойством CSS float — которое тоже не предназначено для позиционирования. Это выходит взять одну неправильную технологию и заменить другой неправильной? Предложите правильную хотя бы.

                                                                                6. посмотрите на google.com, artlebedev.ru, amazon.com — везде таблицы, а сайты одни из самых успешных. Вы думаете их верстали случайные люди? Ну если вы и с ними не согласны… ну тут уже задумайтесь сами.

                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                    0
                                                                                    >посмотрите на google.com, artlebedev.ru, amazon.com — везде таблицы
                                                                                    Хороший ряд. Но не показательный.

                                                                                    Но не показательный???!!!??? А кто покзательный? Вы вообще на каком свете живете?
                                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                                        0
                                                                                        > Вы это. Того. Загляните в код этой страницы :)

                                                                                        Этой? :) Куча лишних дивов — нергамотная разработка, куча скриптов — надо вынести в отдельный файл. Эта страница далека от проф. верстки, как и вы. Отвечать вам больше смысла нет. Книжки почитайте. Ерик Мейер, Моли Хоицшлаг.
                                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                                      0
                                                                                      а яндекс ??? там тоже все на таблицах, он тоже не показательный?
                                                                                +1
                                                                                1. Пользователю веб страницы всеравно что вы используете

                                                                                2. Таблицами быстрее, понятнее, меншье кода, соотвествено уходит меньше времени

                                                                                3. кросбраузерно

                                                                                4. предназначены для табличных данных — изначально… интернет изначально был предназначен для военных…

                                                                                5. float — для обтекания --вы предлагаете заменить таблицы которые как вы говорите не предназначены для оформления, свойством CSS float — которое тоже не предназначено для позиционирования. Это выходит взять одну неправильную технологию и заменить другой неправильной? Предложите правильную хотя бы.

                                                                                6. посмотрите на google.com, artlebedev.ru, amazon.com — везде таблицы, а сайты одни из самых успешных. Вы думаете их верстали случайные люди? Ну если вы и с ними не согласны… ну тут уже задумайтесь сами.

                                                                                  +2
                                                                                  1. Вас это заставляет работать хуже?
                                                                                  2. Нет. Разница мизерна.
                                                                                  3. Кроссбраузерны оба варианта.
                                                                                  4. Ну и что?
                                                                                  5. А что такое обтекание, как не позиционирование в потоке?
                                                                                  6. Вы всерьез думаете, что успешность этих сайтов определяется табличной версткой?
                                                                                    –3
                                                                                    1. Нет, это заставляет меня работать эфективнее.

                                                                                    2. Разница в том что экономится время. Для вас время не ценно?

                                                                                    3. Изначально углы были сверстаны через 4 ДИВа, разбросанных по углам, и всё бы хорошо, если бы не одно НО — IE6. В нем этот номер не пролез, пришлось всё переверстывать таким вот образом.

                                                                                    4. Ну и то. Что изначально таблицы были для данных а потом начали использоватся для верстки

                                                                                    5. Float ни как не позиционирование в потоке:

                                                                                    Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.

                                                                                    Спецификация CSS на w3c.org

                                                                                    then taken out of the flow — вынимается из потока!

                                                                                    6. А вы думаете эти сайты верстали случайные люди. Вы вобще представляете что в этих конторах работают случайные люди или неграмотные верстальщики?
                                                                                      –1
                                                                                      Один и тот же макет, я буду на таблицах точно дольше верстать, чем на дивах, ну даже если и нет, то через месяц я не смогу там переделать что-нибудь крупное %)
                                                                                        +2
                                                                                        1. И как же это вас заставляет работать эффективнее?
                                                                                        >2. Таблицами быстрее, понятнее, меншье кода, соотвествено уходит меньше времени
                                                                                        Смешно… Быстрее? Понятнее? Меньше? Видимо вы сторонник таблиц. Возможно вы давно верстаете таблицами, а я вот сразу решил для себя. Табл — это прошлый век.
                                                                                        >6. А вы думаете эти сайты верстали случайные люди. Вы вобще представляете что в этих конторах работают случайные люди или неграмотные верстальщики?
                                                                                        Ха… Что за глупость? Судить о успешности сайтов по верстке? Возможно дело в том, что раньше небыло широко известна блочная верстка.
                                                                                          0
                                                                                          WebMast, говорите Табл — это прошлый век? а элемент CENTER на вашем сайте не прошлый век ??? :)))))

                                                                                          Да… искернно посмеялся я над кодом вашего сайта… :)

                                                                                          Валидатор пишет: Errors found while checking this document as XHTML 1.0 Strict! Result: 570 Errors, 429 warning(s)

                                                                                          validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbitby.net%2F

                                                                                            0
                                                                                            ВордПресс создает много проблем для меня. Однако ладно… Смена темы, (старался как можно лучше соответствовать стандартам) решила много проблем. **42 Errors, 21 warning(s)**
                                                                                            Ошибок и этих можно исбежать, все впереди!

                                                                                            >говорите Табл — это прошлый век? а элемент CENTER на вашем сайте не прошлый век ??? :)))))
                                                                                            Где соответствие таблиц и center?
                                                                                    0
                                                                                    Angle — это количественное значение угла (если я правильно выразился), т.е. 60°, например.
                                                                                    В данном случае правильно будет использовать слово “corner”.
                                                                                      +1
                                                                                      очень долго втыкал почему у меня обрезается стрелка на боевом проекте в нелюбимом браузере, правил css-ы, резал весь код, пил успокоительное )))

                                                                                      причиной оказался маленький комментарий перед <!DOCTYPE .../>

                                                                                      *в общем, не забываем про DOCTYPE — без него не работает*

                                                                                        0
                                                                                        У меня и без !DOCTYPE все работало… Странно…
                                                                                          0
                                                                                          IE6? *с новым 7D9 кста*
                                                                                            0
                                                                                            Извини… Забыл про ИЕ. У меня его нету, спасибо, буду знать…
                                                                                        0
                                                                                        Спасибо автору за фишку с бордерами. Долго думал как сделать треугольник, а тут на тебе ;)

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

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