Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    image formatting question

    two things i would like to achieve:

    1) center the four images in the window so that there is equal space on both sides within white area

    2) have a small white space gap in between each photo

    Thanks.
    David

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    1) center the four images in the window so that there is equal space on both sides within white area
    Add a style of text-align:center; to its container element.
    2) have a small white space gap in between each photo
    Add sufficient padding-left and/or padding-right to the images.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i made the images smaller for testing purposes.
    i have text-align:center in my mycenter style. but the photos do not center up in the white box. did i put text-align:center in the wrong place?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    did i put text-align:center in the wrong place?
    Who knows? Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Again, that <font> has no purpose there, and should be avoided!

    Instead add a div to wrap your images like
    Code:
    <div id="main" class="center">
    
    <a href="sigalbhdc.html"><img width="120" alt="" src="Goldringthumb4.jpg" class="mycenter"/></a>
    
    <a href="beckerbhdc.html"><img width="120" alt="" src="Beckerthumb4.jpg" class="mycenter"/></a>  
     
    <a href="alvarezbhdc.html"><img width="120" alt="" src="Pamthumb4.jpg" class="mycenter"/></a>
    
    <a href="fahimbhdc.html"><img width="120" alt="" src="Sudithumb4.jpg" class="mycenter"/></a>
    </div>
    , and then add
    Code:
    div.center{
    text-align:center;
    }
    into your CSS
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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