SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning My Images Consistently

    Hi,

    i am currently building a photo gallery for myself which is in my local host so not on the web yet. Right now i'm having trouble trying to keep my images looking consistent in terms of the way it is positioned. When i click on the 'Home' link it displays all my pictures nicely, all aligned correctly to how i want it given the the image shak link: http://img197.imageshack.us/img197/7...viewlinkok.jpg, even when i click on my second link, 'Shanghai Zoo', http://img101.imageshack.us/img101/8...izoolinkok.jpg, it seems fine.

    However, when i click on my last link, 'Cheng Huang Temple' it does not look very consistent compared to the others, especially to my home link as shown here, http://img101.imageshack.us/img101/2...plelinknot.jpg. The current version of IE i have is version 7, but i am also using FF and Safari and the problem looks the same on all 3 versions of browsers.

    Code CSS:
    .imageswrapper
    {
        margin: 0;
        padding: 0;
        border: 1px solid #330066;
        margin-left:auto;
        margin-right:auto;
        clear: both;
        /** height: 1200px; **/
        /** width: 900px; **/
        overflow: hidden;
        text-align: center;
        float: left;
    }
     
     
    .thumb
    {
     
        float: left;
        width: 150px;  /** needed so that the thumb img stays the same **/
        padding: 10px 15px;  /** top/bottom value is 10px and right and left is 15px*/
        margin: auto;
        text-align:center;
        overflow:hidden;
        background:#ffffcc;
        margin:3px;
        border:1px solid red;
     
     
        /** margin: 3px; **/
        /** margin-left:auto;
        margin-right:auto;    **/
     
        /** display:-moz-inline-box;  //FF2 & under 
        display: inline-block;
        margin-top:20px;
        margin-bottom:20px;
        margin-right:20px;
        margin-left:20px;
        border: 1px solid #ff8000;
        padding: 0px;
        height: auto; 
        text-align: center;
        float: left;    
        **/
     
    }
     
    .thumb img
    {
       display: inline;
        margin: 5px;
        border: 1px solid red;
        padding: 0px;
     
    }
     
    .thumbdesc
    {
        text-align: center;
         border: 1px solid black;
         padding: 5px;
    }

    I know that it has to do something with my padding and margins, but as you can see from my commented css code, i just can't seem to get it near to consistent on my last link. I've been playing around this for a bit but it just isn't giving what i want. If anybody can assist or help, that would be greatful.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Have a look at this article, as it's very relevant to what you are trying to do, but the look of it:

    http://gtwebdev.com/workshop/layout/...ck-gallery.php

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Setting a height on each of those blocks is the simplest way to get those to line up. You will just need to ensure the titles aren't excessively long or use overflow to add a scroll bar if necessary.

    Code:
    #gallery li {
      float: left;
      height: 300px;
      width: 200px;
      overflow: auto;
    }
    Is one way to do it - Not fool proof but may be what you are wanting.

    Or a combination of inline-block and min-height as discussed above.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •