SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    milwaukee, wi
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Make all contents of li clickable w/o js or bloated code?

    I'm trying to make all the contents of my li clickable - a big box with image tag and p elements inside.

    I know you can't just wrap the lot in an a tag because it's not meant to contain block-level elements like the p tag.

    One solution I came up with was to position the li relative, and create an empty a tag with a position of absolute, 100&#37; size. This works in Firefox, but not in IE - the only clickable area of IE is the particular elements wrapped in the <a>. So to make all the block elements also clickable I'd have to put separate a tags on each - too much code.

    I found a solution from Jquery but I'd really like to do this with just CSS. Is there a way? Here is my existing code with the above "solution", for a reference. I haven't put on the extra IE a tags, btw.

    HTML Code:
    <ul id="agent-box">
                    <li>
                        <img src="images/agent1.jpg" width="133" height="180" />
                        <p><a href="#">Scott Smith</a></p>
                        <p>Broker, Owner</p>
                     </li>
    </ul>
    Code:
    ul#agent-box {
         list-style:none;
         margin:0;
         padding:0;
    }
    ul#agent-box li {
    	position:relative;
    	width:132px;
    	border:1px solid #999;
    	padding:6px;
    	margin: 20px 20px 20px 0;
    	float:left;
    	height:248px;
    }
    ul#agent-box li:hover {
    	background-color:#FFCC99;
    }
    ul#agent-box li a {
    	position:absolute;
    	height:100%;
    	width:100%;
    	left:0;
    	top:0;
    }
    Also, any suggestions on what is the most accessible & cleanly-degradable way to do this?
    Thank you!!

  2. #2
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just give the hyperlinks ("A" tag) a display:block rule and their clickable area will expand to fill the available space.
    Ed Seedhouse

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    milwaukee, wi
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ed Seedhouse View Post
    Just give the hyperlinks ("A" tag) a display:block rule and their clickable area will expand to fill the available space.
    which circumstance are you referring to? are you saying i should wrap the whole li in an a tag?

  4. #4
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need the 'p' elements, as the 'li' is your block container. As Ed suggested, make the 'a' block.
    Code:
    li a {
        display: block;
        text-align: center;
        }
    
    li a:hover {
        background-color: #eee;
        }
    
    /*This is optional. If you drop it, add a 'br' after the image tag.*/
    li a img {
        display: block;
        margin: 1em auto;
        }
    =====================
      <ul>
        <li><a href="#"><img src="images/agent1.jpg"
             alt="[photo of Scott Smith]"
             width="133"
             height="180" /> Scott Smith
        <br />
        Broker, Owner</a></li>
      </ul>
    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    milwaukee, wi
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    You don't need the 'p' elements, as the 'li' is your block container. As Ed suggested, make the 'a' block.
    Code:
    li a {
        display: block;
        text-align: center;
        }
    
    li a:hover {
        background-color: #eee;
        }
    
    /*This is optional. If you drop it, add a 'br' after the image tag.*/
    li a img {
        display: block;
        margin: 1em auto;
        }
    =====================
      <ul>
        <li><a href="#"><img src="images/agent1.jpg"
             alt="[photo of Scott Smith]"
             width="133"
             height="180" /> Scott Smith
        <br />
        Broker, Owner</a></li>
      </ul>
    cheers,

    gary
    oh, ok. the two lines of text are formatted differently; should I just use a span for one then?

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    milwaukee, wi
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i put a span around the second line, and it all works great. thanks!

    just curious...what if i had a bunch of different lines of text in that list item, and they all needed to be formatted differently? not having an element to attach them to makes it hard to format. in that situation, would i just use lots of spans with classes or..?

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by pas_non View Post
    I'm trying to make all the contents of my li clickable - a big box with image tag and p elements inside.

    I know you can't just wrap the lot in an a tag because it's not meant to contain block-level elements like the p tag.
    The method that I use is to help things along with a bit of the ol' Javascript.

    Put the most obviously clickable bit of the <li> in an ordinary <a href=...> tag, so that it is still usable if Javascript isn't turned on. Then you add the magic.
    eg <li onClick="window.open( 'page.htm','_top' ); return false;">
    Bingo! Anyone who clicks anywhere in the <li> activates the onClick function, which opens page.htm in the current window/tab.

    I'm sure there are better ways of doing it using unobtrusive scripting, although I can't help but feel they will be massively more effort to set up, more work to maintain and change, and considerably more bytes to transfer. So I'm probably going to stick with my inelegant but functional solution unless someone can come up with a very good, practical reason not to!

  8. #8
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pas_non View Post
    i put a span around the second line, and it all works great. thanks!

    just curious...what if i had a bunch of different lines of text in that list item, and they all needed to be formatted differently? not having an element to attach them to makes it hard to format. in that situation, would i just use lots of spans with classes or..?
    Loosely, yes. I would question whether you'd want the whole thing clickable in that case, and whether you're going out on a limb esthetically.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    milwaukee, wi
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Quote Originally Posted by gary.turner View Post
    Loosely, yes. I would question whether you'd want the whole thing clickable in that case, and whether you're going out on a limb esthetically.

    cheers,

    gary
    o rly?

    it was just a hypothetical. but if i do end up ever needing it, i'll post my design on this thread for your critique

  10. #10
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's the trouble with hypotheticals, it's too easy to imagine an extreme.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials


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
  •