Kamrad.ru - Табличный блок

Kamrad.ru (https://kamrad.ru/index.php)
- Веб-дизайн, вёрстка и веб-программирование (https://kamrad.ru/forumdisplay.php?forumid=87)
-- Табличный блок (https://kamrad.ru/showthread.php?threadid=81296)

Drone 16-01-2007 22:07:

Табличный блок

Есть такая задача - сделать блок определенного цвета с закругленными уголками. Сами уголки вставляются в ячейки таблицы в виде картинок.
Как убрать отступы от границ ячеек таблицы до самих картинок? Чтобы картинки становились четко по углам. На css.

Anafay 16-01-2007 23:45:

Drone
А эти закруления должны лежать поверх какого-то определенного фона, или же необходимо использовать прозрачность? От этого зависит количество писанины.

Drone 17-01-2007 01:36:

Anafay Нет, они не должны лежать поверх какого-то определенного фона, они просто расставляются по уголкам всего блока, в основе которого лежит таблица, а все остальное заливается бэкграундом под цвет этих уголков.

Просто делается таблица 3х3 и угловые ячейки полностью заполняются этими маленькими гифками. И получается прямоугольный блок, с закругленными уголками. В центровой ячейке которого содержимое самого блока.

Anafay 17-01-2007 02:00:

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>

Если фон неизвестен, то по сделать аналогии, просто больше div'ов.

Major Pronin 17-01-2007 02:01:

<table border=0 cellspacing=0 cellpadding=0>
...
</table>

border - толщина табличного бордюра
cellspacing - расстояние между соседними ячейками в таблице
cellpadding - отступ от границы яцейки до его содержимого

Если явно при открытии таблицы не указывать эти параметры, то они принимают некое умолчальное значение, отличное от 0, причем, умолчания разные для разных браузеров.
Кроме того, очень желательно явно указывать и размеры ячеек, содержащих графику и размеры самих графических элементов.

Major Pronin 17-01-2007 02:05:

Кстати, в изначальной постановке задачи было указано - css. Далее же по тексту подразумевалась обычная таблица 3х3.
Drone, что в конечном итоге нужно-то? Или просто мы смешиваем два разных понятия?
Для табличного способа никакого css не нужно вовсе.

Anafay 17-01-2007 02:17:

Major Pronin
Может, быть, имелась в виду css-альтернатива cellspacing/cellpadding? Типа того, что делается через border-collapse и иже с ними?
Но применять это для табличной верстки - извращение.

Drone 17-01-2007 02:22:

А как сделать, чтобы бекграунд не повторялся?
И как это сделать, если уголки вставляются через img src в html?

Anafay 17-01-2007 02:29:

Drone
А как сделать, чтобы бекграунд не повторялся?
background-repeat:no-repeat;

И как это сделать, если уголки вставляются через img src в html
Тогда он и так не повторяется.

Major Pronin 17-01-2007 02:29:

Anafay, нет, теперь уж точно имелась ввиду простая таблица =)

Anafay 17-01-2007 02:32:

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

Drone 17-01-2007 02:36:

Anafay Тогда он и так не повторяется.

Я имел ввиду вставить картинки в таблицу, чтобы они прижимались к самому краю.

Major Pronin да, имелась ввиду простая таблица, которую я сделал в html, а оформляю в css.

Drone 17-01-2007 02:40:

Левый верхний очень хорошо прижимается с помощью

code:


#lt {

display: block;

vertical-align: top;

}

Но для остальных это не работает.

Major Pronin 17-01-2007 02:51:

Anafay
Drone, вот мне интересно (чисто теоретически), зачем для "простой", цитирую, таблицы, сделанной в html, наворачивать css, когда и без него все делается на раз-два? Хочется утяжелить код? Из принципа сделать на стилях?
Я дал наводку, как просто сделать то, что нужно и без лишних плясок с бубном =)

Drone 17-01-2007 02:53:

Major Pronin Дело в том, что я начал изучать css, поэтому на него делается основной упор. Даже пошел на обучающий курс, но там еще не дошли до этого. Поэтому обращаюсь за помощью к камраду. Уж не первый раз тут, всегда помогали!

Major Pronin 17-01-2007 03:00:

Drone, как бы объяснить-то. Понимаешь, средствами css можно сделать нужную тебе вещь вообще не прибегая к таблице, причем, в зависимости от конечной цели это будет делаться разными способами. Либо делать действительно простую таблицу без стилей. Смешивать одно с другим в данном случае - это как строить собачью будку из бетонных панелей. Сначала изготовить опалубку по чертежам, залить бетоном, подождать, пока затвердеет. Потом с помощью крана и сварки собирать. Трудно и неэффективно =)

Drone 17-01-2007 03:08:

Major Pronin А как это сделать на чистом css? Просто везде, где я видел подобное было сделано в html и оформлено в css.

Major Pronin 17-01-2007 03:43:

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%;
}

Major Pronin 17-01-2007 03:51:

Картинки выглядят вот так..

div_menu_up.gif - div_menu_dn.gif

К сожалению, тут фон темный, но можешь сохранить их себе и подробно рассмотреть.

Shadowspan 17-01-2007 11:06:

А как это сделать на чистом css? Просто везде, где я видел подобное было сделано в html и оформлено в css.

Мне вот любопытно. Что в данном контексте значит "на чистом css"?

Drone 17-01-2007 12:49:

Имелось ввиду, что нужно максимально задействовать средства css.

Текущее время: 04:38