VPF::рамка с круглыми углами - Форум программистов

liliana2

Дата 29.2.2008, 13:44 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

Извините за, возможно, повтор, но К сожалению не нашла такой темы...
Подскажите как у рамки (на дивах естесствено) сделать закругленные углы?

bars80080

Дата 29.2.2008, 14:24 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

старый способ:

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

другой способ:

делаем восем дивов внутри главного, каждый находится либо у угла, либо вдоль конкретной стороны (или все их растягиваем, а фон задаём background-position: left top right bottom). соответственно в каждом из них своя часть рамки.
но у этого способа есть одно существенное недобство:
если угол закруглённый, тогда нужно чтобы на самом углу был прозрачный фон, но в случае с наложениями дивов их придётся позиционировать очень точно по пикселям, чтобы верхний край фона не наехал к примеру на верхний левый угол

ну и т.д.

liliana2

Дата 17.6.2008, 06:53 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

И снова здравствуйте, возникал такая проблема
в общем надо чтобы было:
http://ipicture.ru/uploads/080617/OfTcHj5DLw.gif
а у меня получается
http://ipicture.ru/uploads/080617/57HWc36G4U.gif
Подскажите что же мне делать?никак не могу победить

Код


            <table class="pink"">
            <tr>
            <th id="corner_top_left">Íàçâàíèå êîëîíêè</th>
            <th>Íàçâàíèå âòîðîé êîëêè</th>
            <th>Òðåòüÿ</th>
            <th id="corner_top_right">×åòâåðòàÿ</th>
            </tr>
            <tr>
            <td>Íàçâàíèå êîëîíêè</td>
            <td>Íàçâàíèå âòîðîé êîëîíêè</td>
            <td>Òðåòüÿ</td>
            <td>×åòâåðòàÿ</td>
            </tr>
            <tr class="light">
            <td>Íàçâàíèå êîëîíêè</td>
            <td>Íàçâàíèå âòîðîé êîëîíêè</td>
            <td>Òðåòüÿ</td>
            <td>×åòâåðòàÿ</td>
            </tr>
            <tr>
            <td>Íàçâàíèå êîëîíêè</td>
            <td>Íàçâàíèå âòîðîé êîëîíêè</td>
            <td>Òðåòüÿ</td>
            <td>×åòâåðòàÿ</td>
            </tr>
            <tr class="light">
            <td>Íàçâàíèå ïåðâîé êîëîíêè</td>
            <td>Íàçâàíèå âòîðîé êîëîíêè</td>
            <td>Òðåòüÿ</td>
            <td>×åòâåðòàÿ</td>
            </tr>
            <tr>
            <td id="corner_bottom_left">Íàçâàíèå êîëîíêè</td>
            <td>Íàçâàíèå âòîðîé êîëîíêè</td>
            <td>Òðåòüÿ</td>
            <td id="corner_bottom_right">×åòâåðòàÿ</td>
            </tr>
            </table>

Код


.inside .pink {
    margin: 12px 0 0 4px;
}
.pink th {
    background: #f5e1ef;
    font-weight: bold;
    vertical-align: top;
    padding: 9px 14px 0 14px;
    margin: 0;
    border-left: 1px solid #f5e1ef;
    border-right: 1px solid #f5e1ef;
    text-align: left;
}
.pink td {
    border-left: 1px solid #f5e1ef;
    border-right: 1px solid #f5e1ef;
    padding: 7px 8px 7px 12px;
    background: #faf0f7;
}
.light td {
    background: #fff;
}
/* /other */
/* corner's */
#corner_top_left {
    background: #f5e1ef url(../i/bg/top_left.gif) no-repeat 0 0;
    height: 34px;
}
#corner_top_right {
    background: #f5e1ef url(../i/bg/top_right.gif) no-repeat 100% 0;
    height: 34px;
    border: none;
}
#corner_bottom_left {
    background: #faf0f7 url(../i/bg/bottom_left.gif) no-repeat 0 100%;
    height: 34px;
}
#corner_bottom_right {
    background: #faf0f7 url(../i/bg/bottom_right.gif) no-repeat 100% 100%;
    height: 34px;
}

Это сообщение отредактировал(а) liliana2 - 17.6.2008, 06:55

