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

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: меню с картинками

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Описание: меню на css
Поиск в теме | Версия для печати
August_II
Отправлено: 03 Марта, 2015 - 11:47:31
Post Id


Новичок


Покинул форум
Сообщений всего: 49
Дата рег-ции: Нояб. 2014  


Помог: 0 раз(а)
народ подскажите, что у меня не так, не могу сам сообразить.
плохо выравнивается и картинки прыгают при наведении

Сама страница
CODE (html):
скопировать код в буфер обмена
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="windows-1251">
  5. <title>меню</title>
  6. <link href="no-style.css" rel="stylesheet" type="text/css" media="all">
  7. </head>
  8.  
  9. <body>
  10. <div id="nav">
  11.         <ul>
  12.         <li><a href="#" class="avion">Главная</a></li>
  13.         <li><a href="#" class="avion">Авиа</a></li>
  14.         <li><a href="#" class="hotels">Гостиницы</a></li>
  15.         <li><a href="#" class="tourist">Туристам</a></li>
  16.     </ul>
  17. </div>
  18. </body>
  19. </html>


CSS
CODE (html):
скопировать код в буфер обмена
  1. @charset "windows-1251";
  2. /* CSS Document */
  3. #nav {
  4.         width:330px;
  5.         height:82px;
  6. }
  7. #nav ul {
  8.         margin:0;
  9.         padding:0;
  10.         list-style-type:none;
  11.         border:1px solid #FFD200;
  12.         border-radius:5px;
  13.         width:330px;
  14.         height:82px;
  15.         text-align:center;
  16.         background-color:#33ADFF
  17. }
  18. #nav li {
  19.         display:inline;
  20. }
  21. #nav a {
  22.         border-radius:5px;
  23.         color:#FFF;
  24.         text-decoration:none;
  25.         font-weight:bold;
  26.         display:inline-block;
  27.         width:78px;
  28.         height:78px;
  29.         line-height:78x;
  30. }
  31. #nav a:hover {
  32.         border-radius:5px;
  33.         border:2px solid #FFD200;
  34.         color:#33ADFF;
  35.         background-color: #FFD200;
  36. }
  37. #nav a.avion {
  38.         background-image:url(../img/avion.png);
  39.         background-repeat:no-repeat;
  40. }
  41. #nav a.hotels {
  42.         background-image:url(../img/hotels.png);
  43.         background-repeat:no-repeat;
  44. }
  45. #nav a.tourist {
  46.         background-image:url(../img/tourist.png);
  47.         background-repeat:no-repeat;
  48. }
  49.  
 
 Top
RickMan
Отправлено: 03 Марта, 2015 - 11:54:07
Post Id


Участник


Покинул форум
Сообщений всего: 1033
Дата рег-ции: Май 2012  


Помог: 30 раз(а)
CODE (html):
скопировать код в буфер обмена
  1. #nav a:hover {
  2.         border:2px solid #FFD200;
  3. }


У картинки появляется рамка... и при том 2 пикселя...куда вы думаете эти два пикселя должны деться? Вот вам и "прыгают картинки"... Уберите это правило, и не будет прыгать.
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB