Firestarter
С нами с 16.09.04
Сообщения: 3066
Рейтинг: 2960
|
Добавлено: 09/02/05 в 15:51 |
Ух серьёзно я взялся за CSS, рульная вещь однако
Появился вопрос:
Хочу поставить отступ от правого края ячейки, чтобы текст внутри самой ячейки не прилипал к бордюру.
Первая мысль была воткнуть свойство margin-right:1ex в уже имеющийся id класс т.е
Код: |
td#cell
{
margin-right:1ex;
background-image:url('utl/cellbgrig.jpg');
background-repeat: repeat-y;
background-position: top right;
|
Но почему это не работает, пришлось применить селектор div т.е
Код: | div {margin-right:1ex;} |
Соответсвенно вопрос, почему не работает через id класс ?
|
|
|
|
С нами с 16.07.04
Сообщения: 678
Рейтинг: 702
|
Добавлено: 09/02/05 в 16:05 |
Попробуй padding-right:1ex; вместо margin-right:1ex;
|
|
|
|
Firestarter
С нами с 16.09.04
Сообщения: 3066
Рейтинг: 2960
|
Добавлено: 09/02/05 в 16:09 |
Ага, пахаитъ
|
|
|
|
Раздаю инвайты, ищу линк-трейд
С нами с 20.08.04
Сообщения: 16675
Рейтинг: 8593
|
Добавлено: 09/02/05 в 19:44 |
X-Drive писал: | Соответсвенно вопрос, почему не работает через id класс ? |
Ну тут-то понятно, в этом случае класс применяется к ячейке, т.е. ты пытаешься сдвинуть ячейку на 1 пиксель в таблице, а не ее содержимое. Т.е. пишем: Код: | <style type="text/css">
.skip {margin-right:10ex;}
</style></head>
<body>
<table cellpadding=0 cellspacing=0 border=1><tr><tdclass="skip"><img src="image/01.jpg" width="120" height="120" border="0" alt=""></td></tr></table> |
- Эффекта нет.
Пишем так:
Код: | <style type="text/css">
.skip {margin-right:10ex;}
</style></head>
<body>
<table cellpadding=0 cellspacing=0 border=1><tr><td><img class="skip" src="image/01.jpg" width="120" height="120" border="0" alt=""></td></tr></table> |
- эффект есть. Т.е. применять надо только к нужному объекту
|
|
|
|
Раздаю инвайты, ищу линк-трейд
С нами с 20.08.04
Сообщения: 16675
Рейтинг: 8593
|
Добавлено: 09/02/05 в 19:46 |
Кстати, потому работает и padding-right, тк padding - это уже заполнение, а не сдвиг, т.е. действует на то, что внутри объекта, а не на сам объект
|
|
|
|
Firestarter
С нами с 16.09.04
Сообщения: 3066
Рейтинг: 2960
|
Добавлено: 09/02/05 в 20:09 |
pierx писал: | Ну тут-то понятно, в этом случае класс применяется к ячейке, т.е. ты пытаешься сдвинуть ячейку на 1 пиксель в таблице, а не ее содержимое. Т.е. пишем: Код: | <style type="text/css">
.skip {margin-right:10ex;}
</style></head>
<body>
<table cellpadding=0 cellspacing=0 border=1><tr><tdclass="skip"><img src="image/01.jpg" width="120" height="120" border="0" alt=""></td></tr></table> | - Эффекта нет. |
Я уже разобрался.
Дело в том, что margin - это не сдвиг, а внешняя граница, что-то вроде бордюра наружу, а padding - это подложка, поэтому вставляя элемент margin в свойства ячееки, я как бы создавал условие 1 ex внешнее поле, которое в ячеейке не может быть. (оно может быть например вокруг таблицы с внешней стороны).
Задав же селектору <div> значение margin я получил желаемый результат, так как этот элемент вставляется в саму ячейку Код: | <td><div>some_text</div></td> |
И справо от него при параметре margin-right:1ex появляется поле шириной в 1 x.
Во втором примере у тебя получилось создать прожежуток, через класс, но можно упростить и задать эти параметры тэгу <p> например, или <div>
Кстати вариант с padding отлично работает без всяких внешних элементов, через id класс.
|
|
|
|
Текстовая реклама в форме ответа Заголовок и до четырех строчек текста Длина текста до 350 символов Купить рекламу в этом месте! |