VPF::Создание границ блоков - Форум программистов

totoiiiuk

Дата 14.8.2008, 14:08 (ссылка)

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

Загрузка ...

Шустрый

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

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

Здравствуйте.
Цель с помощью рисунков создать границы блоков, растягивая эти рисунки по вертикали и горизонтали внутри болков. Что-то в этом духе:

Код


<table width="200">
    <tr>
        <td>
            <img alt="" src="Pictures/stateleft.gif" style="top: 0px; left: 0px; width: 50px;
                height: 100%; position: absolute;" />
            <img alt="" src="Pictures/stateright.gif" style="top: 0px; right: 0px; width: 50px;
                height: 100%; position: absolute;" />
            <img alt="" src="Pictures/stateup.gif" style="top: 0px; left: 0px; width: 100%; height: 50px;
                position: absolute;" />
        </td>
    </tr>
    <tr>
        <td>
            fgdfgfghfghdfghdfhdfghfhfghdffhdfgh
        </td>
    </tr>
</table>

Мне кажется, что я изобретаю велосипед, но ничего по этой теме не нашёл. Буду рад любой помощи. Спасибо!

AleXGray

Дата 29.8.2008, 20:10 (ссылка)

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

Загрузка ...

Шустрый

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

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

Растягивать рисунки - неправильно в принципе.
Это кусок ксс-файла

Код


.AdmFooterPanel
{
    padding: 0px;
    background-repeat:repeat-x;
    background-image:url(Images/corner_box_green_down_pixel.gif);
}
.AdmFooterPanel div
{
    background-image:url(Images/corner_box_green_down_left.gif);
    background-repeat:no-repeat;
    background-position:left top;
}
.AdmFooterPanel div div
{
    font-weight:bold;
    background-image:url(Images/corner_box_green_down_right.gif);
    background-repeat:no-repeat;
    background-position:right top;
}

хтмл:

Код


<div class="AdmFooterPanel">
        <div>
            <div>
                
            </div>
        </div>
    </div>

Здесь у меня представлена нижняя граница "окошка"
левый нижний правый нижний уголки и соединяющая линия состоящая из повторения рисунка в 1 пиксель ширины и несколько (от дизайна) в высоту.

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

Принцип в том, чтобы комбинировать несколько рисунков: граничные уголки и рисунок, который повторяется много раз и "соединяет" эти уголки.
Это как бы первая и последняя "строчки" блока.
Посередине идет содержимое блока и там мы делаем только границы слева и справа. Граница из крошечного рисунка который много раз повторяется но уже по горизонтали, либо, если дизайн позволяет, просто добавить border с нужной стороны.

--------------------

В начале было Слово

totoiiiuk

Дата 29.8.2008, 21:44 (ссылка)

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

Загрузка ...

Шустрый

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

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

AleXGray, спасибо.
Да, уже разобрался smile

. Уже вот сайт свой первый сдаю, числа 5-го. Так всё и сделал потом, только не через div, а через table.

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