Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Aug 2006
    Location
    Sheffield, UK
    Posts
    24
    Member #
    13792
    Hi guys,

    Does anyone have any suggestions or recommended ways of spacing a series of images on a site using XHTML and CSS?

    I've managed to acheive the look I'm hoping for but I've used this a lot in sites and I wonder what the best way of doing it is everytime. I'm fairly sure there's an easier/better way than I'm doing.

    You can see the effect here - the three pictures at the bottom of the page. Does anyone have any suggestions as to how they would insert those as HTML, and what to do with the CSS to get three images evenly placed from the center of the page?

    I built this a while ago but it looks like I've just floated them all to the right and then given them all a right margin to push them apart.

    The HTML for the pictures is just:
    HTML Code:
    <img class="areaMap" src="images/area_map.jpg" alt="area map" />
    <img class="garageExt" src="images/garage_ext1.jpg" alt="garage exterior" />
    <img class="garageExt2" src="images/garage_ext2.jpg" alt="garage doorway" />
    Code:
    .areaMap, .garageExt, .garageExt2 {
        float: right;
        margin: 2em 4.9em 4em 0;
    }
    As I said, it works. It just doesn't seem a particularly good way of doing it. So, any ideas?!

  2.  

  3. #2
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Generally you would put the images in a div, then add the image to that div in your css.
    ex:

    css
    Code:
    /*set your rules to position div to what you need */
    #this_div { 
    width: 760px;
    margin: 0 auto;
    } 
    
    
    /* set rules for your images */
    #this_div img {
    float:left;
    margin: 2em 4.9em 4em 0;
    }
    markup
    Code:
    <div id="this_div">
    <img src="pic.jpg" alt="picture"/>
    <img src="pic.jpg" alt="picture"/>
    <img src="pic.jpg" alt="picture"/>
    </div>
    The css will affect only those images in "this_div" and nowhere else.
    For me personally, I don't like adding classes to the img tag, although I think it is semantic. I tried looking that up but didn't find much. Maybe someone knows the answer to that.

    By putting the img tags in a div it will give you nice control over positioning those images as a group, then tweak the position of the images inside that div for fine tuning.

    That's my way of doing and I'm sure others have their way too.

  4. #3
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    for a gallery look you use unordered lists and list items.
    Im writing a tutorial on this and will post the link for you soon

  5. #4

  6. #5
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Nice... That's the way to get a table like look without all the bs markup. Also positioning that p tag for the captions is what scares designers away from using a ul list for a gallery. Well done!

  7. #6
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Thanks

    Its a great technique, i wish i remember who taught me it.
    I think it might have been shadowfiend


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:56 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com