May 19, 200917 yr FYI I've been attempting to use a few tutorials I found on Google but they've all ended in the same problem. Basically I want to have a menu row (made up of a series of horizontally aligned 73x25 png's) where each item links: <a href="#" /> Also, I want each image to change when hovered over (basically change to a custom invert of itself) and revert to its original whenever it's not hovered/the link is active/it's been visited (to avoid the purple link visited box around the image). I've tried a series of different tutorials that all work whenever I use just one menu item but won't work when I try 2, 3, 4 or 5 side-by-side. I'm really confused because I did everything right by several tutorials. Ideally I want to refrain from creating a series of separate <div>'s for each menu item and would appreciate it if someone could share their CSS image link hover wisdom Below is the HTML I've written: <html> <head> <link rel="stylesheet" type="text/css" href="index.css" /> <title>Webpage</title> </head> <body> <div1><img src="header.png"/></div1> <div2></div2> <div3></div3> <div4></div4> <div5></div5> <div6></div6> </body> </html> The menu is to go in the 100%x25px <div2> element. Thanks in advance for any help/tips/pointers
May 19, 200917 yr You may need to show the CSS cose you have written up so people can look at it, as your link coding should be in your css file. If you still have no joy try the following link (unless you have alreay tried) http://www.westciv.com/style_master/house/...vers/index.html
May 19, 200917 yr Author You may need to show the CSS cose you have written up so people can look at it, as your link coding should be in your css file. CSS here: div1 { background:blue; color:white; width:100%; height:20px; position:fixed; left:0px; top:0px; } div2 { background:black; color:white; width:100%; height:25px; position:fixed; left:0px; top:20px; } div3 { background-color:black; color:red; width:100%; height:50px; position:fixed; left:0px; top:45px; } div4 { background-color:#b8b8b8; color:red; width:100%; height:auto; position:fixed; left:0px; top:95px; bottom:0px; background-image:url('contentbackgroundfade.png'); background-repeat: repeat-x; background-position:bottom; } div5 { background:gray; position:fixed; width:100%; height:25px; left:0px; bottom:0px; } div6 { background-color:white; color:red; width:auto; height:auto; position:fixed; top:100px; left:5px; right:5px; bottom:30px; }
May 19, 200917 yr Here this little tutorial I wrote might help you http://www.webdesignerforum.co.uk/index.ph...ost&p=21844
May 19, 200917 yr Author Here this little tutorial I wrote might help you http://www.webdesignerforum.co.uk/index.ph...ost&p=21844 It's a brilliant tutorial but how would I translate it into a horizontal menu? I tried changing "home" to "menu", "myaccount" etc but it only showed the first menu item and nothing else. Thanks in advance
Create an account or sign in to comment