Как можно сделать углы таблицы закругленными?

Dimitrius · 09-07-2003, 18:12

Обычная ситуация. Есть таблица, 1 ячейка (допустим прямоугольник или квадрат.
В стандартном варианте углы таблицы равны 90 градусов. Мне же нужно их слегка закруглить, либо оставить 3 угла так ка они есть, по 90 градусов, а,допустим,правый верхний угол сделать закругленным.

Возможно ли такое?

Alex Spade · 09-07-2003, 18:20

Ё!

Низя...

Только с помощью картинок...

Anafay · 09-07-2003, 18:42

Dimitrius
Обычно это делается дополнительными строками/столбцами, с размещением в них картинок с "рамкой таблицы" явно или фоном.
Только десять раз подумай, надо тебе это или нет. Сплошной геморрой.

Neo · 09-07-2003, 22:33

Anafay

Зато как красиво %)

Dimitrius · 10-07-2003, 08:28

Anafay

Да действительно гемморой

Придется искать другие варианты, времени просто нету

Anafay · 10-07-2003, 08:32

Dimitrius
В общем, если блок может быть спозиционирован абсолютно - то там просто можно через css сделать.

Но это только для блоков с position:absolute.

Dimitrius · 10-07-2003, 08:47

Anafay
Если можешь, дай линки где про все это можно почитать.

Anafay · 10-07-2003, 09:33

Dimitrius
Да откуда у меня линки-то. Просто делаешь так:

Блок с абсолютным позиционированием бьется на 9 частей, как обычно. Но части эти, кроме средней, делаем тоже с абсолютным позиционированием: левый верхний угол с top:0px;left:0px, правый верхний - top:0px;right:0px и т.п. Картинки рамки - фон в блоках-краях.

Для растягиваемых элементов, - середин сторон, - устанавливаем повтор фона.

Для среднего блока - margin, чтобы не наезжал на блоки-границы.

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

Вот пример: надо только фоны расставить. Вниз растягивается корректно.

<html>
<head>
<style type="text/css">
body
{
margin :0px;
background-color :white;
}
div
{
border :1px solid black;
}
#main
{
position :absolute;
top :0px
left :0px;
width :100%;
height :400px;
}
#lefttop
{
position :absolute;
top :0px;
left :0px;
width :50px;
height :50px;
}
#righttop
{
position :absolute;
top :0px;
right :0px;
width :50px;
height :50px;
}
#leftbottom
{
position :absolute;
bottom :0px;
left :0px;
width :50px;
height :50px;
}
#rightbottom
{
position :absolute;
bottom :0px;
right :0px;
width :50px;
height :50px;
}
#top
{
position :absolute;
top :0px;
left :50px;
right :50px;
height :50px;
width :100%;
}
#bottom
{
position :absolute;
bottom :0px;
left :50px;
right :50px;
height :50px;
width :100%;
}
#left
{
position :absolute;
bottom :50px;
left :0px;
height :100%;
width :50px;
}
#right
{
position :absolute;
bottom :50px;
right :0px;
height :100%;
width :50px;
}
#center
{
margin :50px;
width :100%;
height :450px;
}
</style>
</head>
<body>
<div id="main">
<div id="center"></div>
<div id="lefttop"></div>
<div id="righttop"></div>
<div id="leftbottom"></div>
<div id="rightbottom"></div>
<div id="top"></div>
<div id="bottom"></div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>

Dimitrius · 10-07-2003, 11:35

Anafay

Огромное спасибо. Я вроде разобрался.

По крайней мере из 4 попыток одна увенчалась успехом

Буду пытаться дальше. мне таких таблиц на странице надо 8 штук сделать

Еще раз Огромное спасибо!

Mips · 14-07-2003, 21:43

Таблица 3х3, первая и третья строки имеют фиксированную высоту (по высоте картинки угла), первый и третий столбец - фиксированную ширину (по ширине картинки угла). Допустим, картинка каждого угла у тебя 10х10 пикселей, тогда картинка с вертикальной полосой 10х1 пикселей, с горизотальной полосой 1х10 пикселей. Картинки углов просто вставляешь в углы таблицы, картинкам линий задаёшь ширину/высоту 100%. В центральной клетке таблицы впихиваешь ещё одну таблицу, в которой уже содержится основной контекст. Вот собста и всё. Контект получится обрамлённым рамкой с крглыми углами. Хотя, по углам можно какие-нить прикольные узорчики влепить

Mips · 14-07-2003, 22:55

Вот так например.

Dimitrius · 17-07-2003, 20:51

Mips

Огромное спасибо. Вы мне очень помогли.(хоть с работы не выгонят

). Я разобрался, все вроде понятно.
Еще раз благодарю.

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

09-07-2003, 18:12	#1
Dimitrius Камрад Join Date: апр 2002 Location: Internet Posts: 394	Как можно сделать углы таблицы закругленными? Обычная ситуация. Есть таблица, 1 ячейка (допустим прямоугольник или квадрат. В стандартном варианте углы таблицы равны 90 градусов. Мне же нужно их слегка закруглить, либо оставить 3 угла так ка они есть, по 90 градусов, а,допустим,правый верхний угол сделать закругленным. Возможно ли такое? __________________ Я не гений, я только учусь......
	[Ответить с цитированием]

09-07-2003, 18:20	#2
Alex Spade Модератор Join Date: июл 2002 Location: Москва, Зеленоград Posts: 2,849	Ё! Низя... Только с помощью картинок...
	[Ответить с цитированием]

09-07-2003, 18:42	#3
Anafay Join Date: сен 2001 Location: Воронеж Posts: 2,162	Dimitrius Обычно это делается дополнительными строками/столбцами, с размещением в них картинок с "рамкой таблицы" явно или фоном. Только десять раз подумай, надо тебе это или нет. Сплошной геморрой.
	[Ответить с цитированием]

09-07-2003, 22:33	#4
Neo идиотЪ Join Date: авг 2002 Location: Украина Posts: 553	Anafay Зато как красиво %)
	Дневник [Ответить с цитированием]

