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

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

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

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

HTML5

<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", просто прижал вправо. Я стараюсь погонять в разных вариантах, чтоб потом меньше вылазило...

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

@GalaX 701 / 573 / 59 Регистрация: 18.11.2008 Сообщений: 2,147
	27.02.2009, 08:48	13
	Сообщение от BlackApricot теперь, попробуйте сделать круглые углы. не вижу проблемы 0

@GalaX 701 / 573 / 59 Регистрация: 18.11.2008 Сообщений: 2,147
	02.04.2009, 09:01	15
	Сообщение от BlackApricot Вылезла такая бяка, нарисовал новый комплект, под твою версию, и заметил, что ослик неверно отрисовывает картинку, пробовал и так и эдак, непонятно, взял да подсунул всё это лисе, лиса тоже отрисовала неверно, но правый нижний угол нарисовала правильно! чудеса! у меня и в лисе и в осле нормально показывает Сообщение от BlackApricot Стало понятно, что исчез один пиксель по всеме контуру, быстро нашёл откуда ноги растут, вот отсюда border:1px solid #9bbbac;, объясни, зачем этот код? не помню для чего, но раз он там написан, значит он там должен быть ЗЫ: а зачем ты там лишнего кода понаставил типа всяких <table> или <div id="Width" align="right"> ? <div id="Width" align="right"> - выше постом я говорил как делать ширину для этого блока 0

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

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

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

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

@GalaX 701 / 573 / 59 Регистрация: 18.11.2008 Сообщений: 2,147
	17.02.2009, 07:42	5
	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	6
	GаlаX-у от BlackApricot-а. Направление верное, но там куча проблем, я этим, , занимался не один месяц, а Вы хотите решить сходу, . Только если Вы, супер грамотный или просто везунчик . 0

@GalaX 701 / 573 / 59 Регистрация: 18.11.2008 Сообщений: 2,147
	17.02.2009, 20:55	7
	Сообщение от BlackApricot Только если Вы, супер грамотный да не, я не такой Сообщение от BlackApricot или просто везунчик просто опыта немного в верстке есть а если ближе к делу - то раскажи подробней что именно у тебя отображается и как должно быть, а то мы тут телепатическими способностями не владеем 0

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

@GalaX 701 / 573 / 59 Регистрация: 18.11.2008 Сообщений: 2,147
	22.02.2009, 08:00	9
	Сообщение от BlackApricot Это один из вариантов. Состоит из 11 файлов, .html, .css и 9 картинок. вот тебе на дивах: block.rar если захочешь сделать фиксированный размер этого блока, то задавай width только для div#top_line { ... } 0

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