NDenis

Дата 17.6.2008, 11:31 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

догадываюсь это из-за этих правил

Код


.pink th {
    ...
    border-left: 1px solid #f5e1ef;
    border-right: 1px solid #f5e1ef;
    ...
}
.pink td {
    border-left: 1px solid #f5e1ef;
    border-right: 1px solid #f5e1ef;
    ...
}

попробуйте добавить в правила углов border:none;

liliana2

Дата 17.6.2008, 12:28 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

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

Это сообщение отредактировал(а) liliana2 - 17.6.2008, 12:30

NDenis

Дата 17.6.2008, 13:12 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

брррр, а если так?

Код


#corner_top_left,
#corner_bottom_left {
    border-left:none;
}
#corner_top_right,
#corner_bottom_right {
   border-right:none;
}

для того угла где фоновый уголок убирать бордер

liliana2

Дата 17.6.2008, 13:28 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

в общем теперь таблица седлана таким образом

Код


            <table  class="table">
            <tr>
            <th style="" class="table_left"></th>
            <th>Íàçâàíèå êîëîíêè</th>
            <th>Íàçâàíèå âòîðîé êîëîíêè</th>
            <th>Òðåòüÿ</th>
            <th>×åòâåðòàÿ</th>
            <th class="table_right"  style=" position: relative; left: 1px;"></th>
            </tr>
            <tr>
            <td colspan="2">Íàçâàíèå êîëîíêè</td>
            <td>Íàçâàíèå âòîðîé êîëîíêè</td>
            <td>Òðåòüÿ</td>
            <td colspan="2">×åòâåðòàÿ</td>
            </tr>
            <tr class="light">
            <td colspan="2">Íàçâàíèå êîëîíêè</td>
            <td>Íàçâàíèå âòîðîé êîëîíêè</td>
            <td>Òðåòüÿ</td>
            <td colspan="2">×åòâåðòàÿ</td>
            </tr>
            <tr>
            <tr>
            <td colspan="2">Íàçâàíèå êîëîíêè</td>
            <td>Íàçâàíèå âòîðîé êîëîíêè</td>
            <td>Òðåòüÿ</td>
            <td colspan="2">×åòâåðòàÿ</td>
            </tr>
            <tr class="light">
            <td colspan="2">Íàçâàíèå êîëîíêè</td>
            <td>Íàçâàíèå âòîðîé êîëîíêè</td>
            <td>Òðåòüÿ</td>
            <td colspan="2">×åòâåðòàÿ</td>
            </tr>
            <tr>
            <td colspan="2" class="table_left">Íàçâàíèå êîëîíêè</td>
            <td>Íàçâàíèå âòîðîé êîëîíêè</td>
            <td>Òðåòüÿ</td>
            <td colspan="2" style="position: relative; left: 1px;" class="table_right">×åòâåðòàÿ</td>
            </tr>
            </table>
            <div class="beam"></div>

Код


.table th {
    background: #f5e1ef;
    padding: 7px 8px;
    font-weight: bold;
}
.table th.table_left {
    height: 34px;
    background: #f5e1ef url(../i/bg/top_left.gif) no-repeat 0 0;
}
.table th.table_right {
    height: 34px;
    background: #f5e1ef url(../i/bg/top_right.gif) no-repeat 100% 0;
}
.table td {
    background: #faf0f7;
    border-left: 1px solid #f5e1ef;
    border-right: 1px solid #f5e1ef;
    padding: 7px 13px;
}
.table .light td {
    background: #fff;
}
.table td.table_left {
    height: 34px;
    background: #faf0f7 url(../i/bg/bottom_left.gif) no-repeat 0 100%;
    border: none;
}
.beam {
    border-bottom: 1px solid #f5e1ef;
    height: 14px;
    position: relative;
    bottom: 15px;
    left: 26px;
    width: 95%;
}
.table td.table_right {
    background: #faf0f7 url(../i/bg/bottom_right.gif) no-repeat 100% 100%;
    height: 34px;
    border: none;
}

а получается
http://ipicture.ru/uploads/080617/TEzePQhqhK.gif
но так отображается тока в опере во всех остальных браузерах норм, чтоделать?
smile

kolynia

