Backgroun Hover and alignment

**hotnuts21** · Aug 14, 2004 08:17

I am having a weird problem. I have hacked the menu to display a picture and then i want the background to show on hover. Take a look at this link

http://www.aberystwythlifeboat.org.u...site/index.php

Its the main menu on the left which is the problem.

In firefox, the blue background shows on hover, but there is no space between the menu items. Also I want the text to align to the middle of the image, but it always remains at the bottom of the div.

In IE the space shows up finr (too much in fact), but there is no Blue hover in the background, also the same problem with the text.

Here is my CSS

div.menuMainItemNormal {
padding: 5 px;
width: 139px;
height: 35px;
font-family: Tahoma, Verdana, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-align: middle;

}
div.menuMainItemNormal:hover {
width: 139px;
height: 35px;
font-family: Tahoma, Verdana, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
background: #CCCCDE;
text-align: middle;
}

I hacked the module to make it a DIV, instead of a a table, I couldnt get an individual area to work properly using a table, on hover the whole table went blue.

**The New Guy** · Aug 14, 2004 09:08

I think this is what your looking for. It looks the same in IE5, IE6, Opera, and FF.

Code:

 <!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>
 	<title></title>
 	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <style>
 #menu a{
 	display: block;
 	width: 150px;
 	\width: 190px; /* IE5 Hack */
 	w\idth: 150px;
 	height: 27px;
 	\height: 35px; /* IE5 Hack */
 	he\ight: 27px;
 	background-color: #FFF;
 	padding: 8px 0px 0px 40px;
 	background-position: center left;
 	background-repeat: no-repeat;
 	font-family: verdana;
 	color: #000066;
 	font-size: 1em;
 	font-weight: bold;
 	margin-top: 1px; /* margin-bottom: 1px will glitch in IE5 & 6 */
 }
 #menu a.home{
 	background-image: url('Home.gif');
 }
 #menu a.news{
 	background-image: url('News.gif');
 }
 #menu a.links{
 	background-image: url('The_Web_Links.gif');
 }
 #menu a.contact{
 	background-image: url('Contact_Us.gif');
 }
 #menu a:hover{
 	background-color: #CCCCDE;
 }
 </style>
 </head>
 <body>
 <div id="menu">
 	<a href="#" class="home">Home</a>
 	<a href="#" class="news">News</a>
 	<a href="#" class="links">The Web Links</a>
 	<a href="#" class="contact">Contact Us</a>
 </div>
 </body>
 </html>

**hotnuts21** · Aug 14, 2004 09:47

Thanks but that didnt work.

The images cannot be addee via the style sheet, as new ones are generated automatically when a new menu item is added using php.

I need to be able to set the style using my external stylesheet and the class
div.menuMainItemNormal

as I laid out above.

I tried putting your code in my style sheet, and although it changed the layout, the blue background does not show up in IE.
I am trying to achieve what we did here
http://www.aberystwythlifeboat.org.uk/design/

But that is a static html page, and uses javascript. We dont want to use javascript at all.

**The New Guy** · Aug 14, 2004 10:24

Well, the problem is IE doesnt support :hover on anything but the anchor tag.

**hotnuts21** · Aug 14, 2004 10:34

So I have to get the hover into the <a> tag. I did try that but it then only made the background of the text blue on hover, and not the whole div area.

hmm, here is the outputted html

Code:

 <div class='menuMainItemNormal'> <img src="http://www.aberystwythlifeboat.org.uk/new_site/images/stories/template/Home.gif" alt="Home" height="35" width="35" /><a href="http://www.aberystwythlifeboat.org.uk/new_site/component/option,com_frontpage/Itemid,1/" class="mainlevel">Home</a>

As you can see I have the class Mainlevel within the anchor tag, is there anything I can add to this tag, to make the whole background go blue on hover, and not just the immediate background to the text?

thnx
<br /><br /> </div>

