Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 4 > BOOK: Beginning ASP.NET 4 : in C# and VB
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning ASP.NET 4 : in C# and VB
This is the forum to discuss the Wrox book Beginning ASP.NET 4: in C# and VB by Imar Spaanjaars; ISBN: 9780470502211
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 4 : in C# and VB section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old February 4th, 2011, 12:24 PM
Authorized User
Points: 445, Level: 7
Points: 445, Level: 7 Points: 445, Level: 7 Points: 445, Level: 7
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2011
Posts: 89
Thanks: 1
Thanked 0 Times in 0 Posts
Default Background Image not working

Hi all, I'm working my way through the book but come across a problem when trying to set a mouse over background image to change. My menu code is:

<div id="menu">
<ul>
<li><a style="background: url(Images/Button.gif) no-repeat center center;" href="Default.aspx" accesskey="1" title="">Home</a></li>
</ul>
</div>

... and I added a style tag inside the head element:

<style type="text/css">
#menu a:hover, #menu .active a
{
background: url(Images/ButtonOver.gif);
color: #FFFFFF;
}
</style>

The colour changes fine but for some reason the image wont change to ButtonOver??? Any help would be much appreciated...
Reply With Quote
  #2 (permalink)  
Old February 4th, 2011, 12:32 PM
Imar's Avatar
Wrox Author
Points: 71,164, Level: 100
Points: 71,164, Level: 100 Points: 71,164, Level: 100 Points: 71,164, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,948
Thanks: 79
Thanked 1,555 Times in 1,532 Posts
Default

Hi Alex,

Have you tried background-image, rather than just background? The latter works with the in-line CSS as you specify multiple properties for the short hand syntax.

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #3 (permalink)  
Old February 4th, 2011, 12:59 PM
Authorized User
Points: 445, Level: 7
Points: 445, Level: 7 Points: 445, Level: 7 Points: 445, Level: 7
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2011
Posts: 89
Thanks: 1
Thanked 0 Times in 0 Posts
Default

Thanks for your quick reply Imar. I have tried background-image and all variations of the path, i.e. including ../ at the start, quotes, single quotes etc but no use. I have tripple checked the path and file names and file images and all looks good but it just wont work for me (this is driving me nuts!)... The colour change works fine but no background image change, here is the full page code:

<%@ Master Language="VB" CodeFile="Site.master.vb" Inherits="Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#menu a:hover, #menu .active a
{
background-image:url(Images/ButtonOver.gif);
color: #FFFFFF;
}
</style>

<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="Styles/Main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="Header" style="background: url(Images/Logo.jpg) no-repeat; background-position: center;"></div>
<div id="menu">
<ul>
<li><a style="background: url(Images/Button.gif) no-repeat center center;" href="Default.aspx" accesskey="1" title="">Home</a></li>
<li><a style="background: url(Images/Button.gif) no-repeat center center;" href="Default.aspx" accesskey="2" title="">About Us</a></li>
<li><a style="background: url(Images/Button.gif) no-repeat center center;" href="Default.aspx" accesskey="3" title="">Products</a></li>
<li><a style="background: url(Images/Button.gif) no-repeat center center;" href="Default.aspx" accesskey="4" title="">Services</a></li>
<li><a style="background: url(Images/Button.gif) no-repeat center center;" href="Default.aspx" accesskey="5" title="">Contact Us</a></li>
</ul>
</div>
<form id="form1" runat="server">

<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Reply With Quote
  #4 (permalink)  
Old February 4th, 2011, 01:37 PM
Imar's Avatar
Wrox Author
Points: 71,164, Level: 100
Points: 71,164, Level: 100 Points: 71,164, Level: 100 Points: 71,164, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,948
Thanks: 79
Thanked 1,555 Times in 1,532 Posts
Default

Hi Alex,

Ah, I see now. The non-hover images are applied in-line. Inline styles win from embedded style sheets. In other words, the image Button.gif is stronger than the Over image. Two ways to fix it:

1. Use !important:

Code:
#menu a:hover, #menu .active a
{
  background-image: url(Images/ButtonOver.gif) !important;
}
2. Define the original images through an embedded stylesheet as well. E.g. a menu like this:

Code:
 
<li><a class="menu-image" href="Default.aspx" accesskey="1" title="">Home</a></li>
combined with a class like this:

Code:
 
a.menu-image
{
  background: url(Images/Button.gif) no-repeat center center;
}
Hope this helps,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #5 (permalink)  
Old February 4th, 2011, 02:19 PM
Authorized User
Points: 445, Level: 7
Points: 445, Level: 7 Points: 445, Level: 7 Points: 445, Level: 7
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2011
Posts: 89
Thanks: 1
Thanked 0 Times in 0 Posts
Default

This works perfectly thank you. However I would like to remove the style from the page code and into my CSS page:

#menu a:hover, #menu .active a
{
background-image:url(Images/ButtonOver.gif) !important;
color: #FFFFFF;
}

- when I do this the buttons disappear instead of change on the mouse over, can I change something to correct this?
Reply With Quote
  #6 (permalink)  
Old February 4th, 2011, 02:28 PM
Imar's Avatar
Wrox Author
Points: 71,164, Level: 100
Points: 71,164, Level: 100 Points: 71,164, Level: 100 Points: 71,164, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,948
Thanks: 79
Thanked 1,555 Times in 1,532 Posts
Default

You may need to adjust the path to reflect the location of the images relative to the CSS file that uses them. See Chapter 7, page 240 and further for more details.

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #7 (permalink)  
Old February 4th, 2011, 02:48 PM
Authorized User
Points: 445, Level: 7
Points: 445, Level: 7 Points: 445, Level: 7 Points: 445, Level: 7
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2011
Posts: 89
Thanks: 1
Thanked 0 Times in 0 Posts
Default

Ah yes, because the CSS file was in a Styles folder I had to add ../ - thanks very much for your quick assisstance.
Reply With Quote
Reply


Thread Tools
Display Modes

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

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

Similar Threads
Thread Thread Starter Forum Replies Last Post
how to get background image url? sbkrohit CSS Cascading Style Sheets 2 October 23rd, 2008 11:06 AM
Background-image:url() interrupt CSS Cascading Style Sheets 2 September 20th, 2006 05:04 AM
Static Background Not Working vjamacaddict CSS Cascading Style Sheets 2 August 19th, 2005 05:12 PM
background image problems Seraphim Beshoner CSS Cascading Style Sheets 3 April 11th, 2005 09:14 PM



All times are GMT -4. The time now is 05:11 AM.


Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.