Wrox Programmer Forums
| 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 software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old February 4th, 2011, 01: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...
  #2 (permalink)  
Old February 4th, 2011, 01:32 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 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!
  #3 (permalink)  
Old February 4th, 2011, 01: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>
  #4 (permalink)  
Old February 4th, 2011, 02:37 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 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!
  #5 (permalink)  
Old February 4th, 2011, 03: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?
  #6 (permalink)  
Old February 4th, 2011, 03:28 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 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!
  #7 (permalink)  
Old February 4th, 2011, 03: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.


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





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.