Навигационное меню созданое с помощью CSS

[розмарин]

Как создать навигационное меню через CSS, ссылки должны быть не в виде текста, а в виде картинки, которая при наведении на нее мыши меняется на другую картинку. И потом, каким образом ее внедрить в html-код. Может мне кто-нибудь помочь???

[Emm]

А вы только впервые столкнулись с веб-строительством ?

[maddogrts]

Конечно. Значит, так нам понадобиться моток конских волос, толстая иголка, компьютер, монитор, мышка и клавиатура (по возможности). Берем волосы конские, и начинаем их методично скручивать косичкой, наша цель получить длинную плеть (где-то 1,5 -2,0 метра, опять же по возможности).

После того как спели косу, вы должны начать себя само истязать, стоя перед компьютером, и произнося волшебные слова: "Хугу Вуду помоги мне Вуду" за один удар 10 повторений.

В общем, после этого вы подходите к компьютеру набираете там волшебные слова:

www.ya.ru и вводите следующее: "навигационное меню картинками CSS" (<<< это пункт 5) и нажимаете enter. Потом опять начинаете себя истязать. В итоге добрый яндекс выдаст вам " Результат поиска: страниц ? 1 016, сайтов ? не менее 430". В общем, он бы наверно вам и просто так выдал, но если вы проделывали выше указанные процедуры то первые 10 ссылок это то, что вы искали .

После этого вы отходите от компа и все повторяете заного.

Но в пункте 5 вводите:" как подключить CSS к HTML странице" или " каким образом CSS внедрить в html-код"(<< это цитата, автор розмарин)

Благодарности не надо, всегда рад помочь.

[розмарин]

maddogrts

А без сарказма обойтись нельзя было? Ну, да о чем я... ведь куда веселее написать язвительный коммент, чем действительно помочь...

Emm

Естественно в-первые, иначе стала бы я тратить время на создание подобной темы?

[musulman]

+1 зачет.

[Emm]

мда.. maddogrts, и зачем это стихотворение...

добавлено:

to розмарин, если впервые, то я бы порекомендовал вам сначала почитать о html и css хотябы для общего представления, иначе у вас возникнет еще больше вопросов и сложностей, в процессе создания меню, даже с нашей помощью.

[maddogrts]

Emm

Затем нужно, не только помогать, нужно еще давать повод задуматься, помогать нужно в сложных ситуациях. А здесь видно, что человеку откровенно лень даже написать в поиске пару фраз.

Нужно отучать от этой привычки. Нужно самим находить решения, а не спрашивать других. Сегодня он спросил, как подключить стили к html странице, увеличить шрифт и поменять цвет, а через неделю с негодованием напишет, а вы знаете min-width не работает в ИЕ что делать, да забыл и png там фон появляется какой то странный, я попробовал все не получается.

Чем больше в России начнут думать, тем лучше. Есть вещи сложные для понимания и ускользающие, их можно объяснять, но объяснять то, что уже 100 000 раз объяснено и разжевано, это значит развивать у нового поколения тупизм и дебилизм.

Но даже в этом случае можно помочь, если бы человек написал, свои действия, что он пробовал, что он делал, чтобы достигнуть поставленной задачи.

Тут этого нет больше чем уверен автор тока, проснувшись, решил замутить страничку. Че делать? Написать на форуме, очень логичный вариант, зачем искать, когда можно просто написать для тебя все найдут и разжуют.

Или я не прав?

[розмарин]

maddogrts

Ты не прав.

Emm

Я прочитала почти все, что написано на этом сайте и сижу изучаю книжку по html и css, но именно информации о том, как создать это злополучное графическое меню в книге нет, по-этому я и решила спросить у знающих людей, или попросить ссылку, на сайт, где расположенна данная информация.

Я знаю, как подключить css к html, но как подключить это меню мне не понятно...

Вот тут прочитала, что через список ul, но пока все равно не понятно, как это осуществить.

[Scrum]

http://htmlbook.ru/content/?id=110

[maddogrts]

розмарин

извини я не хотел . Не злись, думаю через некоторое время ты сама будешь смеятся, над теми ворпосами которые спрашиваешь сейчас .

[розмарин]

Scrum

Спасибо.

[Dimitry Wolotko]

maddogrts, замечание тебе, в этом разделе в поиск не отправляют.

[Vlad]

Понадобится следующее.

1. Фотошоп (Illustrator, CorelDraw, ImageReady, Paint.NET) - графический редактор.

2. Готовый код HTML, куда вставлять свое меню.

Предлагаю вариант с одной картинкой. Особенность только в том, что меняется цвет фона под ней. Это как в Word 2003. Наводишь мышь на кнопку, появляется рамка и цвет фона становится другим. Красиво, эффектно и наглядно. Только я еще это ни разу не делал, надо бы на кошках вначале потренироваться. Берешься?

Алгоритм такой.

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

- далее картинку вставляешь внутрь ссылки

- в CSS пишешь:

a.menu {

background: #ccc;

display: block;

}

a.menu:hover {

background: #fc0;

}

Вопросы есть?