**The New Guy** · Aug 14, 2004 10:55

Any reason you cant do this? Using my CSS.

Code:

 <div id="menu">
	<a href="#" style="background-image: url('Home.gif');">Home</a>
	<a href="#" style="background-image: url('News.gif');">News</a>
	<a href="#" style="background-image: url('The_Web_Links.gif');">The Web Links</a>
	<a href="#" style="background-image: url('Contact_Us.gif');">Contact Us</a>
</div>

**hotnuts21** · Aug 14, 2004 11:12

The only problem with that is that each menu requires its own CSS style for the background image. If I add a new menu item or one is generated, then I will have to manually add the new CSS style into it. So we couldnt leave the crew to update it.

Unless im missing something!!

<edit>
I was looking more at your earlier code, now you have added in the image to the inline CSS, it might work. I will keep you posted L

</edit>

**The New Guy** · Aug 14, 2004 11:16

Hmm, not sure I understand. All CSS you need is:

Code:

 #menu a{
 	display: block;
 	width: 150px;
 	\width: 190px; /* IE5 Hack */
 	w\idth: 150px;
 	height: 27px;
 	\height: 35px; /* IE5 Hack */
 	he\ight: 27px;
 	background-color: #FFF;
 	padding: 8px 0px 0px 40px;
 	background-position: center left;
 	background-repeat: no-repeat;
 	font-family: verdana;
 	color: #000066;
 	font-size: 1em;
 	font-weight: bold;
 	margin-top: 1px; /* margin-bottom: 1px will glitch in IE5 & 6 */
 }
 #menu a:hover{
 	background-color: #CCCCDE;
 }

If you add a new item the css does not need to be changed.

The HTML can be generated by some script

Code:

 <div id="menu">
	<a href="#" style="background-image: url('Home.gif');">Home</a>
	<a href="#" style="background-image: url('News.gif');">News</a>
	<a href="#" style="background-image: url('The_Web_Links.gif');">The Web Links</a>
	<a href="#" style="background-image: url('Contact_Us.gif');">Contact Us</a>
</div>

**Paul O'B** · Aug 15, 2004 08:25

Hi,

As you can see I have the class Mainlevel within the anchor tag, is there anything I can add to this tag, to make the whole background go blue on hover, and not just the immediate background to the text?

Why don't you put the image inside the anchor and then set the anchor to display block. This will make it fill to 100% of its parent and not just the text.

This also has the added benefit of making the image a link also.

Replace the same named styles as follows:

CSS:

Code:

div.menuMainItemNormal { 
width: 139px; 
height: 35px; 
font-family: Tahoma, Verdana, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
div.menuMainItemNormal a img {border:none;margin-right:2px;vertical-align:middle}
div.menuMainItemNormal a {display:block;} 
div.menuMainItemNormal a:hover { background-color: #CCCCDE;}

html:

Code:

<div class='menuMainItemNormal'><a href="http://www.aberystwythlifeboat.org.u...page/Itemid,1/" class="mainlevel"><img src="http://www.aberystwythlifeboat.org.u...plate/Home.gif" alt="Home" height="35" width="35" />Home</a> 
</div>
<div class='menuMainItemNormal'><a href="http://www.aberystwythlifeboat.org.u...t/section/1/2/" class="mainlevel"><img src="http://www.aberystwythlifeboat.org.u...plate/News.gif" alt="News" height="35" width="35" />News</a> 
</div>
<div class='menuMainItemNormal'><a href="http://www.aberystwythlifeboat.org.u...inks/Itemid,4/" class="mainlevel"><img src="http://www.aberystwythlifeboat.org.u..._Web_Links.gif" alt="The Web Links" height="35" width="35" />The 
Web Links</a>
</div>
etc.....................................

Paul

User Tag List

Thread: Backgroun Hover and alignment

Thread Tools

Display

Backgroun Hover and alignment

Bookmarks

Bookmarks

Posting Permissions