Reply
Image replacement for menu
Old 03-21-2007, 10:47 PM Image replacement for menu
Skilled Talker

Posts: 52
Name: ana
Has anyone ever tried using css to control hover over images? I have tried to do this via these instructions: http://themes.cmsmadesimple.org/Image_menu.html and I cant seem to hide the hover over image and text links. This is what i have so far:

http://www.outer-edge.com.au/develop...ite/index.html (see the menu at the top)
ana_rad is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
     
Old 03-22-2007, 10:59 AM Re: Image replacement for menu
LadynRed's Avatar
Super Moderator

Posts: 6,406
Location: Tennessee
You might want to read the original articles on the 'sliding doors' method:
http://alistapart.com/articles/slidingdoors/
http://alistapart.com/articles/slidingdoors2/
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 03-22-2007, 06:00 PM Re: Image replacement for menu
Skilled Talker

Posts: 52
Name: ana
I've fixed the hover over problem, however, now it doesnt appear correctly in Netscape.

Below the menu I see a blue line running from the left of the page to second last menu link.

Any ideas anyone?
ana_rad is offline
Reply With Quote
View Public Profile
 
Old 03-22-2007, 06:07 PM Re: Image replacement for menu
LadynRed's Avatar
Super Moderator

Posts: 6,406
Location: Tennessee
Show us the code
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 03-26-2007, 12:49 AM Re: Image replacement for menu
Skilled Talker

Posts: 52
Name: ana
This is my Style Sheet:

body {
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
font-family: Trebuchet MS, Arial, Helvetica, Sans-serif;
}
#wrapper {
margin: 0 auto;
padding: 0;
width: 800px;
}
#top.home {
background-image: url(images/top_bg.jpg);
background-repeat: no-repeat;
width: 800px;
height: 103px;
}

#menu {
width: 450px;
padding-top: 70px;
padding-left: 330px;
}
ul#nav_styled {
width: 353px;
height: 19px;
margin:0;
padding:0;
background: url(images/menu.gif);
position:relative;
}
ul#nav_styled li {
display:block;
height:19px;
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
ul#nav_styled li a {
display:block;
height:19px;
text-indent: -9000px;
}
li#i1 {
left: 0px;
width: 66px;
}
li#i2 {
left: 66px;
width: 70px;
}
li#i3 {
left: 136px;
width: 68px;
}
li#i4 {
left: 204px;
width: 69px;
}
li#i5 {
left: 273px;
width: 80px;
}
#i1 a:hover, #i1.over {
background: url(images/menu.gif) 0 -21px no-repeat;
}
#i2 a:hover, #i2.over {
background: url(images/menu.gif) -66px -21px no-repeat;
}
#i3 a:hover, #i3.over {
background: url(images/menu.gif) -136px -21px no-repeat;
}
#i4 a:hover, #i4.over {
background: url(images/menu.gif) -204px -21px no-repeat;
}
#i5 a:hover, #i5.over {
background: url(images/menu.gif) -273px -21px no-repeat;
}



This is my HTML:

<body>
<div id="wrapper">
<div id="top" class="home">
<div id="menu">
<ul id="nav_styled">
<li id="i1"><a href="index.html">Home</a></li>
<li id="i2"><a href="news.html">News</a></li>
<li id="i3"><a href="mag.html">Mag</a></li>
<li id="i4"><a href="link.html">Links</a></li>
<li id="i5" class="over"><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
ana_rad is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Image replacement for menu
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.14463 seconds with 13 queries