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


дневники \| кабинет \| регистрация \| календарь \| участники \| faq \| правила \| поиск \| фотоальбом \| каська \| выйти

Kamrad.ru » Авторские форумы » Веб-дизайн, вёрстка и веб-программирование » Табличный блок

следующая тема | предыдущая тема

Автор

Drone

16-01-2007 19:07 URL сообщения

Дневник K-Mail Профиль Поиск Контакт-лист Редактировать

Машинный агрегат

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

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

Anafay

16-01-2007 20:45 URL сообщения

K-Mail Профиль Поиск Контакт-лист Редактировать

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

Drone

16-01-2007 22:36 URL сообщения

Дневник K-Mail Профиль Поиск Контакт-лист Редактировать

Машинный агрегат

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

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

Anafay

16-01-2007 23:00 URL сообщения

K-Mail Профиль Поиск Контакт-лист Редактировать

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

16-01-2007 23:01 URL сообщения

Дневник K-Mail Профиль Поиск Контакт-лист Редактировать

Настоящий
генерал

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

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

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

Major Pronin

16-01-2007 23:05 URL сообщения

Дневник K-Mail Профиль Поиск Контакт-лист Редактировать

Настоящий
генерал

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

Anafay

16-01-2007 23:17 URL сообщения

K-Mail Профиль Поиск Контакт-лист Редактировать

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

Drone

16-01-2007 23:22 URL сообщения

Дневник K-Mail Профиль Поиск Контакт-лист Редактировать

Машинный агрегат

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

Anafay

16-01-2007 23:29 URL сообщения

K-Mail Профиль Поиск Контакт-лист Редактировать

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

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

Major Pronin

16-01-2007 23:29 URL сообщения

Дневник K-Mail Профиль Поиск Контакт-лист Редактировать

Настоящий
генерал

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

Anafay

16-01-2007 23:32 URL сообщения

K-Mail Профиль Поиск Контакт-лист Редактировать

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

Drone

16-01-2007 23:36 URL сообщения

Дневник K-Mail Профиль Поиск Контакт-лист Редактировать

Машинный агрегат

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

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

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

Drone

16-01-2007 23:40 URL сообщения

Дневник K-Mail Профиль Поиск Контакт-лист Редактировать

Машинный агрегат

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

code:


#lt {

display: block;

vertical-align: top;

}

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

Major Pronin

16-01-2007 23:51 URL сообщения

Дневник K-Mail Профиль Поиск Контакт-лист Редактировать

Настоящий
генерал

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

Drone

16-01-2007 23:53 URL сообщения

Дневник K-Mail Профиль Поиск Контакт-лист Редактировать

Машинный агрегат

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

Major Pronin

17-01-2007 00:00 URL сообщения

Дневник K-Mail Профиль Поиск Контакт-лист Редактировать

Настоящий
генерал

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

Drone

17-01-2007 00:08 URL сообщения

Дневник K-Mail Профиль Поиск Контакт-лист Редактировать

Машинный агрегат

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

Major Pronin

17-01-2007 00:43 URL сообщения

Дневник K-Mail Профиль Поиск Контакт-лист Редактировать

Настоящий
генерал

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 00:51 URL сообщения

Дневник K-Mail Профиль Поиск Контакт-лист Редактировать

Настоящий
генерал

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

div_menu_up.gif - div_menu_dn.gif

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

Shadowspan

17-01-2007 08:06 URL сообщения

K-Mail Профиль Поиск Контакт-лист Редактировать

Камрад

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

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

Drone

17-01-2007 09:49 URL сообщения

Дневник K-Mail Профиль Поиск Контакт-лист Редактировать

Машинный агрегат

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

Текущее время: 23:08

следующая тема | предыдущая тема

Перейти:

версия для печати

отправить эту страницу по e-mail

подписаться на эту тему