PDA

View Full Version : css navigation


nukleuz7
04-16-2006, 05:37 PM
Hey all,

Im trying to create a site purely through css and im having a real hard time.
Im no way ready to jump in and start coding a site so i have been using the css design panel in dreamweaver.
So far i have assigned the background image to a new css and now want to assign a set of graphic rollover buttons for the navigation but i cant find any tutorial that explains how to achieve this without coding it.
There are plenty for text navigation but not for graphic.

Any help would be greatly appreciated but please use stupid proof instructions.

Cheers.

gmcrone
04-17-2006, 03:32 AM
It can be done, but it is not a good idea unless you only have a few buttons.

Create a pseudo element:


a:active { background: url(normalhome.jpg) }
a:hover { background: url(overhome.jpg) }
a:visited { background: url(visithome.jpg) }

You then have to do the above for each menu item, and wrap each menu item
in another element such as li.home, span.home, etc.

Your best bet is to use javascript code to create your rollover buttons.

Mike...

nukleuz7
04-17-2006, 11:15 AM
ok Mike thank you very much for your help.

domedia
04-17-2006, 02:31 PM
a:active { background: url(normalhome.jpg) }
a:hover { background: url(overhome.jpg) }
a:visited { background: url(visithome.jpg) }

Keep in mind Ranjans rule about the order of the pseudo elements.
LoVeHAte
a:link {}
a:visited {}
a:hover {}
a:active {}

d a v e
04-17-2006, 06:00 PM
or if you're using focus as well then
Link, Visited, Hover, Focus, Active

dthomsen8
04-18-2006, 12:35 PM
ok Mike thank you very much for your help.

Mike is suggesting the old and well established way to do this, Javascript.

The new and more tricky way is with CSS. With CSS, there are browser problems lurking out there to trap you, and with the oldest browsers, it does not work at all.