Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Изменение фона ссылки в меню при наведении
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Изменение фона ссылки в меню при наведении

Страниц (1): [1]
 

1. Jef - 06 Января, 2012 - 16:25:57 - перейти к сообщению
Делаю меню на div не используя <ul> <li>. Вот кусок меню

<div class="lenta_left" style="float:left;padding:4px;"><a href="#">Главная</a></div>

Цель - сделать что бы при наведении на раздел меню этот раздел меню окрашивался в другой цвет. У меня окрашивается в другой цвет только область в пределах текста, а за текстом до границы другого раздела есть еще несколько пикселей которые должны окрасится в другой цвет но не окрашиваются.
2. LIME - 06 Января, 2012 - 17:01:08 - перейти к сообщению
padding попробуй убрать
3. Jef - 06 Января, 2012 - 17:30:08 - перейти к сообщению
padding убрал, и проблема исчезла, а как еще можно задать размер меню, не используя padding?
4. LIME - 06 Января, 2012 - 17:32:15 - перейти к сообщению
margin ссылке возможно
(Добавление)
хотя нет)) шило на мыло
просто размеры диву задать
ширину высоту
а можно ширину полей текста изменить
5. Jef - 06 Января, 2012 - 17:39:47 - перейти к сообщению
От margin эффект такой же как и от padding, окрашивается в другой цвет только область в пределах текста
6. LIME - 06 Января, 2012 - 17:40:45 - перейти к сообщению
http://htmlbook[dot]ru/css/line-height
7. Jef - 06 Января, 2012 - 18:11:38 - перейти к сообщению
Спасибо LIME line-height воткнулся идеально! Для того что бы изменить ширину области, что бы она окрашивалась я решил добавить к тексту &nbsp; Можно ли было сделать это по другому не таким варварским способом?
(Добавление)
&nbsp;не подходит, при его использовании появляется ненужный отступ сверху над шапкой и снизу под менюшкой, как еще можно расширить меню?
8. CenapaTop - 06 Января, 2012 - 19:24:24 - перейти к сообщению
CODE (html):
скопировать код в буфер обмена
  1. <html>
  2. <head>
  3. <style type="text/css">
  4.   div.lenta_left {
  5.     float:left;padding: 4px;
  6.     font-size: 200%;
  7.     padding: 5px;
  8.     margin: 5px;
  9.     background-color: #f00;
  10.   }
  11.   div.lenta_left:hover {
  12.     background-color: #00f;
  13.   }
  14. </style>
  15.  
  16. </head>
  17. <body>
  18. <div class="lenta_left"><a href="#">Главная</a></div>
  19. <div class="lenta_left"><a href="#">Вторая</a></div>
  20. <div class="lenta_left"><a href="#">Третья</a></div>
  21.  
  22.  
  23. </body>
  24. </html>
9. armancho7777777 - 06 Января, 2012 - 22:05:33 - перейти к сообщению
А почему ни сделать так:

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <html>
  3.   <head>
  4.  
  5. <style type="text/css">
  6.  
  7. #div_menu a {
  8.         display:block;
  9.         padding:6px 25px;
  10.         border:1px solid #0000FF;
  11.         background:#0080FF;
  12.         color:#FFF;
  13.         font-size:21px;
  14.         margin:0 2px;
  15.         text-align:center;
  16.         text-decoration:none;
  17.         float:left;
  18.         }
  19.  
  20. #div_menu a:hover {
  21.         background:#3F9FFF;
  22.         }
  23.  
  24. </style>
  25.  
  26. </head>
  27.  
  28.   <body>
  29.  
  30.           <div id="div_menu">
  31.      
  32.                   <a href="#">Главная</a>
  33.                   <a href="#">Вторая</a>
  34.                   <a href="#">Третья</a>
  35.          
  36.           </div>
  37.  
  38.   </body>
  39.  
  40. </html>
  41.  
  42.  
  43.  


Тут в работе
10. Jef - 07 Января, 2012 - 14:01:03 - перейти к сообщению
Спасибо, помогло!

 

Powered by ExBB FM 1.0 RC1