SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't understand this CSS ...

    I ran across some menus at http://www.cssplay.co.uk/ recently and don't understand how it works - but it does.

    http://www.peachtreewebs.com/protos/pro_three.html

    Specifically, I just don't understand the "b" element in the following CSS code which apparently adds a sliding door effect:

    .menu3 li a:hover {color:#fff; background:#000 url(three_1.gif);}
    .menu3 li a:hover b {background:url(three_1.gif) no-repeat right top;}

    Any illumination would be appreciated.

    Thanks

    Bob

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hey Bob, and welcome to Sitepoint

    The sliding doors technique is where two elements have overlapping background-images so as the element grows the images spread apart from one another.

    For this to work you need two elements to apply the background images to, this example shows how it works:
    http://www.yellowshoe.com.au/tips/ex...er_example.htm

    For the list you already have two elements you could use - 'li' and 'a' but unfortunately IE6< doesn't understand :hover on anything other than anchors - So they have used a <b> tag so that they can apply different background images to both elements within the anchor on hover.

    You could do it without the b tags and add javascript like suckerfish to fix it in IE,
    http://www.htmldog.com/articles/suckerfish/hover/

    Hope that helps

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I get it. Pretty tricky. Thanks for the help.

    Bob

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    No problem

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to add to this, other elements other than <b> could be used, like <span> or <i>, in the same way. I think Stu uses the <b> a lot as it is not used much these days as the <strong> element has replaced it for text styling.

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had seen the <spans> but not <b> or <i>. I keep looking at techniques like these because I have a couple of Joomla CMS sites I'd like to use them on. I haven't been able to figure a way to alter the markup output by the version 1.x code - version 1.5 should be easier. Thanks.


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
  •