Графическая рамка в таблице

@SiTH · Регистрация: 11.10.2008

Студворк — интернет-сервис помощи студентам

Доброго времени суток. Вопрос, как лучше сделать графическую рамку для таблицы?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
 
 
<table width="521" border="0" cellpadding="0" cellspacing="0"> <tr> <td height=19 background="./up.jpg"></td> </tr> </table>
 
<table width="521" border="0" cellpadding="0" cellspacing="0">
<tr> <td width=19 background="./left.jpg"> </td> 
 
 
<td align="left" valign="top" style="padding-left:5px;"> 
    С о д е р ж и м о е   я ч е й к и
</td> 
 
 
<td width=22 background="./right.jpg"> </td> </tr>
</table>
 
<table width="521" border="0" cellpadding="0" cellspacing="0"> <tr> <td height=18 background="./down.jpg"> </td> </tr> </table>
 
 
 
 
</body>
</HTML>

В данном коде есть один недостаток - рамка не растягивается по ширине (только по высоте). В этом-то и проблема, помогите доработать код.

@GalaX · 25.12.2008, 22:40

у всех table: width="100%"

??

@SiTH · 26.12.2008, 00:35 **[ТС]**

Изображение при этом не растянется, а будет повторятьтся

@BlackApricot · 17.02.2009, 07:23

У меня есть старые наработки по этому вопросу.
Есть с круглыми углами, с ушами, с тенью, косые.
Все абсолютно резиновое, и на момент написания все работало в ослике, лисе и опере.
Все это выложить на форум, проблемно, там больше 10 файлов для каждой версии.
Кому надо пишите.

@GalaX · 17.02.2009, 07:42

style="background : url(down.jpg) repeat-x bottom"
style="background : url(right.jpg) repeat-y right"
и т.д. и т.п.

@BlackApricot · 17.02.2009, 09:09

GаlаX-у от BlackApricot-а.

Направление верное, но там куча проблем, я этим,

, занимался не один месяц, а Вы хотите решить сходу,

. Только если Вы,

супер грамотный или просто везунчик

.

@GalaX · 17.02.2009, 20:55

Сообщение от BlackApricot

Только если Вы, супер грамотный

да не, я не такой

Сообщение от BlackApricot

или просто везунчик

просто опыта немного в верстке есть

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

@BlackApricot · 21.02.2009, 07:45

GаlаX-у от BlackApricot-а.

Это один из вариантов. Состоит из 11 файлов, *.html, *.css и 9 картинок.

@GalaX · 22.02.2009, 08:00

Сообщение от BlackApricot

Это один из вариантов. Состоит из 11 файлов, *.html, *.css и 9 картинок.

вот тебе на дивах:
block.rar

если захочешь сделать фиксированный размер этого блока, то задавай width только для div#top_line { ... }

@BlackApricot · 26.02.2009, 06:21

GаlаX-у от BlackApricot-а

Надеюсь, что и моя версия имеет право на жизнь.
Пока незнаю, можно ли на дивах сделать кнопки, закладки, все это надо еще долго пробовать, думать...
Пока, Вашу версию, я только посмотрел, и с ходу возник вопрос:

почему дивы не сложились в столбик?

все это надо еще долго пробовать, думать...

@GalaX · 26.02.2009, 11:45

>>> почему дивы не сложились в столбик?
потому что они вложены друг в друга, т.е.:
<div>
<div>
</div>
</div>

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

@BlackApricot · 27.02.2009, 06:53

GаlаX-у от BlackApricot-а

С дивами понятно, если самому в коде поковыряться. Ну я и поковырялся. Все замечательно, но можно иметь только прямоугольник, теперь, попробуйте сделать круглые углы.
Это ваше, Вы и доводите до ума.

Посмотрите здесь web-forum.ru
Это умирающий форум, и вопрос почти годичной давности от gamer, не на первой странице.

Если администрация разрешит, можно будет притащить сюда, лишняя версия лишней не будет.

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

@GalaX · 27.02.2009, 08:48

Сообщение от BlackApricot

теперь, попробуйте сделать круглые углы.

не вижу проблемы

@BlackApricot · 02.04.2009, 07:52

GalaX-у от BlackApricot-а

