SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    layout of several small images w/in a div

    Howdy all!
    Would like some advice

    I am experimenting w/div alignment.
    for something like this.
    HTML Code:
    <div id="column1">
      <p>Column column1</p>
      <p>some fancy text...hello. hello hello</p>
      
      <div id="guests">
      <img class="guestSpot" src="tinyPlaceHolders/tph01.jpg" />
      <img class="guestSpot" src="tinyPlaceHolders/tph02.jpg" />
      <img class="guestSpot" src="tinyPlaceHolders/tph03.jpg" />
      <img class="guestSpot" src="tinyPlaceHolders/tph04.jpg" />
      <img class="guestSpot" src="tinyPlaceHolders/tph05.jpg" />
      <img class="guestSpot" src="tinyPlaceHolders/tph06.jpg" />
      <img class="guestSpot" src="tinyPlaceHolders/tph07.jpg" />
      <img class="guestSpot" src="tinyPlaceHolders/tph08.jpg" />
      <img class="guestSpot" src="tinyPlaceHolders/tph09.jpg" />
      <img class="guestSpot" src="tinyPlaceHolders/tph10.jpg" />
      <img class="guestSpot" src="tinyPlaceHolders/tph11.jpg" />
      <img class="guestSpot" src="tinyPlaceHolders/tph12.jpg" />
      <img class="guestSpot" src="tinyPlaceHolders/tph13.jpg" />
      <img class="guestSpot" src="tinyPlaceHolders/tph14.jpg" />
    
      </div> <!--guests-->
    </div> <!--column1-->
    and the respective css

    Code:
    #column1 {
            float: left; 
            background: #ccc;
    		margin: 10px 5px;
            width: 150px;
    		min-height:500px;
    		border-left:medium #666666 solid;
        }
    
    #guests{
    margin:auto;
    }
    .guestSpot{
    
    padding: 2px 2px;
    }
    Is there a css way to place three or four or whatever per row. Or would a table be the only way?
    Also when it comes to centering the images. setting auto on the side margins either on the containing div or images themselves does not seem to work.

    Thanks
    D

  2. #2
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    to be specific this is the site I am playing with.
    Just exercising. And am really want to focus on aligning multiple images.

    http://www.thebigmeow.us/

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    Is there a css way to place three or four or whatever per row.
    Yup, use a <ul>, give the <li>s a width and height and float them. Definitely don't use a table.

    Regarding the centering, you need to give the element a width for it to center.

  4. #4
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    good point! Forgot about the <ul>
    will go & try it out.
    thanks
    D

  5. #5
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,824
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    @pdxSherpa ;

    Play about with this script:

    HTML Code:
    <style type='text/css'>
      #jb {text-align:center; width:555px; margin:3em auto; border:solid 1px #f00;  /*padding:0 0 0 4em */}
      #jb img {float:left; max-width:30%; margin:1em }
    </style>
    
    <div id='jb'>
      <img src='http://subs.localhost/thumb/img_thumb.jpg' alt='#' />
      <img src='http://subs.localhost/thumb/img_thumb.jpg' alt='#' />
      <img src='http://subs.localhost/thumb/img_thumb.jpg' alt='#' />
      <img src='http://subs.localhost/thumb/img_thumb.jpg' alt='#' />
      <img src='http://subs.localhost/thumb/img_thumb.jpg' alt='#' />
      <img src='http://subs.localhost/thumb/img_thumb.jpg' alt='#' />
    </div>
    		
    Last edited by John_Betong; Oct 24, 2012 at 22:57. Reason: changed wrapper from PHP to HTML

  6. #6
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    K thanks John, will give it a shot as well. But so far for the record I am fairly clue less about php.
    Thank you

  7. #7
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,824
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    K thanks John, will give it a shot as well. But so far for the record I am fairly clue less about php.
    Thank you
    Whoops, sorry about the PHP wrapper I use it so that the HTML script is formatted OK

    edit: Managed to change the post before the time limit clicked in

  8. #8
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    so just I get this better:
    1. would you folks be against tables even for something this simple?
    2. From what i understand tables are still good for data (which of course could be up to interpretation) just don't use the for the entire layout of the site.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    would you folks be against tables even for something this simple?
    Yes.


    From what i understand tables are still good for data (which of course could be up to interpretation) just don't use the for the entire layout of the site.
    Yes.

    Tables are for data that need to be arranged in columns and rows to be meaningful. The table structure is intended to preserve these relationships between the various data, and thus are unsuitable (from a semantic point of view) for whole page layouts.

    What you are creating in this case is really a list of icons or avatars. Hence the preference for a list.

  10. #10
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you Ralph...
    appreciate the advice!


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
  •