SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to properly align images in line?

    Another question from me regarding alignment of images. Please have a look on attached screenshot:
    alignimages.jpg

    As you can tell from it, images are not aligned properly, although titles are. I want to align images and it is not important for me if titles will be like images are now. I think I need to insert a CSS element after title and before image for this to work but I am most likely wrong.

    There are 3 columns on page. Here's how code looks approximately for 1st column where there are 3 pictures (each below previous) under title:

    [one_third]
    title
    linked image 1
    linked image 2
    linked image 3
    [/one_third]

    Appreciate you help!

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,819
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Try this:

    http://www.johns-jokes.com/downloads...ites/index.php

    Scroll to the bottom for the source code.

    I used the your image as a sprite.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I am confused about what you want. do you mean you want the TOP of the images to line up with each other, as in a table layout? I that the case , your really can't do that. the closest you might come will be to decide on a common height for the titles, preferably in ems, for scalability.
    Code:
    <div class="wrap">
    <div class="col">
    <h2>Title</h2>
    <div class='imgShell>
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
     </div>
    </div>
    </div>
    .col { float:left; width:33.333%;} 
    .wrap { overflow:hiden;} 
    . imgShell img { display:block;}
    . col  h2 {height: 4em;}

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2014
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John_Betong View Post
    Try this:

    http://www.johns-jokes.com/downloads...ites/index.php

    Scroll to the bottom for the source code.

    I used the your image as a sprite.
    Thanks but I need images separated because each will point to specific URL. What you made seems like combining of all images into one?

    Quote Originally Posted by dresden_phoenix View Post
    I am confused about what you want. do you mean you want the TOP of the images to line up with each other, as in a table layout? I that the case , your really can't do that. the closest you might come will be to decide on a common height for the titles, preferably in ems, for scalability.
    Code:
    <div class="wrap">
    <div class="col">
    <h2>Title</h2>
    <div class='imgShell>
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
     </div>
    </div>
    </div>
    .col { float:left; width:33.333%;} 
    .wrap { overflow:hiden;} 
    . imgShell img { display:block;}
    . col  h2 {height: 4em;}
    Thanks. You can see from my screenshot that titles are aligned well but images are not. That's what I want to do with images even if titles won't be aligned anymore like they were initially.

    So you mean I can't put images in table and align their tops and above that table put aligned titles?
    What if I use HTML positioning parameter example - top:35px right:50px? Would images be still properly placed if viewing in different browser like IE?

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Thanks. You can see from my screenshot that titles are aligned well but images are not. That's what I want to do with images even if titles won't be aligned anymore like they were initially.
    the reason for the misalignment on your images is because the height of all your titles are different. Remember , title 1 does NOT communicate its height to title2 , and so forth... You might be tempted to just make a ROW of titles, and the rows of images, but that might not make SEMANTIC since even if it allows you do you your layout.


    if the DATA is tabular , then using tables is ok. Remember that in web design what you MEAN TO SAY is way more important than how you are trying to make it look. (in other words don't put things in tables JUST because it makes laying out stuff 'easy') but from what I see what you are meaning to have is a list categories/sample pictures ( but i could be mistaken about the meaning of you content)

    What if I use HTML positioning parameter example - top:35px right:50px? Would images be still properly placed if viewing in different browser like IE?
    #1) you would need to add 'position:relative';
    #2) relative position only affects where the element is DISPLAYED but not how its size with the other elements ( in other words , you will have the same issue PLUS now you might have odd 'empty' gaps.


    perhaps this QUICK example while show what I mean:
    Code:
    <style>
    .col { float:left; width:33.333%; } 
    .wrap { overflow:hiden;} 
     .imgShell img { display:block;  width:350px; height:150px; margin:0 auto }
    .col  h2 {height: 3em;}
    .wrap {outline:1px solid red; overflow:hidden;}
    </style>
    <div class="wrap">
    <div class="col">
    <h2>Title one short title</h2>
    <div class='imgShell'>
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
     </div>
    </div>
    
    <div class="col">
    <h2>Title one short title a much much longer title </h2>
    <div class='imgShell'>
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
     </div>
    </div>
    
    <div class="col">
    <h2>Title one short title a much much longer title this one wraps more </h2>
    <div class='imgShell'>
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
     </div>
    </div>
    </div>
    hope that helps

  6. #6
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,819
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by TechnicGeek View Post
    Thanks but I need images separated because each will point to specific URL. What you made seems like combining of all images into one?
    Updated using images and links:

    http://www.johns-jokes.com/downloads...ites/index.php



    Also added the page suggested by @dresden_phoenix;
    Last edited by John_Betong; Mar 29, 2014 at 08:59. Reason: formatting

  7. #7
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can see this link. It provide best example to align images in inline

    http://stackoverflow.com/questions/7...age-inside-div

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by robertsullivan View Post
    You can see this link. It provide best example to align images in inline

    http://stackoverflow.com/questions/7...age-inside-div
    I don't think that really addresses the original question and is a very old technique that is better documented here anyway .


Tags for this Thread

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
  •