Вылезла такая бяка, нарисовал новый комплект, под твою версию, и заметил, что ослик неверно отрисовывает картинку, пробовал и так и эдак, непонятно, взял да подсунул всё это лисе, лиса тоже отрисовала неверно, но правый нижний угол нарисовала правильно! чудеса!
Стало понятно, что исчез один пиксель по всеме контуру, быстро нашёл откуда ноги растут, вот отсюда border:1px solid #9bbbac;, объясни, зачем этот код? Удалил его, после чего пришлось переделывать отступы, предполагаю, что бордюр был повязан с отступом, вернее наоборот, ради отступов был введён бордюр.
Вторая бяка, получаемое окно всегда на всю ширину, это тоже ликвидировал аж в двух вариантах, резиновое и не резиновое.

@GalaX · 02.04.2009, 09:01

Сообщение от BlackApricot

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

у меня и в лисе и в осле нормально показывает

Сообщение от BlackApricot

Стало понятно, что исчез один пиксель по всеме контуру, быстро нашёл откуда ноги растут, вот отсюда border:1px solid #9bbbac;, объясни, зачем этот код?

не помню для чего, но раз он там написан, значит он там должен быть

ЗЫ:
а зачем ты там лишнего кода понаставил типа всяких <table> или <div id="Width" align="right">
?

<div id="Width" align="right"> - выше постом я говорил как делать ширину для этого блока

@BlackApricot · 03.04.2009, 06:44

А ты читал комментарии в файле? там написано, что для чего, только эта table даёт резиновость, а width нет. А этот align="right", просто прижал вправо. Я стараюсь погонять в разных вариантах, чтоб потом меньше вылазило...

"не помню для чего, но раз он там написан, значит он там ДОЛЖЕН БЫТЬ"
Ну я то выкинул и стало лучше, значит не очень и надо было?

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@GalaX 701 / 573 / 59 Регистрация: 18.11.2008 Сообщений: 2,147
	25.12.2008, 22:40
	у всех table: width="100%" ?? 0

@SiTH 4 / 4 / 0 Регистрация: 11.10.2008 Сообщений: 47
	26.12.2008, 00:35 [ТС]
	Изображение при этом не растянется, а будет повторятьтся 0

@BlackApricot 288 / 131 / 4 Регистрация: 15.02.2009 Сообщений: 520
	17.02.2009, 07:23
	У меня есть старые наработки по этому вопросу. Есть с круглыми углами, с ушами, с тенью, косые. Все абсолютно резиновое, и на момент написания все работало в ослике, лисе и опере. Все это выложить на форум, проблемно, там больше 10 файлов для каждой версии. Кому надо пишите. 0

@GalaX 701 / 573 / 59 Регистрация: 18.11.2008 Сообщений: 2,147
	17.02.2009, 07:42
	style="background : url(down.jpg) repeat-x bottom" style="background : url(right.jpg) repeat-y right" и т.д. и т.п. 0

@BlackApricot 288 / 131 / 4 Регистрация: 15.02.2009 Сообщений: 520
	17.02.2009, 09:09
	GаlаX-у от BlackApricot-а. Направление верное, но там куча проблем, я этим, , занимался не один месяц, а Вы хотите решить сходу, . Только если Вы, супер грамотный или просто везунчик . 0

@BlackApricot 288 / 131 / 4 Регистрация: 15.02.2009 Сообщений: 520
	21.02.2009, 07:45
	GаlаX-у от BlackApricot-а. Это один из вариантов. Состоит из 11 файлов, .html, .css и 9 картинок. Миниатюры 0

@GalaX 701 / 573 / 59 Регистрация: 18.11.2008 Сообщений: 2,147
	26.02.2009, 11:45
	>>> почему дивы не сложились в столбик? потому что они вложены друг в друга, т.е.: <div> <div> </div> </div> если бы они шли друг за другом, то тогда они и показывались бы столбиком, а так получается что они все одинаковой ширины, высоты и находятся в одной и той же позиции 0

@BlackApricot 288 / 131 / 4 Регистрация: 15.02.2009 Сообщений: 520
	03.04.2009, 06:44
	А ты читал комментарии в файле? там написано, что для чего, только эта table даёт резиновость, а width нет. А этот align="right", просто прижал вправо. Я стараюсь погонять в разных вариантах, чтоб потом меньше вылазило... "не помню для чего, но раз он там написан, значит он там ДОЛЖЕН БЫТЬ" Ну я то выкинул и стало лучше, значит не очень и надо было? 0