Подскажите пожалуйста как сделать круглые углы у слоя ?

сорри забыл залогиниться

у слоя?! да вообще-то никак, а вот натыкать по его углам картинки, где нарисованы круглые края можно)

да ладно никак я видел на нескольких сайтах сделалано

Да ладно)) Картинки и были

Цитата(alligator @ 30.9.2005, 20:09)

да ладно никак я видел на нескольких сайтах сделалано

alligator, ну тогда открываешь коды этих сайтов и смотришь, как сделано... Что может быть проще?

У меня у самой на сайте везде круглые углы, но сделано это чудовищными таблицами и css.

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

делаеться в 4 слоя
Я пытался разобраться но у меня не получилось

Это сообщение отредактировал(а) alligator - 30.9.2005, 22:07

alligator, пришли ссылку, попробуем разобраться. Самой интересно...

закругленные как здесь www.hunter.vingrad.ru?

там бэкграундом сделано http://www.hunter.vingrad.ru/images/righttop.gif
Добавлено @ 00:45
Можеш и таблицей сделать
первая строка 3 столбика - левый бэкграунд, средний и правый
вторая строка левый, вся инфа, правый
третья строка как первая тока кверх тармашками картинки

Это сообщение отредактировал(а) Куксикус - 2.10.2005, 00:45

На сайте www.hunter.vingrad.ru это сделано вложенными блоками. "Главный блок" собирается из трех блоков: верхний, блок с содержимым и нижний блок. В верхнем блоке еще один блок с правым верхним закругленным уголком. В нижнем - два блока с уголками.
Стили для этих блоков реализованы вот так:

Код

div.topline, div.bottomline {     background: #F9FFF3;     border-style: solid;     border-color: #999999;     border-width: 1px 1px 0px 1px;     height: 5px;     font-size: 1px; } div.bottomline {     border-width: 0px 1px 1px 1px; } div.righttop, div.leftbottom, div.rightbottom {     float: right;     width: 5px;     height: 5px;     background : url(images/righttop.gif);     font-size: 1px;     position: relative;     left: 1px;     top: -1px; } div.leftbottom {     float: left;     background : url(images/leftbottom.gif);     left: -1px;     top: 1px; } div.rightbottom {     background : url(images/rightbottom.gif);     top: 1px; }

Собирается это все примерно так (только там еще мудренее):

Код

<div class="topline"><div class="righttop"></div></div>         <div class="text1"></div>  <div class="bottomline"><div class="leftbottom"></div><div class="rightbottom"></div></div>

Филосовский вопрос: чем такая блочная каша лучше таблиц?

Интересно все-таки что же alligator имел ввиду

Цитата(Bastet @ 3.10.2005, 00:16)

Филосовский вопрос: чем такая блочная каша лучше таблиц?

это мы оставим в тайне)

Цитата(z @ 3.10.2005, 10:22)

Цитата (Bastet @ 3.10.2005, 00:16) Филосовский вопрос: чем такая блочная каша лучше таблиц? это мы оставим в тайне)

Нет, мы ответим.

1. html просто прозрачен (каши не вижу, ткните пальцем...).
2. В стилях всё достаточно понятно.

Если Вы сделаете это таблицами, то бордеры придётся тоже делать картинками, либо извращаться со слоями, которые должны выходить поверх таблицы. А это в Опере непростая задача! Будет куча вложенных дивов... жуть. Рекомендую попробовать. И не забудьте протестировать под Оперу! А здесь всё просто, вёрстка идёт "сверху вниз", все бордеры - в CSS. Красота

Это сообщение отредактировал(а) dm9 - 4.10.2005, 17:40

Вот код для создания двух верхних уголков. Нижние добавляются аналогично.

Код

<html> <head> <style type="text/css"> #left_corner { background:  #99cedf /* Цвет фона слоя */  url('corner.gif') /* Путь к файлу с левым уголком */  left top /* Рисунок в левом верхнем углу */  no-repeat /* Отключаем повторение фона */ } #right_corner { background:  url('corner2.gif') /* Путь к файлу с правым уголком */  right top /* Рисунок в правом верхнем углу */  no-repeat; /* Отключаем повторение фона */ padding: 10px; /* Поля вокруг текста */ text-indent: 20px /* Смещение первой строки */ } </style> </head> <body> <div id="left_corner"> <div id="right_corner"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </body> </html>