Div into a link, stylized (Edit: "Thumbnail grid using UL")

Discussion in 'Web Design and Development' started by MindBrain, Jul 19, 2008.

  1. MindBrain macrumors regular

    Joined:
    Jun 8, 2007
    #1
    Hello is it possible to make a div into a link that I can stylize? Such as, add a border with a color and then use a:hover to have it change colors when it is rolled over? Is this possible, how would you recommend going about it? Thanks
     
  2. bootedbear macrumors 6502

    bootedbear

    Joined:
    Sep 13, 2004
    Location:
    Austin, TX
    #2
    div:hover

    but that won't work in IE6. If you want it to work in IE6 you'll have to do it with script.
     
  3. cromwell64 macrumors regular

    Joined:
    Jun 30, 2008
    #3
    You can make any link a block level element and style it as if it were a div, adding any hover effects you want and it will work in ie6. If it is a link, then it should be marked up as a link, and not as a div. You can style it the same either way.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    An alternative to cromwell64's solution, you can set the link to display:block and height and width to 100%;
     
  5. cromwell64 macrumors regular

    Joined:
    Jun 30, 2008
    #5
    That was my solution.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Well mine assumed the div was kept, whereas yours seemed to imply taking it away. Subtle difference.
     
  7. cromwell64 macrumors regular

    Joined:
    Jun 30, 2008
    #7
    oh, fair enough. but setting display:block on a div is a little redundant though because divs are block level elements by default.
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    Agreed, but not knowing the full context of the page I just wanted to throw it out there in case the poster had a requirement to keep it. I've done similar things where I needed to keep the block element (li in my case) so I couldn't get rid of it. If XHTML 2 ever gets implemented we'll be able to apply href attributes directly to div tags, which creates even more possibilities.
     
  9. cromwell64 macrumors regular

    Joined:
    Jun 30, 2008
    #9
    ha! at the pace their moving we'll see xhtml 2 in about ten or twenty years. maybe never if microsoft is able to continue subverting the standardization process for the languages.
     
  10. MindBrain thread starter macrumors regular

    Joined:
    Jun 8, 2007
    #10
    Thanks ya'll I've been working with setting the image links to block level and styling them like that. Using a table for this instead as well since it's a collection of thumbnails. All those divs (would be about 26) would make for a bloated css file too. Thanks!
     
  11. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #11
    I think this is a good example of when providing source code would be instrumental in getting good help. From the above, it doesn't sound like you have the fullest grasp on the proper markup and css side of things, and if you posted your code you could get constructive and directional criticism that you could learn from.

    Now it sounds like you're going to use tables to layout non-tabular data, which sometimes can be done in a pinch (or not ever), but in your case I feel by not supplying the code you were working with you are setting off in a poor direction.

    When you say "all those divs" and "bloated css" it sounds like you might be confused about either the implementation of the previous methods described, and or proper (semantic) html markup as it applies to this situation. If it's a series of thumbnails that link to larger pictures, you shouldn't put them in individual divs to begin with. They are already in an img tag, and you should consider placing them in an unordered list as list items. After all they are an unordered list of links to full images. Just give the ul a class or specific id and you will then have li, a, and img tags you can style without adding useless div tags around each one.
     
  12. cromwell64 macrumors regular

    Joined:
    Jun 30, 2008
  13. MindBrain thread starter macrumors regular

    Joined:
    Jun 8, 2007
    #13
    I'm just making a grid of thumbnails, each with a border that changes color when hovered. When clicked it goes to another page with a full size image. Will I be able to layout the ul as a grid? There is about 3 columns and 5 rows. Using a table seems to work good after I set display: block; to "table a" and then set the borders and hover and stuff. I'd rather not use a table though to see how it's done with just css.
     
  14. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #14
    Yup, you can, I've done it before with a photo gallery (view this page with JavaScript disabled to see it). Here's some sample CSS to get you started.
    Code:
    #gallery { /* assuming you have <ul id="gallery"> */
     list-style: none;
    }
    #gallery li {
     display: inline; float: left;
     width: 33%;
    }
    You can mess with margins and padding to get the exact look you want.
     
  15. MindBrain thread starter macrumors regular

    Joined:
    Jun 8, 2007
    #15
    Awesome I got it working ok thanks to looking at your code. Although I'm not sure I fully understand it all. I saw that without float: left; when I set margin it would only affect horizontal spacing. How can I understand whats going on here?

    So I used line-height; in the #div li { to adjust the vertical spacing. But IE 6 completely ignore the line-height setting here. Firefox and Opera adjust it perfectly. Any way to make IE work right? Or maybe a way to make IE illegal to use? (jk, well not really)

    And the display: inline; on the #div li { wondering why when I take it out I get the list bullets back, seeming to undo the list-style: none; of #div ul {
    Thanks!
     
  16. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #16
    It looks like I'm using text-align:center to get things aligned in part, then also using a bottom margin to create vertical spacing. Line-height probably won't have much effect.

    For some browsers you'll also need the list-style:none on the li as well, I forgot about that. The inline portion just changes some of the properties for the tag. li is usually a block element so has a new line at the beginning and end of the tag, which is why bullets are on separate lines, by making it inline those new lines go away and lets it keep flowing on the same line. The bullets just kind of disappear sometimes when it's inline, though not always.

    If you continue to have issues it may help to see your code, or if you have the page uploaded somewhere that you can provide a link to I could offer more specific advice.
     
  17. MindBrain thread starter macrumors regular

    Joined:
    Jun 8, 2007
    #17
    Hey do you know how I can align the <ul> to center, left, or right in the <div> tag it's in?
    I tried <div id="gallery" align="center"> but it had no effect. Any other way?
     
  18. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #18
    You can try margin:0 auto; on the ul. You might be able to use text-align on the div, ul, or li depending on the code setup. Do you have any code (HTML and CSS) you can show?
     

Share This Page