имееться класс гиперссылки в styles.css:
Полная Версия: CSS Width Opera
| Код |
| a.nav:link,a.nav:visited { background: url("images/nav_but.gif"); width: 204px; height: 36px; font-weight: bold; font-size: 18px; color: #FFFFFF; text-decoration: none; text-align: center; vertical-align: middle; } |
сама гиперссылка:
| Код |
| <tr height=40px><td><a class="nav" href="index.php">ГЛАВНАЯ</a></td></tr> |
почему-то в Опере не срабатывают значения выставленые width и height свойствами, а в ИЕ все нормально.
получается что в ИЕ я вижу картинку полностью, а в Опере только левый верхний угол, куда прилипает надпись "ГЛАВНАЯ".
подскажи как сделать правильное отображение в Опере???
Спустя 2 часа, 36 минут, 43 секунды (22.06.2008 - 17:20) Sylex написал(а):
Цитата
<tr height=40px>
это че такое? Тогда так уж:
Код
<tr height="40">
и почему бы фон не ложить на TD ?
Спустя 1 час, 12 минут, 13 секунд (22.06.2008 - 18:32) linedmk написал(а):
Просто задать размеры элементу <a> нельзя в нормальных браузерах (типа Opera и Firefox)
Можно поместить в <a> блок <div>, которому и задать нужные размеры и т.д.
<a href="#" class="aaa"><div class="bbb">...</div></a>
Можно поместить в <a> блок <div>, которому и задать нужные размеры и т.д.
<a href="#" class="aaa"><div class="bbb">...</div></a>
Спустя 1 час, 14 минут, 27 секунд (22.06.2008 - 19:47) REDPUMAN написал(а):
Цитата(linedmk @ 22.6.2008, 21:32) [snapback]41090[/snapback]
Просто задать размеры элементу <a> нельзя в нормальных браузерах (типа Opera и Firefox)
Можно поместить в <a> блок <div>, которому и задать нужные размеры и т.д.
<a href="#" class="aaa"><div class="bbb">...</div></a>
Можно поместить в <a> блок <div>, которому и задать нужные размеры и т.д.
<a href="#" class="aaa"><div class="bbb">...</div></a>
понятно.
а как можно сделать чтобы при наведении курсора менялся рисунок данного блока???
Спустя 2 минуты, 5 секунд (22.06.2008 - 19:49) Sylex написал(а):
попробуй просто в стилях указать еще для A:
Код
display: inline-block
Спустя 12 минут, 10 секунд (22.06.2008 - 20:01) REDPUMAN написал(а):
Цитата(Sylex @ 22.6.2008, 22:49) [snapback]41095[/snapback]
попробуй просто в стилях указать еще для A:
Код
display: inline-block
спасибо, работает, примного благодарен!
Спустя 1 месяц, 16 дней, 4 часа, 6 минут, 14 секунд (9.08.2008 - 00:07) zona7o написал(а):
inline-block - не поддерживается FF1-2 (согласно спецификации).
моё предложение:
<a href="#" class="nav">TEXT</a>
.nav{
display:block;
background:transparent url("images/nav_but.gif");
width: 204px;
height: 36px;
text-decoration: none;
text-align: center;
vertical-align: middle;
padding:x y z w;
}
За счет паддингов выровняешь текст относительно блока, только не забывай, что браузеры высчитывают width:значение + padding-left + padding-right; height:значение + padding-top + padding-bottom;
font-weight: bold; font-size: 18px; - используй сокращенную версию font:bold 18px Font-family;
color: #FFFFFF; -> color:#fff;
Если будешь делать большие проекты - каждый байт приходится экономить:)
вот тебе валидный и верный код:)
моё предложение:
<a href="#" class="nav">TEXT</a>
.nav{
display:block;
background:transparent url("images/nav_but.gif");
width: 204px;
height: 36px;
text-decoration: none;
text-align: center;
vertical-align: middle;
padding:x y z w;
}
За счет паддингов выровняешь текст относительно блока, только не забывай, что браузеры высчитывают width:значение + padding-left + padding-right; height:значение + padding-top + padding-bottom;
font-weight: bold; font-size: 18px; - используй сокращенную версию font:bold 18px Font-family;
color: #FFFFFF; -> color:#fff;
Если будешь делать большие проекты - каждый байт приходится экономить:)
вот тебе валидный и верный код:)
_____________
Здесь расположена полная версия этой страницы.