LelikV
Настоящий Джедай | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору #Moderation Mode <link rel="stylesheet" href="http://htmlcoder.visions.ru/coder.css" type="text/css" media="all" /><link rel="stylesheet" href="http://htmlcoder.visions.ru/standard.css" type="text/css" media="all" title="standard" /><link rel="alternate stylesheet" href="http://htmlcoder.visions.ru/grayscale.css" type="text/css" media="all" title="grayscale" /><link rel="stylesheet" href="http://htmlcoder.visions.ru/coder_p.css" type="text/css" media="print" /><p>Итак, вот, что необходимо для достижения нирваны в случаях с вертикальным и горизонтальным расположением ячеек (спасибо тов. <a href=mailto:dragster@nm.ru>dragster</a> за дельные замечания):</p><p><B>Вариант с вертикальными ячейками</B>:</p><p><code>a {<br />background-color:#CCCCCC;<br />border:2px dotted #000000;<br /><span class=high>display:block</span>;<br /><span class=high>line-height:100%</span>;<br />margin:3px;<br />padding:20px<br />}<br />a:hover {<br />background-color:#FFC0CB;<br />}</code></p><p>В итоге мы имеем следующее:</p><p><a href=/ class=clickable1>это у нас ссылка</a> <a href=/ class=clickable1>это у нас ссылка нумер два</a></p><p><B>Вариант с горизонтальными ячейками</B>:</p><p><code>a {<br />background-color:#CCCCCC;<br />border:2px dotted #000000;<br /><span class=high>display:"inline-block"</span>; /* кавычки необходимы, чтобы NN6 нормально воспринимал (<nobr>т. е.</nobr> игнорировал) нестандартное, IE'шное значение inline-block, которое правильно вписывает тег A в layout страницы (для NN6 и Opera не нашлось подобного, правильно работающего значения display) */<br />margin:3px;<br />padding:20px<br />}<br />a:hover {<br />background-color:#FFC0CB;<br />}</code></p><p>Получаем следующее:</p><p><a href=/ class=clickable2>это у нас ссылка</a><a href=/ class=clickable2>это у нас ссылка нумер два</a></p><p>А можно поступить с горизонтальными ячейками <nobr>по-другому</nobr>, как любезно указал <nobr>г-н</nobr> <a href=mailto:theigel@mail.ru>Серега</a> (я <nobr>почему-то</nobr> забыл о замечательном свойстве <code>float</code>):</p><p><code>a {<br />background-color:#CCCCCC;<br />border:2px dotted #000000;<br /><span class=high>display:block;<br />float:left;</span><br />margin:3px;<br />padding:20px<br />}<br />a:hover {<br />background-color:#FFC0CB;<br />}</code></p><p>В итоге мы имеем следующее:</p><p><a href=/ class=clickable3>это у нас ссылка</a><a href=/ class=clickable3>это у нас ссылка нумер два</a></p><br clear=all /><p>Большим плюсом использования одного из указанных методов является тот факт, что они безоговорочно работают в IE5.5+ (в IE5.0 не работают варианты с горизонтальными ячейками) и в NN6+ и Opera5+ (иногда, правда, с некоторыми причудливыми глюками). Согласитесь, это неплохая совместимость.</p> http://htmlcoder.visions.ru
---------- ушел на рыбалку |
| Всего записей: 4182 | Зарегистр. 17-12-2001 | Отправлено: 15:41 03-02-2003 | Исправлено: LelikV, 15:46 03-02-2003 |
|