CSS a set of Screenshots

Eraserhead · Jan 20, 2008

I have a set of screenshots for my D&D Program here and at the moment it uses a table for layout. I have images of different sizes, and it goes all weird if I use float:left and set the widths/heights of the div's manually.

The main problem with the table is that it doesn't look that good on the iPod Touch/iPhone, and obviously isn't using CSS. Is there a better solution?

angelwatt · Jan 20, 2008

For myself I'd go for something like,

HTML:

<ul id="screenshots">
  <li><p><a href="..."><img .../></a></p><p>caption</p></li>
  ... repeat ...
</ul>

Code:

#screenshots {
 position: relative;
}
#screenshots li {
 float: left;
 width: 50%;
}
#screenshots p {
 text-align: center;
}

I just wrote this off the top of my head so will likely take some tweaking to get the desired effect, but should get you there. If you need further assistance getting this idea to work just let me know.

Eraserhead · Jan 20, 2008

OK that looks really cool and my screenshots page has been updated. There is however one remaining issue. How do I force the copyright notice to sit right at the bottom of the page below the screenshots?

Photomax · Jan 20, 2008

I have not looked at your code but when you want something to be positioned at the bottom of floated content you need to "clear the floats."

Markup could look like this...

...
<div id="content".......>
</div>
<div class="clearfloats"></div>

CSS:

.clearfloats{clear: both}

Eraserhead · Jan 20, 2008

That works perfectly, thanks guys

.

Search

Search

CSS a set of Screenshots

Eraserhead

macrumors G4

angelwatt

Moderator emeritus

Eraserhead

macrumors G4

Photomax

macrumors regular

Eraserhead

macrumors G4

Our Staff