Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> левый padding сдвигает правую границу элемента 
V
    Опции темы
Itsys
Дата 18.11.2008, 18:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 9
Всего: 34



Добрый день,

Есть код:
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Атласы</title>
</head>

<body>
<table width="100%">
<tr>
<td width="20%">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="100%">
        <a href="#" style="padding-left: 10px; border:1px solid; display:block; background-color: #FFFF00; width:100%;">Военное дело. Военная наука. История войн</a></td>
        <td align="center" width="15" valign="center"><a href="#">&gt;</a></td>
    </tr>
    <tr>
        <td width="100%">
        <a href="#" style="border:1px solid; display:block; background-color: #FFFF00; width:100%;">Военное дело. Военная наука. История войн</a></td>
        <td align="center" width="15" valign="center"><a href="#">&gt;</a></td>
    </tr>
</table>
</td>
<td width="80%">&nbsp;</td>
</tr>
</table>
</body>

</html>


В верхней строке надо сделать padding-left, но так, чтобы элемент не заезжал на правую ячейку (так как вторая строка)
PM MAIL WWW Skype   Вверх
webster
Дата 18.11.2008, 20:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34



Здесь достаточно не ставить width: 100%; у:
Код

<a href="#" style="padding-left: 10px; border:1px solid; display:block; background-color: #FFFF00; width:100%;">
вы уже объявили его блоком, а следовательно он "расползется" на всю ширину родителя, как любой блочный элемент.
Если же вы объявляете ширину 100% принудительно, то паддинг будет приплюсовываться к этой ширине, "выдавливая" темерь уже элемент уровня блока (<a>) на соседний <td>.
PM MAIL   Вверх
Itsys
Дата 18.11.2008, 22:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 9
Всего: 34



Если не ставить width 100%, то реакция на клик мышки будет только в пределах текста, либо надо задавать "onclick" и еще устанавливать "cursor" для элемента...

Вышел из положения:
Код

<a href="#" style="padding-left:5%; display:block; width:95%; margin-top:7px;">Военное дело. Военная наука. История войн</a></td>

PM MAIL WWW Skype   Вверх
webster
Дата 18.11.2008, 22:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34



margin-top:7px; - это уже за пределами элемента, padding-top:7px; - в пределах документа и по нему будет кликаться.
для IE6:
Код

a {
height: auto!important;
height: 1%;
}
Или вложить span и для него уже сделать padding

Это сообщение отредактировал(а) webster - 18.11.2008, 22:28
PM MAIL   Вверх
Itsys
Дата 18.11.2008, 22:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 9
Всего: 34



мне нужен именно margin для разделения элементов... чтобы визуально отступ был виден

Но эта тема уже не актуальна, т.к. найдено более простое решение, опять же благодаря webster  smile http://forum.vingrad.ru/forum/topic-236699.html
PM MAIL WWW Skype   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0428 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.