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.

Clickable area in CSS

Discussion in 'CSS' started by jumpenjuhosaphat, Dec 3, 2006.

  1. #1
    I need to make an area of a web page clickable. What I've done is set up div's for the width and height that I need to have clickable. I set them absolutely. The problem that I have is that out of 5 div's, only the lowest div's entire area is clickable, the rest of them only a portion of the right side of the div is clickable.

    Here is the code:

    CSS
    .menu
    {
    position:absolute;
    left:447px;
    top:144px;
    width:203px;
    height:100px;
    background-image:url('images/menu.gif');
    }
    
    
    
    .oladb_home
    {
    position:absolute;
    top:0px;
    left:0px;
    width:203px;
    height:16px;
    }
    
    .next
    {
    position:absolute;
    top:16px;
    left:0px;
    width:203px;
    height:21px;
    }
    
    .previous
    {
    position:absolute;
    top:38px;
    left:0px;
    width:203px;
    height:21px;
    }
    
    .home
    {
    position:absolute;
    top:60px;
    left:0px;
    width:203px;
    height:21px;
    }
    
    .gallery
    {
    position:absolute;
    top:82px;
    left:0px;
    width:203px;
    height:21px;
    }
    Code (markup):
    And the HTML
    <div class="menu">
        <a href="http://www.oladb.com"><div class="oladb_home"></div></a>
        <a href="britney_spears_18.html"><div class="next"></div></a>
        <a href="britney_spears_16.html"><div class="previous"></div></a>
        <a href="index.html"><div class="home"></div></a>
        <a href="gallery_1.html"><div class="gallery"></div></a>
      </div>
    
    Code (markup):
    The entire gallery div is clickable. The rest of them aren't.
    To see exactly what I mean, go to http://britney-spears.oladb.com/britney_spears_1.html

    Thanks in advance.
     
    jumpenjuhosaphat, Dec 3, 2006 IP
  2. kkibak

    kkibak Peon

    Messages:
    1,083
    Likes Received:
    78
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hey,

    Okay, this is a common mistake and one I made as well when I started with CSS. Unfortunately with css, you can't use divs to link the way you want, so the first step is to remove those divs altogether (all but the outer one).

    Something like this is the way to go (I changed your classes to IDs since it looks like that's more appropriate):

    
    <style>
    .menu
    {
    position:absolute;
    left:447px;
    top:144px;
    width:203px;
    height:100px;
    background-image:url('images/menu.gif');
    }
    
    
    
    #oladb_home
    {
    display:block;
    position:absolute;
    top:0px;
    left:0px;
    width:203px;
    height:16px;
    }
    
    #next
    {
    display:block;
    position:absolute;
    top:16px;
    left:0px;
    width:203px;
    height:21px;
    }
    
    #previous
    {
    display:block;
    position:absolute;
    top:38px;
    left:0px;
    width:203px;
    height:21px;
    }
    
    #home
    {
    display:block;
    position:absolute;
    top:60px;
    left:0px;
    width:203px;
    height:21px;
    }
    
    #gallery
    {
    display:block;
    position:absolute;
    top:82px;
    left:0px;
    width:203px;
    height:21px;
    }
    </STYLE>
    
    <div class="menu">
        <a href="http://www.oladb.com" id="home"></a>
        <a href="britney_spears_18.html" id="previous"></a>
        <a href="britney_spears_16.html" id="next"></a>
        <a href="index.html" id="oladb_home"></a>
        <a href="gallery_1.html" id="gallery"></a>
    </div>
    
    Code (markup):
    hope that helps! the key is in making sure you have display:block in your css for the a { }.
     
    kkibak, Dec 3, 2006 IP
    jumpenjuhosaphat likes this.
  3. jumpenjuhosaphat

    jumpenjuhosaphat Peon

    Messages:
    229
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for the help. Unfortunately, I get the exact same results when I do it that way. It's almost as if something is overlaying a portion of the background image. I am trying to avoid using an image map, the reason being because I'm not sure how the search engines handle mapped links.
     
    jumpenjuhosaphat, Dec 3, 2006 IP
  4. kkibak

    kkibak Peon

    Messages:
    1,083
    Likes Received:
    78
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I wish I could test more and try to fix this for you but I'm on my laptop and not very well set-up... when you're trouble shooting this, though, remember that you can not make an entire div a clickable link. to accomplish the same goal you have to make the anchor tags display as block elements and use them instead.
     
    kkibak, Dec 3, 2006 IP
  5. jumpenjuhosaphat

    jumpenjuhosaphat Peon

    Messages:
    229
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You are correct. I got it to work perfectly in FF, but once i took a look in IE, I realized then that I had to rethink the entire idea. I realized what my problem was originally was that I had another div overlapping the clickable area, making it no longer clickable.
     
    jumpenjuhosaphat, Dec 4, 2006 IP
  6. kkibak

    kkibak Peon

    Messages:
    1,083
    Likes Received:
    78
    Best Answers:
    0
    Trophy Points:
    0
    #6
    great glad you got it working! css stuff can be a pain when you're first learning after years of just html.. the logic is quite different
     
    kkibak, Dec 4, 2006 IP
  7. jumpenjuhosaphat

    jumpenjuhosaphat Peon

    Messages:
    229
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #7
    The hardest part that I find is designing to work in all popular browsers. IE irks me at times. Thanks a bunch for all your efforts.
     
    jumpenjuhosaphat, Dec 4, 2006 IP
  8. Erind

    Erind Peon

    Messages:
    663
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #8
    It is very possible to use a whole div as a link. How? I got the goodies. hehe.

    Unfortunately I don't have time (got to go to work) to review your code but I will post a short example.

    You need to use display:block or display:table with a simple link inside.

    
    <div id="link"><a href=blah.com>Blah.com</a></div>
    
    div#link a:vlink{
    	display: table;
    -your effects, link color whatever here for normal link-
    }
    div#link a:visited{
    	display: table;
    -your effects, link color whatever here for visited link-
    }
    div#link a:hover{
    	display: table;
    -your effects, link color whatever here on hover-
    }
    div#link a:active{
    	display: table;
    -your effects, link color whatever here on active link-
    }
    
    Code (markup):
     
    Erind, Dec 4, 2006 IP
  9. kkibak

    kkibak Peon

    Messages:
    1,083
    Likes Received:
    78
    Best Answers:
    0
    Trophy Points:
    0
    #9
    But will that make the anchor fill the whole div?
     
    kkibak, Dec 4, 2006 IP
  10. Erind

    Erind Peon

    Messages:
    663
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Since you are declaring the div as one object (display:block or table) it will be one. Since you are declaring it as a link, it will look for some type of link and when you put in a link inside the div it inherits the link and the div becomes one. look at my website on the bottom right column (sponsorizim/sponosors) and then you can look at my code.

    jeshil.com / jeshil.com/style1.css
     
    Erind, Dec 4, 2006 IP
    kkibak likes this.
  11. kkibak

    kkibak Peon

    Messages:
    1,083
    Likes Received:
    78
    Best Answers:
    0
    Trophy Points:
    0
    #11
    wow, very interesting, don't know why my css book says you can't do it :) ... going to test this out, thanks for the tip

    ill test this myself, but my first question is does this work if you include stuff in the div outside of anchor tags?
     
    kkibak, Dec 4, 2006 IP
  12. Erind

    Erind Peon

    Messages:
    663
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #12
    I don't think anything outside the anchor tags is used as a link. The div will automatically expunge the content outside the link tag. (like in table. if you do <table><tr><td>cell here</td>Expunged text<td>Cell 2 here</td></tr></table>, it will take the text in the middle that is not inside a cell, and put it in front of the table.)

    Since the text outside the anchor tags is not a link (which you declared in css), then it doesn't include it. It's like a mismatch. But the way around this is putting everything inside ananchor tag. Most of the time though,this is used like I have used it. Just for a link block that is easily clickable and some effects that won't interrupt the link (like padding and stuff).

    By the way, books don't have everything. There are ways around a lot of stuff that wasn't even meant to be when CSS was developed, especially when making stuff meet different Browser Expectations.
     
    Erind, Dec 4, 2006 IP
  13. kkibak

    kkibak Peon

    Messages:
    1,083
    Likes Received:
    78
    Best Answers:
    0
    Trophy Points:
    0
    #13
    hey Erin,

    Okay, in that case, unless I'm missing something, your method is the exact same as the one I replied with above except for the way you're recommending uses unncessary div tags--you can just make the anchors display as block and there's no need for divs.
     
    kkibak, Dec 4, 2006 IP
  14. CCD

    CCD Peon

    Messages:
    330
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #14
    In order for the page to validate, the <a> must be wrapped in a true block-level element, regardless of how you define your CSS (declaring anchors as display:block is not enough). So you've got to put it inside a <p> or <h?> or <div> etc...

    I seem to have needed to make lots of 'button' style links lately without wanting to resort totally to images, and found that <span> is very handy for formatting different parts of the link so it looks how I want. UVR is an example.

    If there's a more semantically correct way of doing it with current gen browsers, I've not found it yet :)
     
    CCD, Dec 4, 2006 IP
  15. kkibak

    kkibak Peon

    Messages:
    1,083
    Likes Received:
    78
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Good info (but with respect to the question above, the code I gave above still included all the a tags in a main div)
     
    kkibak, Dec 4, 2006 IP
  16. Erind

    Erind Peon

    Messages:
    663
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #16
    A main div has anchor codes and then some. For my site for example, I have div inside div inside div that get everything working with graphics and whatnot.

    If a block has to be used, it needs to be a true block not a link block. by definition a block is one object. A link can only be a link. (yes ways around it like always). Now I'm not CSS PRO which is why I mainly use spans, divs and paragraphs. There are a lot of ways of making stuff work. CSS Makes it easy (now that I learned it). Tables are a bit easier to think about because they don't need as many properties declared, but they aren't properly used in layouts.
     
    Erind, Dec 4, 2006 IP
  17. CCD

    CCD Peon

    Messages:
    330
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Yes, you did :) I only tried to answer your immediate response that the divs were unnecessary, in his code example they were needed.

    A more semantically correct way of making the menu would be to throw away the div and use an unordered list instead:

    
    <ul id="menu">
    <li><a href="#">menu item 1</a></li>
    <li><a href="#">menu item 2</a></li>
    ...
    </ul>
    
    Code (markup):
    I expect you know that, but in case someone reading isn't so familiar :)
     
    CCD, Dec 4, 2006 IP
    kkibak likes this.
  18. kkibak

    kkibak Peon

    Messages:
    1,083
    Likes Received:
    78
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Yeah, glad you mentioned that... I meant to say something, that's definitely the way to go w/this one.
     
    kkibak, Dec 4, 2006 IP