Meles

Cheers guys.I continued searching and managed to find the code I was thinking of, turns out it didn't work the way I remembered it.here's the link if you're interested in seeing it, It's a nice bit of code for a photo gallery nonetheless.http://www.cssplay.co.uk/articles/gallery/ I like Hadien's ideas, I will experiment with them and see if either suit my needs. I think having them in vertical columns will cause me problems later down the line, trying to keep them chronological when I plug in the data.Thanks for your thoughts, both

I've had a similar problem where links are below another layer. Have you got any z-index's configured in your CSS?

Hey guys, I'm attempting to create an unordered list with different sized entries that wrap around one another. I'm not sure how else to describe this so here are some images demonstrating.Here is what I have http://www.krashpalisades.co.uk/images/ul-list01.png and here is what I would like to achieve http://www.krashpalisades.co.uk/images/ul-list02.pngI remember seeing a demonstration of this for an image thumbnail gallery a few years ago, but I can't find a reference to it anywhere despite extensive searching.Here is some examples of the code I have so far. <div class="donor_plaque"> <ul> <li> <div class="donor_diamond"> </div> </li> <li> <div class="donor_stone"> </div> </li> <li> <div class="donor_iron"> </div> </li> <li> <div class="donor_iron"> </div> </li> <li> <div class="donor_gold"> </div> </li> <li> <div class="donor_stone"> </div> </li></ul></div> (Divs are empty in the example but will contain details of donors etc)Here is the CSS .donor_plaque li { border-radius: 5px; margin-right: 5px; margin-bottom: 8px; float:left; list-style-type: none; list-style-image: none; }.donor_stone { background: url('images/stone.png') center; font-weight:bold; border-radius: 5px; height:58px; width:128px; border-left: #C0C0C0 solid 2px; border-right: #000000 solid 2px; border-top: #C0C0C0 solid 2px; border-bottom: #000000 solid 2px; text-shadow: #FFFFFF 0.0em 0.1em 0.5em; } .donor_iron { background: url('images/iron_block.png') center; font-weight:bold; border-radius: 5px; height:58px; width:128px; border-left: #C0C0C0 solid 2px; border-right: #000000 solid 2px; border-top: #C0C0C0 solid 2px; border-bottom: #000000 solid 2px; text-shadow: #FFFFFF 0.0em 0.1em 0.5em; } .donor_gold { background: url('images/gold_block.png') center; font-weight:bold; border-radius: 5px; height:58px; width:128px; border-left: #FFEE00 solid 2px; border-right: #000000 solid 2px; border-top: #FFEE00 solid 2px; border-bottom: #000000 solid 2px; text-shadow: #FFFFFF 0.0em 0.1em 0.5em; } .donor_diamond { background: url('images/diamond_block.png') center; font-weight:bold; border-radius: 5px; height:128px; width:128px; border-left: #E0E0FF solid 2px; border-right: #000088 solid 2px; border-top: #E0E0FF solid 2px; border-bottom: #000088 solid 2px; text-shadow: #FFFFFF 0.0em 0.0em 0.2em; } If anyone has any ideas of how I can get the list to wrap correctly I would really appreciate the help.Cheers guys!