Kamrad.ru (https://kamrad.ru/index.php)
- Веб-дизайн, вёрстка и веб-программирование (https://kamrad.ru/forumdisplay.php?forumid=87)
-- Табличный блок (https://kamrad.ru/showthread.php?threadid=81296)
Табличный блок
Есть такая задача - сделать блок определенного цвета с закругленными уголками. Сами уголки вставляются в ячейки таблицы в виде картинок.
Как убрать отступы от границ ячеек таблицы до самих картинок? Чтобы картинки становились четко по углам. На css.
Drone
А эти закруления должны лежать поверх какого-то определенного фона, или же необходимо использовать прозрачность? От этого зависит количество писанины.
Anafay Нет, они не должны лежать поверх какого-то определенного фона, они просто расставляются по уголкам всего блока, в основе которого лежит таблица, а все остальное заливается бэкграундом под цвет этих уголков.
Просто делается таблица 3х3 и угловые ячейки полностью заполняются этими маленькими гифками. И получается прямоугольный блок, с закругленными уголками. В центровой ячейке которого содержимое самого блока.
Drone
Нет, они не должны лежать поверх какого-то определенного фона
Вопрос не в этом. Вопрос в том, что под этим блоком.
Вот простой вариант - для известного фона (в примере белый цвет). Картинки углов lt.gif, rt.gif, lb.gif. rb.gif, красное на белом. Закругление радиусом 50px
code:
<HTML>
<HEAD>
<STYLE>
body
{
background-color :white;
}
div.rect
{
margin :0px;
padding :0px;
background-repeat :no-repeat;
width :400px;
height :400px;
}
#lefttop
{
background-image :url('lt.gif');
background-position :left top;
}
#righttop
{
background-image :url('rt.gif');
background-position :right top;
}
#rightbottom
{
background-image :url('rb.gif');
background-position :right bottom;
}
#leftbottom
{
background-image :url('lb.gif');
background-position :left bottom;
}
#block
{
background-color :red;
}
#content
{
padding :25px;
color :white;
}
</STYLE>
</HEAD>
<BODY>
<DIV class="rect" id="block"
><DIV class="rect" id="lefttop"
><DIV class="rect" id="righttop"
><DIV class="rect" id="leftbottom"
><DIV class="rect" id="rightbottom"
><DIV class="rect" id="content">
Text
</DIV></DIV></DIV></DIV></DIV></DIV>
</BODY>
</HTML>
<table border=0 cellspacing=0 cellpadding=0>
...
</table>
border - толщина табличного бордюра
cellspacing - расстояние между соседними ячейками в таблице
cellpadding - отступ от границы яцейки до его содержимого
Если явно при открытии таблицы не указывать эти параметры, то они принимают некое умолчальное значение, отличное от 0, причем, умолчания разные для разных браузеров.
Кроме того, очень желательно явно указывать и размеры ячеек, содержащих графику и размеры самих графических элементов.
Кстати, в изначальной постановке задачи было указано - css. Далее же по тексту подразумевалась обычная таблица 3х3.
Drone, что в конечном итоге нужно-то? Или просто мы смешиваем два разных понятия?
Для табличного способа никакого css не нужно вовсе.
Major Pronin
Может, быть, имелась в виду css-альтернатива cellspacing/cellpadding? Типа того, что делается через border-collapse и иже с ними?
Но применять это для табличной верстки - извращение.
А как сделать, чтобы бекграунд не повторялся?
И как это сделать, если уголки вставляются через img src в html?
Drone
А как сделать, чтобы бекграунд не повторялся?
background-repeat:no-repeat;
И как это сделать, если уголки вставляются через img src в html
Тогда он и так не повторяется.
Anafay, нет, теперь уж точно имелась ввиду простая таблица =)
Major Pronin
Про таблицы ты лучше рассказывай, я их года четыре, наверное, не видел, кроме как по прямому назначению
Anafay Тогда он и так не повторяется.
Я имел ввиду вставить картинки в таблицу, чтобы они прижимались к самому краю.
Major Pronin да, имелась ввиду простая таблица, которую я сделал в html, а оформляю в css.
Левый верхний очень хорошо прижимается с помощью
code:
#lt {
display: block;
vertical-align: top;
}
Anafay
Drone, вот мне интересно (чисто теоретически), зачем для "простой", цитирую, таблицы, сделанной в html, наворачивать css, когда и без него все делается на раз-два? Хочется утяжелить код? Из принципа сделать на стилях?
Я дал наводку, как просто сделать то, что нужно и без лишних плясок с бубном =)
Major Pronin Дело в том, что я начал изучать css, поэтому на него делается основной упор. Даже пошел на обучающий курс, но там еще не дошли до этого. Поэтому обращаюсь за помощью к камраду. Уж не первый раз тут, всегда помогали!
Drone, как бы объяснить-то. Понимаешь, средствами css можно сделать нужную тебе вещь вообще не прибегая к таблице, причем, в зависимости от конечной цели это будет делаться разными способами. Либо делать действительно простую таблицу без стилей. Смешивать одно с другим в данном случае - это как строить собачью будку из бетонных панелей. Сначала изготовить опалубку по чертежам, залить бетоном, подождать, пока затвердеет. Потом с помощью крана и сварки собирать. Трудно и неэффективно =)
Major Pronin А как это сделать на чистом css? Просто везде, где я видел подобное было сделано в html и оформлено в css.
Drone, конкретная реализация может быть разной в зависимости от конечной цели.
1. Жестко заданы размеры блока.
2. Блок должен растягиваться по вертикали.
3. Блок должен растягиваться во все стороны.
Соответственно, для разных целей по-разному должны быть подготовлены угловые графические элементы.
В качестве примера, чтоб не бить заново большой кусок кода, посмотри мой текущий проект http://vip-all.ru/
Там я как раз применял css для верстки блоков с закругленными углами.
Сам блок вызывается так:
<div class="menu">
<h1>ПИТАНИЕ</h1>
<p>
Ресторан<br>
Бар<br>
Пиццерия<br>
Кафе<br>
</p>
</div>
Таблица стилей для него:
div.menu
{
width: 170px;
margin: 10px 10px 10px 10px;
background: url("./pictures/div_menu_up.gif") no-repeat;
}
div.menu h1
{
margin: 0;
padding: 5px 10px 5px 10px;
font-family: arial;
font-size: 10pt;
font-weight: bold;
color: #f8000d;
text-align: right;
}
div.menu ul
{
margin: 5px 0 5px 10px;
list-style-type: none;
text-indent: 0;
}
div.menu li
{
margin: 0 0 0 0;
padding: 0px 5px 5px 0px;
font-family: arial;
font-size: 10pt;
}
div.menu p
{
margin: 0;
padding: 5px 10px 10px 10px;
font-family: arial;
font-size: 10pt;
text-align: left;
background: url("./pictures/div_menu_dn.gif") no-repeat 0 100%;
}
Картинки выглядят вот так..
div_menu_up.gif - div_menu_dn.gif
К сожалению, тут фон темный, но можешь сохранить их себе и подробно рассмотреть.
А как это сделать на чистом css? Просто везде, где я видел подобное было сделано в html и оформлено в css.
Мне вот любопытно. Что в данном контексте значит "на чистом css"?
Имелось ввиду, что нужно максимально задействовать средства css.
Текущее время: 04:38
Powered by: vBulletin Version 2.0.1
Copyright © Jelsoft Enterprises Limited 2000, 2001.
Любое использование материалов сайта
возможно только с разрешения его администрации.