Комментарии 96
Автору большое спасибо — особенно за второй прием. Очевидно же до безобразия, а поди ж ты догадайся :) Спасибо!
добавлю, что бордер бывает еще и прозрачным, поэтому пример с яндексом я бы переписал так —
— тогда блок можно класть на любой фон, а не только на белый. Проверено в IE7/FF3/Safari. В остальных тоже должно по идее работать.
<div style=" border-top:34px solid transparent; border-left:17px solid #FFCC00; border-bottom:34px solid transparent "></div>
— тогда блок можно класть на любой фон, а не только на белый. Проверено в IE7/FF3/Safari. В остальных тоже должно по идее работать.
ie6 с прозрачными бордерами посылает нас к непрозрачным
Решается через фильтр chrome. (не путать с одноимённой поделкой Гугла)
Спасибо вашей ветке, дополнил статью.
Я бы еще порекомендовал к просмотру статью Сергея Чикуенка «Создание блоков со скругленными уголками». В ней описаны два метода: «Бордюр» и «Звездочка», которые используют один графический файл. Интересны тем, что с их помощью возможно создание скругленного блока на неоднородном фоне, а также использование разных радиусов закругления. Работает в ie6.
НЛО прилетело и опубликовало эту надпись здесь
Простите за оффтоп. Топик создать не могу, да и не форум это для вопросов.
Пожалуйста, подумайте о моем предложении. Никто из авторов статей не имеет желание и возможность написать статью (обзор) различный JavaScript-фреймворков? Я бы с удовольствием прочитал.
Заранее спасибо за внимание.
Пожалуйста, подумайте о моем предложении. Никто из авторов статей не имеет желание и возможность написать статью (обзор) различный JavaScript-фреймворков? Я бы с удовольствием прочитал.
Заранее спасибо за внимание.
>1. Скругленные границы
глючат в ie6 при ресайзе окна браузера.
>2. Углы меньше 90°
видел подобные примеры с полгода назад на зарубежном сайте. Техника явно заимствована (дай бог не содрана полностью), ссылки на источник — нет, что не есть гуд.
>bur
_fastcoder.org/articles/?aid=405
«Александр Бурцев 2 декабря 2008»
раскрутка сайта на лицо ;) в конце статьи указывать свое авторство чужих примеров — вдвойне незачет.
глючат в ie6 при ресайзе окна браузера.
>2. Углы меньше 90°
видел подобные примеры с полгода назад на зарубежном сайте. Техника явно заимствована (дай бог не содрана полностью), ссылки на источник — нет, что не есть гуд.
>bur
_fastcoder.org/articles/?aid=405
«Александр Бурцев 2 декабря 2008»
раскрутка сайта на лицо ;) в конце статьи указывать свое авторство чужих примеров — вдвойне незачет.
Ну смотря что значит «заимствована». Кто первооткрыватель.
Я впервые столкнулся с этой фичей уже давно, в реализации псевдо-3D на uselesspickles.com
Я впервые столкнулся с этой фичей уже давно, в реализации псевдо-3D на uselesspickles.com
Первооткрывателем считается Тантек Челик (Tantek Çelik) Страница с примером за январь 2001 года. Ссылку поставить бы не помешало, да.
Спасибо, дополнил статью ссылкой. Фича отличная!
какая-то нездоровая критика, абсолютно неадекватна.
>глючат в ie6 при ресайзе окна браузера.
ie6 это сам по себе большой глюк, этот вариант работает, и отображается корректно. можно смело забить на смещение границ на 1 пиксель при ресайзе в IE6
>видел подобные примеры…
каждый много чего видел, автор решил на это обратить внимание.
>в конце статьи указывать свое авторство чужих примеров
автор подписался под статьей, на абсолютное авторство примеров не претендуя
>раскрутка сайта на лицо
что то мы даем хабру, чтото хабр дает нам
за статью спасибо. тема закруглений, правда, затерта до дыр на хабре и не только, а углы — интересно, надо поупражняться
>глючат в ie6 при ресайзе окна браузера.
ie6 это сам по себе большой глюк, этот вариант работает, и отображается корректно. можно смело забить на смещение границ на 1 пиксель при ресайзе в IE6
>видел подобные примеры…
каждый много чего видел, автор решил на это обратить внимание.
>в конце статьи указывать свое авторство чужих примеров
автор подписался под статьей, на абсолютное авторство примеров не претендуя
>раскрутка сайта на лицо
что то мы даем хабру, чтото хабр дает нам
за статью спасибо. тема закруглений, правда, затерта до дыр на хабре и не только, а углы — интересно, надо поупражняться
НЛО прилетело и опубликовало эту надпись здесь
можно смело забить на смещение границ на 1 пиксель при ресайзе в IE6
Если есть простой фикс, то зачем забивать? Идеология «IE6 — унылое говно, поэтому баги под него не правим» плохо существует в реальном мире, достаточно почитать статистику на ночь.
>ie6 это сам по себе большой глюк, этот вариант работает, и отображается корректно. можно смело забить на смещение границ на 1 пиксель при ресайзе в IE6
любые глюки, даже самые незначительные, превращают хорошую верстку в «говноверстку».
>автор подписался под статьей, на абсолютное авторство примеров не претендуя
подписываться под статьей значит подразумевать «свое» авторство.
любые глюки, даже самые незначительные, превращают хорошую верстку в «говноверстку».
>автор подписался под статьей, на абсолютное авторство примеров не претендуя
подписываться под статьей значит подразумевать «свое» авторство.
Уважаемый pupsik!
Давайте по пунктам:
> 1) Скругленные границы глючат в ie6 при ресайзе окна браузер
Есть такая беда, мой недосмотр, буду фиксить
> 2) видел подобные примеры с полгода назад на зарубежном сайте. Техника явно заимствована (дай бог не содрана полностью), ссылки на источник — нет, что не есть гуд.
Сама идея острых углов подсмотрена на сайте hh.ru, если быть точным, вот здесь: hh.ru/employer/40565 (ссылка «Я хочу здесь работать»). О чем я честно написал в статье. Все примеры придуманы на 100% мной и нигде не подсмотрены, так что никакие ссылки ставить больше не обязан…
> 3) раскрутка сайта на лицо ;) в конце статьи указывать свое авторство чужих примеров — вдвойне незачет.
Статья была написана для сайта fastcoder. Потом автор трудился и публиковал её здесь, а это не простой копипаст, поверьте. Так что вознаграждение виде ссылки считаю закономерным, тем более что это ссылка на самый что ни на есть оригинал.
— Ну и просто от себя добавлю. Во многих хороших постах иногда вижу комментарии, где с улюлюканьем поносят автора и кричат: «украдено!», «баян», и прочее. Так вот, далеко не всё украдено, авторы в рунете могут и сами писать. Зато почти всё уже изобретено до нас и по-настоящему оригинальную вещь написать сложно. Но если бы не было повторных открытий, то большинство классных велосипедов пылилось бы на никому неизвестных сайтах…
Давайте по пунктам:
> 1) Скругленные границы глючат в ie6 при ресайзе окна браузер
Есть такая беда, мой недосмотр, буду фиксить
> 2) видел подобные примеры с полгода назад на зарубежном сайте. Техника явно заимствована (дай бог не содрана полностью), ссылки на источник — нет, что не есть гуд.
Сама идея острых углов подсмотрена на сайте hh.ru, если быть точным, вот здесь: hh.ru/employer/40565 (ссылка «Я хочу здесь работать»). О чем я честно написал в статье. Все примеры придуманы на 100% мной и нигде не подсмотрены, так что никакие ссылки ставить больше не обязан…
> 3) раскрутка сайта на лицо ;) в конце статьи указывать свое авторство чужих примеров — вдвойне незачет.
Статья была написана для сайта fastcoder. Потом автор трудился и публиковал её здесь, а это не простой копипаст, поверьте. Так что вознаграждение виде ссылки считаю закономерным, тем более что это ссылка на самый что ни на есть оригинал.
— Ну и просто от себя добавлю. Во многих хороших постах иногда вижу комментарии, где с улюлюканьем поносят автора и кричат: «украдено!», «баян», и прочее. Так вот, далеко не всё украдено, авторы в рунете могут и сами писать. Зато почти всё уже изобретено до нас и по-настоящему оригинальную вещь написать сложно. Но если бы не было повторных открытий, то большинство классных велосипедов пылилось бы на никому неизвестных сайтах…
НЛО прилетело и опубликовало эту надпись здесь
Спасибо, очень полезно. В мемориз
ну на самом деле по груглым углам уже давно все перепридумали и выделяется особняком 3 техники их создания… на известном сайте Сергей Чикуенок довольно популярно разобрал их, если кто-то еще не смотрел — посмотрите скринкаст тот.
автор, спасибо за статью — вынес из неё новое для себя.
в избранное!
Острые углы это для меня открытие! Главное не начать на радостях их лепить где не попадя (8
НЛО прилетело и опубликовало эту надпись здесь
небольшое замечание:
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 иной раз дает непредсказуемые результаты!
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 иной раз дает непредсказуемые результаты!
небольшое замечание:
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 иной раз дает непредсказуемые результаты!
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 иной раз дает непредсказуемые результаты!
+ не советую использовать position: absolute; bottom: ***; — bottom иной раз дает непредсказуемые результаты!
Это, пардон, какие? Или это нельзя понять, а можно только запомнить? ;)
Фигасе, не знал про такую особенность бордеров (
Автор, спасибо )
Автор, спасибо )
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НО — IE6. В нем этот номер не пролез, пришлось всё переверстывать таким вот образом.
А какая именно проблема возникла с позиционированием?
Изначально я заверстал блок со скругленными углами вот так:
В верстке этого блока используется единственное изображение
.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 и нижних уголков просто не видно.
В верстке этого блока используется единственное изображение
.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 и нижних уголков просто не видно.
Вот что нужно для блока, чтобы всё адекватно работало
Потерялся HTML-код :-(
Как бы его выложить?
Как бы его выложить?
Вот вариант, неработающий в ИЕ6:
fastcoder.org/demo/roundAngles_2.html
fastcoder.org/demo/roundAngles_2.html
zoom 1 + font-size 0
попробуйте
Статья шикарна
попробуйте
Статья шикарна
Для .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%;
}
Все таки не стоит у элементов с закругленными уголками задавать цвет фона (некрасиво в случае с отключенной графикой). В вот еще оригинальая идея использования острых углов :)
Да, от фона надо избавляться.
Домик прекрасен, но фаербаг говорит, что углы сделаны без бордеров.
Домик прекрасен, но фаербаг говорит, что углы сделаны без бордеров.
Пардон, но все же вот еще один домик, с углами.
как сделать скруглённые уголки для слоёв с разным фоном?
использовать такую html-структуру мне кажется излишним, ибо имеем слишком много «ненужных» div.
лично для себя я выработал простую схему: целевому блочному блочному элементу задается position:relative, внутрь в любом месте добавляются 4 span-а, которые средствами CSS делаются блоками, позиционируются абсолютно внутри целевого блока и имеют бекграунд-картинку с изображением скругленного угла.
(описано здесь: nicothin.ru/zakruglennye-ugly-v-ideale.html)
при желании, эти span-ы можно добавлять средствами JS (это для извращенцев, к которым я себя причисляю). получим семантически верный html и вполне универсальное решение для скругленных углов, позволяющее тянуть что угодно и куда угодно.
лично для себя я выработал простую схему: целевому блочному блочному элементу задается position:relative, внутрь в любом месте добавляются 4 span-а, которые средствами CSS делаются блоками, позиционируются абсолютно внутри целевого блока и имеют бекграунд-картинку с изображением скругленного угла.
(описано здесь: nicothin.ru/zakruglennye-ugly-v-ideale.html)
при желании, эти span-ы можно добавлять средствами JS (это для извращенцев, к которым я себя причисляю). получим семантически верный html и вполне универсальное решение для скругленных углов, позволяющее тянуть что угодно и куда угодно.
да, кстати, в IE6 способ работает прекрасно.
НЛО прилетело и опубликовало эту надпись здесь
Имхо, даже если в ИЕ6 возникает смещение на 1 пиксель при ресайзе, это лучше, чем иметь громоздкий HTML как у автора.
Т.е. в первую очередь — максимально правильный и семантически верный HTML. (4 дива для уголков это тоже плохо, но в зависимости от ситуации необходимо). Затем уже подгонка под ИЕ6 средствами CSS, JS и т.п.
(Эту ошибку я замечал, да, и по моим наблюдениям она возникает тогда, когда ширина блока либо нефиксированная в пикселях, либо фиксированная в пикселях, но нечётная.)
Т.е. в первую очередь — максимально правильный и семантически верный HTML. (4 дива для уголков это тоже плохо, но в зависимости от ситуации необходимо). Затем уже подгонка под ИЕ6 средствами CSS, JS и т.п.
(Эту ошибку я замечал, да, и по моим наблюдениям она возникает тогда, когда ширина блока либо нефиксированная в пикселях, либо фиксированная в пикселях, но нечётная.)
НЛО прилетело и опубликовало эту надпись здесь
Почитал, полезно, пригодится, сенкс. Во как )
А код городить предложил автор, почему я и написал этот коммент. Потом уже увидел это решение.
«Изначально углы были сверстаны через 4 ДИВа, разбросанных по углам, и всё бы хорошо, если бы не одно НО — IE6. В нем этот номер не пролез, пришлось всё переверстывать таким вот образом.»
А код городить предложил автор, почему я и написал этот коммент. Потом уже увидел это решение.
«Изначально углы были сверстаны через 4 ДИВа, разбросанных по углам, и всё бы хорошо, если бы не одно НО — IE6. В нем этот номер не пролез, пришлось всё переверстывать таким вот образом.»
Эм, вот это:
Как бы не решает проблему)
.top-right {right:-2px}
.bot-right {bottom:-2px; right:-2px}
.bot-left {bottom:-2px}
Как бы не решает проблему)
а как-бы, в чем проблема то?
nicothin.ru/html-coding/corners.html — работающий пример, в моем IE6 выглядит так, как должно.
(ишак6 имеет пролему с высотой span, но она решается указанием фонт-сайза такого же, как необходимая высота блока)
если в примере Ваш ишак показывает что-то глючное (а такое бывает — столкнулся в одном проекте, что у меня и у браузершота все прекрасно в 6-м ишаке, а у клиента — глюки), не сочтите за труд — дайте ссылку на скрин.
>>Изначально углы были сверстаны через 4 ДИВа, разбросанных по углам, и всё бы хорошо, если бы не одно НО — IE6. В нем этот номер не пролез, пришлось всё переверстывать таким вот образом.
не указана возникшая проблема.
nicothin.ru/html-coding/corners.html — работающий пример, в моем IE6 выглядит так, как должно.
(ишак6 имеет пролему с высотой span, но она решается указанием фонт-сайза такого же, как необходимая высота блока)
если в примере Ваш ишак показывает что-то глючное (а такое бывает — столкнулся в одном проекте, что у меня и у браузершота все прекрасно в 6-м ишаке, а у клиента — глюки), не сочтите за труд — дайте ссылку на скрин.
>>Изначально углы были сверстаны через 4 ДИВа, разбросанных по углам, и всё бы хорошо, если бы не одно НО — IE6. В нем этот номер не пролез, пришлось всё переверстывать таким вот образом.
не указана возникшая проблема.
упс, сорри, не прочел комменты выше.
Вообще у этого решения потенциально может быть 3 проблемы в IE6:
В вашем примере Вы исправили проблему №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.
Я выше привел пример как можно сделать.
- 1. Неправильное позиционирование абсолютно спозиционированных углов при отсутствии hasLayout для блока контейнера.
- 2. Блоки с уголками будут иметь другую высоту из-за того, что IE6 почему-то всегда в блочном элементе рендерит контейнер строки, даже если ни одного текстового чайлда у элемента нет. Высота уголка будет равна высоте строки (line-height) унаследованной от родительского элемента/значения по-умолчанию.
- 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.
Я выше привел пример как можно сделать.
спасибо за подробное разъяснение!
(+ в карму)
(+ в карму)
НЛО прилетело и опубликовало эту надпись здесь
Имхо, через margin-top/top хрен этот вопрос решишь.
Почему нет? Так как Вы говорите тоже можно (top:auto; и отрицательный margin-top), но в таком случае нужно будет располагать блоки с нижними уголками в коде в самом низу (после контента и верхних уголков). А если использовать просто top:100%; и margin-top:-%высота уголка%; то не нужно будет специально менять положение нижних уголков в коде, что, на мой взгляд, выглядит более гибким. Не отрицаю, что при эмулировании таким способом, и с auto и с 100%, нужно быть аккуратным с полями и отступами вложенных элементов.
НЛО прилетело и опубликовало эту надпись здесь
ну, я, вроде, ни разу еще не переусердствовал.
а комп у меня стаааренький — двуядерный (по 1,8) камень, 2 гектара мозгов — в современных условиях очень средний вариант.
единственный валидатор, которому я доверяю — который на W3C.com :)
а вообще, я посмотрел и потестил — увы, к стыду своему, я упустил пролбему 1px для right и bottom в IE6 :(
так что, мой вариант имеет слишком ограниченную область использования :(
а комп у меня стаааренький — двуядерный (по 1,8) камень, 2 гектара мозгов — в современных условиях очень средний вариант.
единственный валидатор, которому я доверяю — который на W3C.com :)
а вообще, я посмотрел и потестил — увы, к стыду своему, я упустил пролбему 1px для right и bottom в IE6 :(
так что, мой вариант имеет слишком ограниченную область использования :(
«верстать такие блоки таблицами не по фэншую» ?!?
Вы кто у нас? Донателла Версаче по HTML ??!? xa, xa ,xa!
Таблицами ефективно и кросбраузерно, пока IE не начнет подерживать display: table-cell;
А запихивать div в div, писать громоздкий CSS, куча лишних class, использовать свойства не по назначению (float прдназначен для обтекания, а не для позиционирования) — это неправильный подход к верстке без пракитческого приложения.
А так, ради эксперимента или феншуя — можно. :)
Вы кто у нас? Донателла Версаче по HTML ??!? xa, xa ,xa!
Таблицами ефективно и кросбраузерно, пока IE не начнет подерживать display: table-cell;
А запихивать div в div, писать громоздкий CSS, куча лишних class, использовать свойства не по назначению (float прдназначен для обтекания, а не для позиционирования) — это неправильный подход к верстке без пракитческого приложения.
А так, ради эксперимента или феншуя — можно. :)
НЛО прилетело и опубликовало эту надпись здесь
1. Пользователю веб страницы всеравно что вы используете
2. Таблицами быстрее, понятнее, меншье кода, соотвествено уходит меньше времени
3. кросбраузерно
4. предназначены для табличных данных — изначально… интернет изначально был предназначен для военных…
5. float — для обтекания --вы предлагаете заменить таблицы которые как вы говорите не предназначены для оформления, свойством CSS float — которое тоже не предназначено для позиционирования. Это выходит взять одну неправильную технологию и заменить другой неправильной? Предложите правильную хотя бы.
6. посмотрите на google.com, artlebedev.ru, amazon.com — везде таблицы, а сайты одни из самых успешных. Вы думаете их верстали случайные люди? Ну если вы и с ними не согласны… ну тут уже задумайтесь сами.
2. Таблицами быстрее, понятнее, меншье кода, соотвествено уходит меньше времени
3. кросбраузерно
4. предназначены для табличных данных — изначально… интернет изначально был предназначен для военных…
5. float — для обтекания --вы предлагаете заменить таблицы которые как вы говорите не предназначены для оформления, свойством CSS float — которое тоже не предназначено для позиционирования. Это выходит взять одну неправильную технологию и заменить другой неправильной? Предложите правильную хотя бы.
6. посмотрите на google.com, artlebedev.ru, amazon.com — везде таблицы, а сайты одни из самых успешных. Вы думаете их верстали случайные люди? Ну если вы и с ними не согласны… ну тут уже задумайтесь сами.
НЛО прилетело и опубликовало эту надпись здесь
>посмотрите на google.com, artlebedev.ru, amazon.com — везде таблицы
Хороший ряд. Но не показательный.
Но не показательный???!!!??? А кто покзательный? Вы вообще на каком свете живете?
Хороший ряд. Но не показательный.
Но не показательный???!!!??? А кто покзательный? Вы вообще на каком свете живете?
НЛО прилетело и опубликовало эту надпись здесь
а яндекс ??? там тоже все на таблицах, он тоже не показательный?
1. Пользователю веб страницы всеравно что вы используете
2. Таблицами быстрее, понятнее, меншье кода, соотвествено уходит меньше времени
3. кросбраузерно
4. предназначены для табличных данных — изначально… интернет изначально был предназначен для военных…
5. float — для обтекания --вы предлагаете заменить таблицы которые как вы говорите не предназначены для оформления, свойством CSS float — которое тоже не предназначено для позиционирования. Это выходит взять одну неправильную технологию и заменить другой неправильной? Предложите правильную хотя бы.
6. посмотрите на google.com, artlebedev.ru, amazon.com — везде таблицы, а сайты одни из самых успешных. Вы думаете их верстали случайные люди? Ну если вы и с ними не согласны… ну тут уже задумайтесь сами.
2. Таблицами быстрее, понятнее, меншье кода, соотвествено уходит меньше времени
3. кросбраузерно
4. предназначены для табличных данных — изначально… интернет изначально был предназначен для военных…
5. float — для обтекания --вы предлагаете заменить таблицы которые как вы говорите не предназначены для оформления, свойством CSS float — которое тоже не предназначено для позиционирования. Это выходит взять одну неправильную технологию и заменить другой неправильной? Предложите правильную хотя бы.
6. посмотрите на google.com, artlebedev.ru, amazon.com — везде таблицы, а сайты одни из самых успешных. Вы думаете их верстали случайные люди? Ну если вы и с ними не согласны… ну тут уже задумайтесь сами.
НЛО прилетело и опубликовало эту надпись здесь
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. А вы думаете эти сайты верстали случайные люди. Вы вобще представляете что в этих конторах работают случайные люди или неграмотные верстальщики?
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. Таблицами быстрее, понятнее, меншье кода, соотвествено уходит меньше времени
Смешно… Быстрее? Понятнее? Меньше? Видимо вы сторонник таблиц. Возможно вы давно верстаете таблицами, а я вот сразу решил для себя. Табл — это прошлый век.
>6. А вы думаете эти сайты верстали случайные люди. Вы вобще представляете что в этих конторах работают случайные люди или неграмотные верстальщики?
Ха… Что за глупость? Судить о успешности сайтов по верстке? Возможно дело в том, что раньше небыло широко известна блочная верстка.
>2. Таблицами быстрее, понятнее, меншье кода, соотвествено уходит меньше времени
Смешно… Быстрее? Понятнее? Меньше? Видимо вы сторонник таблиц. Возможно вы давно верстаете таблицами, а я вот сразу решил для себя. Табл — это прошлый век.
>6. А вы думаете эти сайты верстали случайные люди. Вы вобще представляете что в этих конторах работают случайные люди или неграмотные верстальщики?
Ха… Что за глупость? Судить о успешности сайтов по верстке? Возможно дело в том, что раньше небыло широко известна блочная верстка.
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
Да… искернно посмеялся я над кодом вашего сайта… :)
Валидатор пишет: 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
ВордПресс создает много проблем для меня. Однако ладно… Смена темы, (старался как можно лучше соответствовать стандартам) решила много проблем. **42 Errors, 21 warning(s)**
Ошибок и этих можно исбежать, все впереди!
>говорите Табл — это прошлый век? а элемент CENTER на вашем сайте не прошлый век ??? :)))))
Где соответствие таблиц и center?
Ошибок и этих можно исбежать, все впереди!
>говорите Табл — это прошлый век? а элемент CENTER на вашем сайте не прошлый век ??? :)))))
Где соответствие таблиц и center?
Angle — это количественное значение угла (если я правильно выразился), т.е. 60°, например.
В данном случае правильно будет использовать слово “corner”.
В данном случае правильно будет использовать слово “corner”.
очень долго втыкал почему у меня обрезается стрелка на боевом проекте в нелюбимом браузере, правил css-ы, резал весь код, пил успокоительное )))
причиной оказался маленький комментарий перед <!DOCTYPE .../>
*в общем, не забываем про DOCTYPE — без него не работает*
причиной оказался маленький комментарий перед <!DOCTYPE .../>
*в общем, не забываем про DOCTYPE — без него не работает*
Спасибо автору за фишку с бордерами. Долго думал как сделать треугольник, а тут на тебе ;)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Верстка скругленных границ и острых углов