Results 1 to 7 of 7

Thread: Spacing in horizontally-aligned array of images

  1. #1
    Join Date
    Feb 2006
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Spacing in horizontally-aligned array of images

    Hello

    I have a 'test' site here:

    http://www.proofreading4students.com/socialNet.html

    that shows five images aligned horizontally and centered at the bottom of the page.

    The HTML is as follows:

    Code:
    <div id="wrapper">
    
    
    </div>
    <div class="img">
    
    
            <a target="_blank" href="newWindow.html"><img src="twitter.jpg" alt="Twitter" height="44" width="39"></a>
    	<a target="_blank" href="newWindow1.html"><img src="digg-button.jpg" alt="Digg" height="44" width="44"></a>
    	<a target="_blank" href="newWindow2.html"><img src="delicious1.jpg" alt="Delicious" height="44" width="44"></a>
    	<a target="_blank" href="newWindows3.html"><img src="face1.jpg" alt="Facebook" height="44" width="44"></a>
    	<a target="_blank" href="newWindows4.html"><img src="email-icon.jpg" alt="Email us!" height="44" width="43"></a>
    
    
    </div>
    and the external CSS looks like this:

    Code:
    html,body{
    height:100%;
    }
    
    
    #wrapper{margin: 0 auto; height:100%; position:relative;margin-bottom: -50px;}
    
    .img {
    width:240px;
    margin:0 auto;
    }
    
    a img {
    border:none;
    }
    I would like to space the images out a little (but keep them horizontally aligned and centered at the bottom of the Web page).

    How would I do that, please?

    Thanks

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Add
    Code:
    div.img img { margin: 5px; }

  3. #3
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    612
    Thanks
    46
    Thanked 32 Times in 32 Posts

    Default

    I used an 1px image and spaced them out as 10px .

    http://www.web-user.info/test/imgtest.html

    That is one way it can be done
    Thanks,

    Bud

  4. The Following User Says Thank You to ajfmrf For This Useful Post:

    Quetzal (03-29-2012)

  5. #4
    Join Date
    Feb 2006
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hello Nile

    Thanks for your reply.

    Do you mean as in this:

    Code:
    #wrapper{margin: 0 auto; height:100%; position:relative;margin-bottom: -50px;}
    
    
    .img {
    width:240px;
    margin:0 auto;
    }
    
    a img {
    border:none;
    }
    
    div.img img { margin: 5px; }
    When I do that, I only get four images aligned horizontally (the fifth image is positioned under the first image in the row above it).

    Thanks

  6. #5
    Join Date
    Feb 2006
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hello Bud

    How did you do that!?

    Just what I wanted - many thanks.

  7. #6
    Join Date
    Mar 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

  8. #7
    Join Date
    Feb 2006
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hello

    I have actually tried this through my server

    http://www.proofreading4students.com/socialNet.html

    and in IE9 and Safari, I can see the four images aligned, but not the fifth one.

    I must be doing something wrong

    Thanks

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
  •