close ad
 
Important WebAssist Announcement
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

Unique Background Image - horizontal menu

Thread began 6/02/2011 9:42 am by markhaynes75235 | Last modified 6/03/2011 9:24 am by markhaynes75235 | 3551 views | 7 replies

markhaynes75235

Unique Background Image - horizontal menu

Thanks Jason, I'm almost there, but when I view my page, All of the center images are the new center image for the donate menu!

Here's the line in the menu.php:
<li id="donate"><span><a href="{link to donation form here}" target="_blank">Donate Now</a></span></li>

and the CSS as per your instructions:

/* code for custom donation menu */
ul#cssmw3 > li#donate {
background-image: url("../cssmw3_images/MainNav_Donate_left_s01_1.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw3 > li#donate > span {
background-image: url("../cssmw3_images/MainNav_Donate_right_s01_1.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw3 > li#donate > span > a, ul#cssmw3 > li > span > a:link {
background-image: url("../cssmw3_images/MainNav_Donate_center_s01_1.gif");
background-repeat: no-repeat;
color: #F1F3F2;
display: block;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
margin: 0 8px 0 8px;
padding: 5px 5px 5px 5px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 108px;
outline-style: none;
}
ul#cssmw3 > li#donate:hover {
background-image: url("../cssmw3_images/MainNav_Donate_lefthover_s01_1.gif");
background-position: left top;
background-repeat: no-repeat;
}

ul#cssmw3 > li#donate.hover {
background-image: url("../cssmw3_images/MainNav_Donate_lefthover_s01_1.gif");
background-position: left top;
background-repeat: no-repeat;
}

ul#cssmw3 > li#donate.current {
background-image: url("../cssmw3_images/MainNav_Donate_lefthover_s01_1.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw3 > li#donate:hover > span {
background-image: url("../cssmw3_images/MainNav_Donate_righthover_s01_1.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}

ul#cssmw3 > li#donate.hover > span {
background-image: url("../cssmw3_images/MainNav_Donate_righthover_s01_1.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}

ul#cssmw3 > li#donate.current > span.current {
background-image: url("../cssmw3_images/MainNav_Donate_righthover_s01_1.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw3 > li#donate:hover > span > a, ul#cssmw3 > li:hover > span > a:link {
background-image: url("../cssmw3_images/MainNav_Donate_centerhover_s01_1.gif");
background-repeat: no-repeat;
color: #273015;
font-weight: bold;
text-decoration: none;
outline-style: none;
}

ul#cssmw3 > li#donate.hover > span > a, ul#cssmw3 > li.hover > span > a:link {
background-image: url("../cssmw3_images/MainNav_Donate_centerhover_s01_1.gif");
background-repeat: no-repeat;
color: #273015;
font-weight: bold;
text-decoration: none;
outline-style: none;
}

ul#cssmw3 > li#donate.current > span.current > a.current, ul#cssmw3 > li.current > span.current > a.current:link {
background-image: url("../cssmw3_images/MainNav_Donate_centerhover_s01_1.jpg");
background-repeat: no-repeat;
color: #273015;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
/* end code for custom donation menu */

Now all center nav images in the other menus use the center images for the donate menu in both states, but the Left and Right images are the correct images - let me know what I did wrong!

Thanks!

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...