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
Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Div into a link, stylized (Edit: "Thumbnail grid using UL")
- Thread starter MindBrain
- Start date
- Sort by reaction score
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.
but that won't work in IE6. If you want it to work in IE6 you'll have to do it with script.
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.
Well mine assumed the div was kept, whereas yours seemed to imply taking it away. Subtle difference.
oh, fair enough. but setting display:block on a div is a little redundant though because divs are block level elements by default.
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.
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.
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!
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.
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.
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%;
}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!
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.
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?
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?