Дата 17.6.2008, 17:08 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 12.6.2008

Репутация: нет
Всего: нет

попробуйте посетить http://www.kolynia.h.com.ua/verstka/rezina/index.html может поможет? ;) это мое творение

liliana2

Дата 18.6.2008, 06:23 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

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

Код


            <table cellpadding="0" cellspacing="0"  border="0" class="table">
            <tr>
            <th class="table_left"><div></div></th>
            <th>Íàçâàíèå ïåðâîé êîëîíêè</th>
            <th>Íàçâàíèå âòîðîé êîëîíêè</th>
            <th>Òðåòüÿ</th>
            <th>×åòâåðòàÿ</th>
            <th class="table_right"><div></div></th>
            </tr>
            <tr>
            <td class="space"></td>
            <td class="border">Íàçâàíèå ïåðâîé êîëîíêè</td>
            <td class="border">Âòîðàÿ êîëîíêà</td>
            <td class="border">Òðåòüÿ</td>
            <td >×åòâåðòàÿ</td>
            <td class="space"></td>
            </tr>
            <tr class="light">
            <td class="space"></td>
            <td class="border">Íàçâàíèå ïåðâîé êîëîíêè</td>
            <td class="border">Âòîðàÿ êîëîíêà</td>
            <td class="border">Òðåòüÿ</td>
            <td >×åòâåðòàÿ</td>
            <td class="space"></td>
            </tr>
            <tr>
            <td class="space"></td>
            <td class="border">Íàçâàíèå ïåðâîé êîëîíêè</td>
            <td class="border">Âòîðàÿ êîëîíêà</td>
            <td class="border">Òðåòüÿ</td>
            <td >×åòâåðòàÿ</td>
            <td class="space"></td>
            </tr>
            <tr class="light">
            <td class="space"></td>
            <td class="border">Íàçâàíèå ïåðâîé êîëîíêè</td>
            <td class="border">Âòîðàÿ êîëîíêà</td>
            <td class="border">Òðåòüÿ</td>
            <td >×åòâåðòàÿ</td>
            <td class="space"></td>
            </tr>
            <tr>
            <td class="table_left_bottom"><div></div></td>
            <td  class="border">Íàçâàíèå ïåðâîé êîëîíêè</td>
            <td  class="border">Âòîðàÿ êîëîíêà</td>
            <td  class="border">Òðåòüÿ</td>
            <td>×åòâåðòàÿ</td>
            <td class="table_right_bottom"><div></div></td>
            </tr>
            </table>

Код


/* corner's */
.inside .table {
    margin: 10px 0 0 10px;
    width: 100%;    
    border: 1px solid #f5e1ef;
}
.table td {
    height: 50px;
    font-size: 8px;
    background: #faf0f7;
    padding: 0 13px;
}
.space {
    width: 15px;
}
.border {
    border-right: 1px solid #f5e1ef;
}
.table th {
    font-weight: bold;
    background: #f5e1ef;
    padding: 0 13px;
}
.table th.table_left {
    vertical-align: top;
    width: 15px;
}
.table th.table_left div {
    background: transparent url('../i/bg/top_left.gif') no-repeat 0 0;    
    width: 15px;
    height: 34px;
    position: relative;
    top: -1px;
    left: -14px;
}    
.table td.table_left_bottom div {
    background: url('../i/bg/bottom_left.gif') no-repeat 0 0;
    width: 15px;
    height: 34px;
    position: relative;
    bottom: -9px;
    left: -14px;
    //bottom: -17px;
}    
.table th.table_right {
    vertical-align: top;
    width: 15px;
}
.table th.table_right div {
    background: transparent url('../i/bg/top_right.gif') no-repeat 0 0;
    width: 15px;
    height: 34px;
    position: relative;
    top: -1px;
    right: -14px;
}
.table td.table_right_bottom div {
    background: transparent url('../i/bg/bottom_right.gif') no-repeat 0 0;
    width: 15px;
    height: 34px;
    position: relative;
    bottom: -9px;
    right: -14px;
    //bottom: -17px;
}
.table .light td {
    background: #fff;
}
/* /corner's */

Это сообщение отредактировал(а) liliana2 - 18.6.2008, 06:59

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »