CSS Wallpaper Layout - Suggestions about how to do this

[aburningflame]

Hi Im trying to sort of get a wallpaper gallery going.
However, Im having problems coding some of the CSS, its not behaving the way i expect.

Example

<!--This is a row with 3 wallpapers-->
<div class="wallpaperRow">
     <!--this is 1 wallpaper box-->
     <div class="wallpaper">
           <img src="test.jpg" class="wallpaperThumb">
     </div>
     <div class="wallpaper">
           <img src="test.jpg" class="wallpaperThumb">
     </div>
     <div class="wallpaper">
           <img src="test.jpg" class="wallpaperThumb">
     </div>
</div>

CSS:
.wallpaperRow{
width: 800px;
height: 250px;
}

.wallpaper{
width: 250px;
height: 250px;
}

.wallpaperThumb{
width: 200px;
height: 200px;
}

This is JUST an example. Im not asking about the code, Im asking about how to go about coding it
Im not quite sure if i should use a
wallpaper row DIV, then 3 inner divs
If i do this, they dont display next to each other, they display vertically.
Ive tried setting the wallpaper div to display: inline;
Ive also tried using span tags instead, but i get undesired effects.
The span tag doesnt stretch to accomodate the image.

Should i use inner divs, or span tags or p tags or ?

[Shadowfiend]

The best approach in this case is actually a list. What you are essentially doing is listing wallpapers. Thus, you mark it up semantically (i.e., meaningfully) as a list. Then you can use CSS to make it look like what you want. Specifically, the HTML for what you're doing would look like:

<ul class="wallpapers">
    <li><img src="test.jpg" class="thumb" /></li>
    <li><img src="test2.jpg" class="thumb" /></li>
    <li><img src="test3.jpg" class="thumb" /></li>
</ul>

Then, your CSS:

ul.wallpapers
{
    width: 800px;

    margin: 0;
    padding: 0;

    overflow: hidden;
}

ul.wallpapers li
{
    display: block;

    float: left;

    margin: 0 0 0 8px;
    padding: 25px;
}

ul.wallpapers li img.thumb
{
    width: 200px;
    height: 200px;
}

This sets up the ul element to act as the container for its lis with width 800px. It also zeros out padding and margin to counteract any browser defaults. Next, it sets every li to display as a block, meaning that it can take width and height directives, and, generally speaking, lives on its own line and contains elements inside it. We also float the lis left. This basically pulls the li out of the page flow that it would usually be in (because of the block display, this would be one li per line) and pushes it off to the left. Since every li will be like this, they will be aligned next to each other. We also set the padding to 25px to give the thumbs 25px of space on each side, and set the left margin to 8px which should space the lis out enough that they're evenly spaced through the 800px width of their container. Finally, we set the image to have its same width and height.

The 8px left margin may need some tweaking -- you'll have to look at it and figure out if it works for you. This way, you also get automatic rows of three just because of the width and when they wrap. As a side note, the overflow: hidden is to get around the issue that, when you float elements, they are pulled out of the flow. This means that typically their containing element (in this case the ul) collapses to a zero or near-zero height. overflow: hidden makes the containing element expand to contain the lis, meaning that any non-floating content after the list will still flow correctly.

[aburningflame]

Hey man.
This worked AMAZINGLY.

Originally I had
1 css div class = wallpaperRow
3 css div classes = wallpaper1, wallpaper2, wallpaper3
All absolutely positioned, floated left, etc etc

Quite a mess of PHP code to detect every 3rd item and end the appropriate wallpaper row div, more php code to check if the item being printed was the last item, to end the wallpaperrow div early.

You reduced both my CSS and my PHP quite a bit THANK YOU

http://alldeathnote.com/wallpapers.php
Heres the final result, all images, image text, links, etc
are pulled from a database

Thanks shadow, youre awesome

[Shadowfiend]

Death Note!! Er.. I mean... Nice to know it helped :aimangel:

[aburningflame]

haha you like death note too?!?!?
xD

im excited about the site, im trying to include more n more content and the way
i have this wallpaper section setup is amazing

just plug in urls, link, linktext, imgtext, and boom
already have it generating the pg links based on how many wallpapers are there,
already have variables to limit certain # of wallpapers per page


and already made $1.00 off adsense !!!!!!!!! Lol
you got msn? maybe we could chat for a bit

[Shadowfiend]

Unfortunately I don't have much time to chat these days. Product going beta very soon, needs to be feature complete this weekend... Anyway, keep us updated on how the site goes