1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

hover window + list item ??

Discussion in 'CSS' started by myfrogger, Sep 15, 2009.

  1. #1
    I'm using this CSS code:
    <style type="text/css">
      .style1 {font-family: Arial, Helvetica, sans-serif;}
      p.link a:link span{display: none;}
      p.link a:visited span{display: none;}
      p.link a:hover span {
      position: absolute;
      margin:15px 0px 0px 0px;
      background-color: #3ad02a;
      max-width:220;
      padding: 2px 10px 2px 10px;
      border: 1px solid #C0C0C0;
      font: normal 14px/16px Arial;
      color: #000000;
      text-align:left;
      display: block;}
    </style>
    
    HTML:
    and then this HTML coding
    
    <ul>
            <li>List Item 1</li>
    	<li>List Item 2</li>
    	<li><p class="link"><a href="#">List Item 3<span>Fill out this form to find out the details.</span></a></p></li>
    </ul>
    
    HTML:
    In firefox and chrome the <p> tag puts a space in the list. See example here. I don't want this. I tried doing <li class="link"> but that doesn't work.

    How do accomplish the same hover box still using CSS (not javascript) without using the <p> tag?

    Thanks!
     
    myfrogger, Sep 15, 2009 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    
    <ul id="menu">
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li><a href="#">List Item 3 <span>Fill out this form to find out the details.</span></a></li>
    </ul>
    
    Code (markup):
    Because a screen reader will hear that text and because those without CSS will see it without styling, make sure you have a space between the anchor text and the span text. What you had was
    List Item 3Fill out this form...

    anyway, CSS... remember you can make an inline like an anchor a block and a positioned ancestor too, doesn't have to be a p or anyone else.

    I'm using an id on the ul here, "menu".
    
    #menu a {
      position: relative; /*anchor is now a positioned ancestor*/
       display: block; /*if Opera or someone looks buggy, see notes below*/
    }
    #menu a span {
      position: absolute; /*span is now in block context, and uses its anchor parent as the reference*/
      left: -9999em; /*offscreen, but available to screen readers etc.*/
      width: set a width;
      height: set a height;
      any other styles for the span, put here, not on the :hover
    }
    
    #menu a:focus span, #menu a:hover span {
      left: 0; /*back onscreen*/
    }
    
    Code (markup):
    (make "0" whatever coordinate you want, but 0 is onscreen and you can see where it is. Adjust to what you want, use whatever unit you want)

    If you're going to set top as well, then put top: 0 in the regular span declaration and the top you want after :hover. I think I do this because while most browsers default to 0, 0, IE or someone calls it "auto" and that's not always 0... or something like that.

    Opera at least used to have a bug with css hovers on inlines, so if Opera doesn't look nice, you can always make the anchor a block with
    display: block;
    as well. It will naturally be 100% width of the li though, meaning the clickable area will be 100% wide. And if your li's don't have a set width, they're also 100% wide of the whole list, and if your list doesn't have a set width, that's like 100% of the page. Height will be the same though.

    But usually I have a width on my ul's so I don't get the problem.
     
    Stomme poes, Sep 16, 2009 IP
    myfrogger likes this.
  3. myfrogger

    myfrogger Well-Known Member

    Messages:
    439
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    110
    #3
    Thanks so much for your help!!
     
    myfrogger, Sep 16, 2009 IP