Kamrad.ru (https://kamrad.ru/index.php)
- Веб-дизайн, вёрстка и веб-программирование (https://kamrad.ru/forumdisplay.php?forumid=87)
-- Как можно сделать углы таблицы закругленными? (https://kamrad.ru/showthread.php?threadid=51537)
Как можно сделать углы таблицы закругленными?
Обычная ситуация. Есть таблица, 1 ячейка (допустим прямоугольник или квадрат.
В стандартном варианте углы таблицы равны 90 градусов. Мне же нужно их слегка закруглить, либо оставить 3 угла так ка они есть, по 90 градусов, а,допустим,правый верхний угол сделать закругленным.
Возможно ли такое?
__________________
Я не гений, я только учусь......
Ё!
Низя... Только с помощью картинок...
Dimitrius
Обычно это делается дополнительными строками/столбцами, с размещением в них картинок с "рамкой таблицы" явно или фоном.
Только десять раз подумай, надо тебе это или нет. Сплошной геморрой.
Anafay
Зато как красиво %)
Anafay
Да действительно гемморой Придется искать другие варианты, времени просто нету
Dimitrius
В общем, если блок может быть спозиционирован абсолютно - то там просто можно через css сделать.
Но это только для блоков с position:absolute.
Anafay
Если можешь, дай линки где про все это можно почитать.
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>
Anafay
Огромное спасибо. Я вроде разобрался.
По крайней мере из 4 попыток одна увенчалась успехом
Буду пытаться дальше. мне таких таблиц на странице надо 8 штук сделать
Еще раз Огромное спасибо!
__________________
Я не гений, я только учусь......
Таблица 3х3, первая и третья строки имеют фиксированную высоту (по высоте картинки угла), первый и третий столбец - фиксированную ширину (по ширине картинки угла). Допустим, картинка каждого угла у тебя 10х10 пикселей, тогда картинка с вертикальной полосой 10х1 пикселей, с горизотальной полосой 1х10 пикселей. Картинки углов просто вставляешь в углы таблицы, картинкам линий задаёшь ширину/высоту 100%. В центральной клетке таблицы впихиваешь ещё одну таблицу, в которой уже содержится основной контекст. Вот собста и всё. Контект получится обрамлённым рамкой с крглыми углами. Хотя, по углам можно какие-нить прикольные узорчики влепить
Вот так например.
Mips
Огромное спасибо. Вы мне очень помогли.(хоть с работы не выгонят). Я разобрался, все вроде понятно.
Еще раз благодарю.
Мне сейчас сайт нужно делать там все таблицы(по задумке начальства) должны быть закруглены.Теперь сделаю
Текущее время: 07:09
Powered by: vBulletin Version 2.0.1
Copyright © Jelsoft Enterprises Limited 2000, 2001.
Любое использование материалов сайта
возможно только с разрешения его администрации.