ФорумРазработкаКлиентская сторонаВерстка и оформление → Как сформировать горизонтальное меню?

Как сформировать горизонтальное меню?

  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 27 ноября 2011 г. 20:11

    Помогите сформировать правильно вот такое меню!



    Относительно градиента не заморачивайтесь.
    Мне надо, чтобы текст стоял ниже а картинка была над текстом. При наведении мыши на пункт меню подсвечивался текст и менялась картинка с черно-белой на цветную.

    Я делал так:
    HTML
    <ul class="pages-menu">
    <li><a href="#" title="#"><img src="images/home-a.png" onmouseover="this.src='images/home-h.png';" onmouseout="this.src='images/home-a.png';" />Главная</a></li>
    <li><a href="#" title="#"><img src="images/sitemap-a.png" onmouseover="this.src='images/sitemap-h.png';" onmouseout="this.src='images/sitemap-a.png';" />Site Map</a></li>
    <li><a href="#" title="#"><img src="images/advertise-a.png" onmouseover="this.src='images/advertise-h.png';" onmouseout="this.src='images/advertise-a.png';" />Реклама</a></li>
    <li><a href="#" title="#"><img src="images/support-a.png" onmouseover="this.src='images/support-h.png';" onmouseout="this.src='images/support-a.png';" />Контакты</a></li>
    </ul>


    CSS
    .pages-menu {
    list-style:none;
    margin:0 auto;
    font-size:14pt;
    color:#333;
    }
    .pages-menu a {
    color:#666;
    text-decoration:none;
    }
    .pages-menu a:hover {
    color:#333;
    text-decoration:underline;
    }
    .pages-menu li {
    display:block;
    list-style:none;
    float:left;
    line-height:12pt;
    }

    У меня не получается сделать так, чтобы при наведении мыши сразу менялось изображение и менялся цвет текста и происходило подчеркивание. Если я навожу на ссылку то ссылка видоизменяется, если на изображение то изображение меняется. По сути при наведении даже на пустое пространство в пределах ссылки (между разделителями) тоже должна быть ссылка. А там пусто. Как сделать так, чтобы одновременно они менялись, и чтобы каждый блок (квадратик меню) был как ссылка, как только войдешь в зону пункта меню?

    <a href="#"><li><ing src="#" />ТЕКСТ</li></a>
    так тоже не правильно. Не получается. Плиз хелп!
    Спустя 219 сек.
    С зонами меню можно поступить так:


    .pages-menu {
    list-style:none;
    margin:0 auto;
    font-size:14pt;
    color:#333;
    height:75px;
    }
    .pages-menu a {
    color:#666;
    text-decoration:none;
    display:block;
    width:100px;
    height:75px;
    }
    .pages-menu a:hover {
    display:block;
    width:100px;
    height:75px;
    color:#333;
    text-decoration:underline;
    }
    .pages-menu li {
    display:block;
    width:100px;
    height:75px;
    list-style:none;
    float:left;
    line-height:12pt;
    }


    Но все равно, при попадании курсора мыши в область пункта меню действие происходит только нат текстом а изображение, до сих пор ждет чтобы его погладили по головке… как реализовать одновременно?
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 27 ноября 2011 г. 20:13, спустя 2 минуты 18 секунд

    я все никак не догоню, как же можно писать блог про создание сайтов и при этом не уметь делать такую элементарную хрень, на которую есть как минимум два способа -_-
    Высокоуровневое абстрактное говно
  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 27 ноября 2011 г. 20:16, спустя 3 минуты 15 секунд

    я все никак не догоню, как же можно писать блог про создание сайтов

    а ты думаешь его много кто читает? Его читают такие же долбоебы как и он сам… :)
  • Sinkler

    Сообщения: 7958 Репутация: N Группа: в ухо

    Spritz 27 ноября 2011 г. 20:18, спустя 1 минуту 13 секунд

    была же вроде версия, что "когда учишь других - учишься сам"
    Спустя 12 сек.
    :DDD
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 27 ноября 2011 г. 20:25, спустя 7 минут 40 секунд


    я все никак не догоню, как же можно писать блог про создание сайтов

    а ты думаешь его много кто читает? Его читают такие же долбоебы как и он сам… :)


    Ясно, вы видимо спец. Вместо того чтобы помочь решить проблему вы оскорбляете. Очень разумное решение. Не все ли равно кто и сколько меня читают? Ваше какое дело? Я спросил - вы либо отвечаете либо нет. Вот оскорблять не нужно. Спасибо всем за помощь, больше впредь писать не буду на вашем форуме. Я знаю, для вас не велика потеря))) Вам вернется все сполна. Счастливо.
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 27 ноября 2011 г. 20:28, спустя 2 минуты 56 секунд

    еще один недовольный))
    Высокоуровневое абстрактное говно
  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 27 ноября 2011 г. 20:33, спустя 5 минут 3 секунды

    AdmBuxonly, чувак ничего личного, ты нервы свои побереги то… Просто понимаешь, ты тут уже как 3 года, а вопросы у тебя все те же… понимаешь к чему я клоню? Ты прибегаешь на форум, ищешь решение своей задачи, копипастишь его и забываешь про него. А сам ничему не учишся. Я думаю пора уже чему нить научится? Например самому искать решение своей проблемы, думать своей головой (да по началу будет трудно, будет получатся фигня, но через годик уже будешь как семачки щелкать)
  • Sinkler

    Сообщения: 7958 Репутация: N Группа: в ухо

    Spritz 27 ноября 2011 г. 22:19, спустя 1 час 45 минут 56 секунд

    марио пора научиться писать мягкий знак в глаголах :DDDDDD
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 27 ноября 2011 г. 22:23, спустя 3 минуты 50 секунд

    Sinkler, стукни в жабир
    Высокоуровневое абстрактное говно
  • Sinkler

    Сообщения: 7958 Репутация: N Группа: в ухо

    Spritz 27 ноября 2011 г. 22:24, спустя 1 минуту 4 секунды

    Stasovsky, я ужинаю, потом занят, в квейк не хочу :D
  • Ivan

    Сообщения: 1316 Репутация: N Группа: Адекваты

    Spritz 27 ноября 2011 г. 22:54, спустя 29 минут 45 секунд

    А мне кажется что марио не прав. А также могу добавить, что люди делятся на быдло и нормальных, так вот у нормальных людей есть у каждого какая-то своя специализация, т.е. человек в чем то может быть продвинут лучше другого человека и в то же время в чём-то он может быть хуже. Вот AdmBuxonly например неплохо поёт)))))
    Спустя 126 сек.
    AdmBuxonly - а ты учись воспринимать критику, она у каждого по своему выливается
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 27 ноября 2011 г. 23:13, спустя 18 минут 50 секунд

    Sinkler, да нахуй ты мне нужен в кваке)) в общем кинь ссылку на хостинг, где югэлитбыт ледит…
    Высокоуровневое абстрактное говно
  • Sinkler

    Сообщения: 7958 Репутация: N Группа: в ухо

    Spritz 27 ноября 2011 г. 23:18, спустя 4 минуты 55 секунд

    firstvds.ru
    Спустя 15 сек.
    а в скайп не судьба спросить? :D
  • Givi

    Сообщения: 2284 Репутация: N Группа: Адекваты

    Spritz 28 ноября 2011 г. 0:03, спустя 45 минут 32 секунды

    Ivan, если у каждого своя специфика, то нахуй автор создает блог, где будет учить других делать то, что сам не умеет? В общем, ты просто далеко не в теме с этим чудаком.

    AdmBuxonly, сделай ссылку как блочный элемент (с помощью css-стилей) и фоном сделай ей картинку. Вот при наведении и будешь менять и фон-картинку и шрифт как тебе угодно. Сделаешь это, выложишь на форум отчет о том, как именно это сделал, иначе больше ответов от меня не получишь.
  • phpdude

    Сообщения: 26646 Репутация: N Группа: в ухо

    Spritz 28 ноября 2011 г. 0:07, спустя 3 минуты 40 секунд

    лулз. пусть бежит, лентяи тут не особо нужны
    Сапожник без сапог

Пожалуйста, авторизуйтесь, чтобы написать комментарий!