Резиновый блок с круглыми краями

[WalkMan]

сосбно сабж

нужен блок который тянеться и в ширину и в высоту

углы у него закгругленные (пнг или гиф)

подсказали решение таблицей

но хотелось бы без неё

[TonKhaO]

сосбно сабж

нужен блок который тянеться и в ширину и в высоту

углы у него закгругленные (пнг или гиф)

подсказали решение таблицей

но хотелось бы без неё

можно таблицей. но таблицей не семантично будет! таблицы для данных а в данной задаче это на данные не похоже!

советую дивами

три дива, верхний (в нем левый и правый уголок абсолютами), далее средний див собсно с контетом и нижний, который аналогичен верхнему по структуре

да и в данном примере с пнг прозрачностью думаю морочиться не нужно для 6 ие, у тя фон однородный поэтому мона делать гифами краями под фон

структура примерно такая

<div class="top">

	 <div class="leftCorner"></div>
	 <div class="rightCorner"></div>

</div>

<div class="content">content</div>

<div class="bottom">

	 <div class="leftCorner"></div>
	 <div class="rightCorner"></div>

</div>

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

Edited January 27, 2010 by TonKhaO

[psywalker]

TonKhaO

Правильно делаешь дружище, передавай знания, так и надо

[TonKhaO]

TonKhaO

Правильно делаешь дружище, передавай знания, так и надо

ну так Уолкер, спасибо, но тебе огромное спасибо что делишься опытом

сам ощущаю что совершенствуюсь!

[WalkMan]

сдаеться мне что порвет этот макет в ие

[TonKhaO]

сдаеться мне что порвет этот макет в ие

порвет?

[WalkMan]

порвет?

что в width указывать?

по дефолту он на 100% тянеться

[TonKhaO]

что в width указывать?

по дефолту он на 100% тянеться

смотря какой ты div имеешь ввиду, поточнее скажи плз

Edited January 27, 2010 by TonKhaO

[WalkMan]

ну те что с углами это понятно

там фиксы

а вот top/content/bottom ?

пс

мот у тебя где висит работающий пример?

[TonKhaO]

ну те что с углами это понятно

там фиксы

а вот top/content/bottom ?

пс

мот у тебя где висит работающий пример?

да запросто, посмотри на http://www.tatyanavais.ru/tehnolog.html, найди по айди блок left_area и там увидишь как раз корнеры.

а так могу сказать что top/content/bottom в них не нужно указывать width, он там по умолчанию стоит правильный (auto) то есть они на всю ширину родительского дива, то есть те еще нужно для top/content/bottom создать родитель а вот уже в нем если нужно проставить ширину, у меня в примере как раз родитель left_area

или же вот пример Уолкера аналогичный http://psywalker.ru/Box/box5/main.html

Edited January 27, 2010 by TonKhaO

[Yahoo!]

Зачем делить главный блок на три части?????

Один блок! А в нём абсолютным позиционированием раскидываешь уголки и всё!

Всё легко:

.box {
position: relative;
display: inline-block; /* has-layout for ie6! */
}

tl, bi, tr, br {
position: absolute; 
overflow: hidden; /* has-layout for ie6 */
width: ...px;
height: ...px}

/*+ каждому углу ставишь top, left, right & bottom ну и background*/

HTML:

<div class="box">
здрасьте
<div class="tl"></div>
<div class="bl"></div>
<div class="tr"></div>
<div class="br"></div>
</div>

Надеюсь понятно.

Ах, да, если углы маленькие, да и вообще, ставь для всех углов font-size: 0

Edited January 27, 2010 by Yahoo!

[TonKhaO]

Зачем делить на три?????

Один блок! А в нём абсолютным позиционированием раскидываешь уголки и всё!

ты знаешь что если 1 блок сделать и сделать уголки абсолютами в этом блоке то в ИЕ6 на пиксель внизу все полезет?

у меня была такая фигня все в 1 блоке сделал, и соотв у нижних уголков прописывал типа top: 100%; margin-top: -высота элемента и у меня на пиксель в ИЕ6 было несоответствие, и на сколько я помню если написать вместо "topa и margin-top" BOTTOM, то в ИЕ 6 тож были какие то траблы с этим, но если покажешь работающий кроссбраузерный пример то с удовольствием посмотрю

Edited January 27, 2010 by TonKhaO

[Great Rash]

Я вот только что сделал пример... как раз для такого случая подойдет

http://forum.htmlbook.ru/index.php?showtopic=19211

[WalkMan]

да запросто, посмотри на http://www.tatyanavais.ru/tehnolog.html, найди по айди блок left_area и там увидишь как раз корнеры.

а так могу сказать что top/content/bottom в них не нужно указывать width, он там по умолчанию стоит правильный (auto) то есть они на всю ширину родительского дива, то есть те еще нужно для top/content/bottom создать родитель а вот уже в нем если нужно проставить ширину, у меня в примере как раз родитель left_area

или же вот пример Уолкера аналогичный http://psywalker.ru/Box/box5/main.html

счас поколупаемся

[TonKhaO]

Yahoo! кстати смотри, вопрос на засыпку, что если задний фон не однородный а градиентный (да и пофиг даж не градиентный пусть будет) как у меня на сайте пример которого я привел. ну вот сделал ты внутри 1 блока все абсолюты а картинки-уголки у тебя пнг с прозрачностью, и ты уже не сможешь проставить внешнему блоку маргины боковые, и верхние тоже то есть тебе прийдется уголки делать не 4 картинками а 2-мя, верхней и нижней + ко всему такой подход позволяет сделать только фиксированную ширину у дива, убедил?

Edited January 27, 2010 by TonKhaO

[WalkMan]

счас поколупаемся

В общем итого

пол дня протупил

искал так сказать 5 угол )

искал решение что бы без родительского блока

[TonKhaO]

В общем итого

пол дня протупил

искал так сказать 5 угол )

искал решение что бы без родительского блока

ну так помогло в итоге то?

[WalkMan]

конечно

вся загвоздка была в отсутсвии родителя

который ограничивал бы ширину для ослов

спасибо

[TonKhaO]

конечно

вся загвоздка была в отсутсвии родителя

который ограничивал бы ширину для ослов

спасибо

на здоровье

ps: без родителей в наше время никуда

[Yahoo!]

Почему не смогу? Если блоку задана ширина, то надо по-любому оборачивать) А на счёт 1px нижние делай через експрешн, а правый left: 100%; right: нирина уголка+ уголка (точно не помню). А не помню, потому что закруглюм немного другим способом.

если покажешь работающий кроссбраузерный пример то с удовольствием посмотрю

Вот кстати

HTML
<div class="box">
<div><div><div><div>
здрасьте
</div></div></div></div>
</div>

CSS
.box {border: 1px solid #abcdef}
.box div {background: url(...(tl)) no-repeat 0 0; top: -1px; left: -1px; position: relative}
.box div {background: url(...(bl)) no-repeat 0 100%; top: 2px; left: 0}
.box div {background: url(...(br)) no-repeat 100% 100%; top:; left: 2px}
.box div {background: url(...(bl)) no-repeat 100% 0; top: -2px; left: 0; padding: ECJIu Hago}

[TonKhaO]

Почему не смогу? Если блоку задана ширина, то надо по-любому оборачивать) А на счёт 1px нижние делай через експрешн, а правый left: 100%; right: нирина уголка+ уголка (точно не помню). А не помню, потому что закруглюм немного другим способом.

смари у тебя получается в способе лишний экспрешн, для меня это уже не гуд, я всегда их сторонюсь в css а код твой попробую вечером

Edited January 27, 2010 by TonKhaO

[Yahoo!]

Ну ладно-ладно, если надо кросс, без экспрешена и 1px лишних, то используй эти пустые дивы) возьму на заметку тож)

—

Кстати, не реально же закруглить блоки, что б неоднородный фон был и внутри блока и снаружи и что б всё это норм сочеталось, конечно же резина без CSS3 и JS

Edited January 27, 2010 by Yahoo!

[Justnewone]

Ну ладно-ладно, если надо кросс, без экспрешена и 1px лишних, то используй эти пустые дивы) возьму на заметку тож)

—

Кстати, не реально же закруглить блоки, что б неоднородный фон был и внутри блока и снаружи и что б всё это норм сочеталось, конечно же резина без CSS3 и JS

реально, однопиксельными блоками, очень много однопиксельных блоков

[Yahoo!]

У меня была идея сверстать такой изврат)) типо без графики и всё такое

На блоге димокса видел статью про закругление без графики попиксельно и получилась однопиксельная закруглённая размытенькая рамочка. Кстати кроссбраузерно. Но это мега-изврат)

[TonKhaO]

Ну ладно-ладно, если надо кросс, без экспрешена и 1px лишних, то используй эти пустые дивы) возьму на заметку тож)

—

Кстати, не реально же закруглить блоки, что б неоднородный фон был и внутри блока и снаружи и что б всё это норм сочеталось, конечно же резина без CSS3 и JS

конечно кросс это вообще главное кому как а я честно стараюсь без экспрешенов, а один пиксел лишний убивает сам понимаешь верстку, этот пиксель за версту видно )))

могу одно сказать я вечером попробую в 1 блоке через bottom без отриц маргинов, если все будет кроссбраузерно то беру твой способ на заметку, но сам онимаешь твой способом подходит только если картинки-уголки непрозрачные, тогда они конечно перекроют задний фон на стыках в углах внешнего дива

Edited January 27, 2010 by TonKhaO

[psywalker]

Если делать изврат, то всё равно углы будут заметно кривые, картинки лучше, даже не раздумывая.