10-07-2003, 08:28	#5
Dimitrius Камрад Join Date: апр 2002 Location: Internet Posts: 394	Anafay Да действительно гемморой Придется искать другие варианты, времени просто нету
	[Ответить с цитированием]

10-07-2003, 08:32	#6
Anafay Join Date: сен 2001 Location: Воронеж Posts: 2,162	Dimitrius В общем, если блок может быть спозиционирован абсолютно - то там просто можно через css сделать. Но это только для блоков с position:absolute.
	[Ответить с цитированием]

10-07-2003, 08:47	#7
Dimitrius Камрад Join Date: апр 2002 Location: Internet Posts: 394	Anafay Если можешь, дай линки где про все это можно почитать.
	[Ответить с цитированием]

10-07-2003, 09:33	#8
Anafay Join Date: сен 2001 Location: Воронеж Posts: 2,162	Dimitrius Да откуда у меня линки-то. Просто делаешь так: Блок с абсолютным позиционированием бьется на 9 частей, как обычно. Но части эти, кроме средней, делаем тоже с абсолютным позиционированием: левый верхний угол с top:0px;left:0px, правый верхний - top:0px;right:0px и т.п. Картинки рамки - фон в блоках-краях. Для растягиваемых элементов, - середин сторон, - устанавливаем повтор фона. Для среднего блока - margin, чтобы не наезжал на блоки-границы. И в главный блок помещается сначала середина, а потом все остальное, чтобы изменение размера корректно отображалось. Вот пример: надо только фоны расставить. Вниз растягивается корректно. <html> <head> <style type="text/css"> body { margin :0px; background-color :white; } div { border :1px solid black; } #main { position :absolute; top :0px left :0px; width :100%; height :400px; } #lefttop { position :absolute; top :0px; left :0px; width :50px; height :50px; } #righttop { position :absolute; top :0px; right :0px; width :50px; height :50px; } #leftbottom { position :absolute; bottom :0px; left :0px; width :50px; height :50px; } #rightbottom { position :absolute; bottom :0px; right :0px; width :50px; height :50px; } #top { position :absolute; top :0px; left :50px; right :50px; height :50px; width :100%; } #bottom { position :absolute; bottom :0px; left :50px; right :50px; height :50px; width :100%; } #left { position :absolute; bottom :50px; left :0px; height :100%; width :50px; } #right { position :absolute; bottom :50px; right :0px; height :100%; width :50px; } #center { margin :50px; width :100%; height :450px; } </style> </head> <body> <div id="main"> <div id="center"><!--Должен быть первым --></div> <div id="lefttop"></div> <div id="righttop"></div> <div id="leftbottom"></div> <div id="rightbottom"></div> <div id="top"></div> <div id="bottom"></div> <div id="left"></div> <div id="right"></div> </div> </body> </html> Last edited by Anafay; 10-07-2003 at 10:01.
	[Ответить с цитированием]

10-07-2003, 11:35	#9
Dimitrius Камрад Join Date: апр 2002 Location: Internet Posts: 394	Anafay Огромное спасибо. Я вроде разобрался. По крайней мере из 4 попыток одна увенчалась успехом Буду пытаться дальше. мне таких таблиц на странице надо 8 штук сделать Еще раз Огромное спасибо! __________________ Я не гений, я только учусь......
	[Ответить с цитированием]

14-07-2003, 21:43	#10
Mips Модератор Злыдень немрущий Join Date: сен 2000 Location: Краснодар Posts: 2,333	Таблица 3х3, первая и третья строки имеют фиксированную высоту (по высоте картинки угла), первый и третий столбец - фиксированную ширину (по ширине картинки угла). Допустим, картинка каждого угла у тебя 10х10 пикселей, тогда картинка с вертикальной полосой 10х1 пикселей, с горизотальной полосой 1х10 пикселей. Картинки углов просто вставляешь в углы таблицы, картинкам линий задаёшь ширину/высоту 100%. В центральной клетке таблицы впихиваешь ещё одну таблицу, в которой уже содержится основной контекст. Вот собста и всё. Контект получится обрамлённым рамкой с крглыми углами. Хотя, по углам можно какие-нить прикольные узорчики влепить
	Дневник [Ответить с цитированием]

14-07-2003, 22:55	#11
Mips Модератор Злыдень немрущий Join Date: сен 2000 Location: Краснодар Posts: 2,333	Вот так например. Attached Images
	Дневник [Ответить с цитированием]

17-07-2003, 20:51	#12
Dimitrius Камрад Join Date: апр 2002 Location: Internet Posts: 394	Mips Огромное спасибо. Вы мне очень помогли.(хоть с работы не выгонят). Я разобрался, все вроде понятно. Еще раз благодарю. Мне сейчас сайт нужно делать там все таблицы(по задумке начальства) должны быть закруглены.Теперь сделаю
	[Ответить с цитированием]