SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Backgroun Hover and alignment

    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.
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

  2. #2
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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>
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  3. #3
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

  4. #4
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Well, the problem is IE doesnt support :hover on anything but the anchor tag.
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  5. #5
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

  6. #6
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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>
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  7. #7
    eCommerce specialist hotnuts21's Avatar
    Join Date
    Apr 2002
    Location
    Aberystwyth, UK
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Search & Rescue Aberystwyth Lifeboat
    CSS Tutorials/Guides

    Sitepoint signatures are not visible to Search Engines More info

  8. #8
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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>
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,792
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •