CSS a set of Screenshots

Discussion in 'Web Design and Development' started by Eraserhead, Jan 20, 2008.

  1. Eraserhead macrumors G4

    Eraserhead

    Joined:
    Nov 3, 2005
    Location:
    UK
    #1
    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?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. Eraserhead thread starter macrumors G4

    Eraserhead

    Joined:
    Nov 3, 2005
    Location:
    UK
    #3
    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?
     
  4. Photomax macrumors regular

    Joined:
    Nov 26, 2007
    Location:
    Seattle
    #4
    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}
     
  5. Eraserhead thread starter macrumors G4

    Eraserhead

    Joined:
    Nov 3, 2005
    Location:
    UK

Share This Page