SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Creating Grid of Avatars?

    I am thinking of adding an "Avatar Gallery" to my website for those who wish to not upload a personal photo.

    From an HTML/CSS standpoint, how would I make it so that if my PHP grabbed 23 Avatars, that they would be displayed in a grid-like pattern? (e.g. 4 Rows of 5 Avatars, plus one Row of 3 Avatars)

    I guess the key concept here, if that the number of Avatars would be dynamic, so that means my HTML/CSS needs to be more flexible!

    Sincerely,


    Debbie

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Debbie,

    Are the avatars all the same height and width (or contained within an element of set height and width)?

    If so you could simply float them left and let them wrap as required within the constrains of a parent container with a width that allows 5 in a row.

    If the avatars are to be different widths and heights then you would probably need to use inline-block so that they wrap without snagging.

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    My God... He's still alive!!!!


    Quote Originally Posted by Paul O'B View Post
    Hi Debbie,

    Are the avatars all the same height and width (or contained within an element of set height and width)?
    Since I will be making them, yes, they can be. (Probably squares...)


    Quote Originally Posted by Paul O'B View Post
    If so you could simply float them left and let them wrap as required within the constrains of a parent container with a width that allows 5 in a row.

    If the avatars are to be different widths and heights then you would probably need to use inline-block so that they wrap without snagging.
    Hmmm... I'm very rusty on my CSS.

    So would I float the <img> tag?


    These would probably be going in the middle column of the "Fixed Left/Right, Flexible Middle Column" you helped me out with long ago.

    Not sure if that changes your answer.

    (BTW, I'm not hung up on 5-across, it was just an example.)

    Sincerely,


    Debbie

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'd do it something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    ul.avatars {
    	margin:0 auto;
    	padding:0;
    	list-style:none;
    	width:50%;
    	border:1px solid #000;
    	overflow:hidden;
    	zoom:1.0;
    }
    .avatars li, .avatars a { float:left; }
    .avatars li img {
    	display:inline;
    	vertical-align:middle;
    }
    .avatars li, .avatars a {
    	width:150px;/* whatever the max size is*/
    	height:150px;/* whatever the max size is*/
    	line-height:150px;/* match height */
    	text-align:center;
    }
    .avatars li {
    	margin:0 10px 10px;
    	border:1px solid red;
    }
    </style>
    </head>
    
    <body>
    <ul class="avatars">
    		<li><a href="#"><img src="http://placehold.it/30x30" alt="avatar" width="30" height="30"></a></li>
    		<li><a href="#"><img src="http://placehold.it/20x20" alt="avatar" width="20" height="20"></a></li>
    		<li><a href="#"><img src="http://placehold.it/30x30" alt="avatar" width="30" height="30"></a></li>
    		<li><a href="#"><img src="http://placehold.it/20x20" alt="avatar" width="20" height="20"></a></li>
    		<li><a href="#"><img src="http://placehold.it/30x30" alt="avatar" width="30" height="30"></a></li>
    		<li><a href="#"><img src="http://placehold.it/20x20" alt="avatar" width="20" height="20"></a></li>
    		<li><a href="#"><img src="http://placehold.it/20x20" alt="avatar" width="20" height="20"></a></li>
    		<li><a href="#"><img src="http://placehold.it/20x20" alt="avatar" width="20" height="20"></a></li>
    		<li><a href="#"><img src="http://placehold.it/40x40" alt="avatar" width="40" height="40"></a></li>
    		<li><a href="#"><img src="http://placehold.it/50x50" alt="avatar" width="50" height="50"></a></li>
    		<li><a href="#"><img src="http://placehold.it/60x60" alt="avatar" width="60" height="60"></a></li>
    		<li><a href="#"><img src="http://placehold.it/70x70" alt="avatar" width="70" height="70"></a></li>
    		<li><a href="#"><img src="http://placehold.it/80x80" alt="avatar" width="80" height="80"></a></li>
    		<li><a href="#"><img src="http://placehold.it/20x20" alt="avatar" width="20" height="20"></a></li>
    		<li><a href="#"><img src="http://placehold.it/20x20" alt="avatar" width="20" height="20"></a></li>
    		<li><a href="#"><img src="http://placehold.it/20x20" alt="avatar" width="20" height="20"></a></li>
    		<li><a href="#"><img src="http://placehold.it/40x40" alt="avatar" width="40" height="40"></a></li>
    		<li><a href="#"><img src="http://placehold.it/50x50" alt="avatar" width="50" height="50"></a></li>
    		<li><a href="#"><img src="http://placehold.it/60x60" alt="avatar" width="60" height="60"></a></li>
    		<li><a href="#"><img src="http://placehold.it/70x70" alt="avatar" width="70" height="70"></a></li>
    		<li><a href="#"><img src="http://placehold.it/80x80" alt="avatar" width="80" height="80"></a></li>
    </ul>
    </body>
    </html>
    That allows for different size avatars to be vertically centred within a max height and width.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    You never cease to amaze me!!!

    Some questions to better understand what you did...

    1.) Why did you use an Unordered List and List Items?

    Originally I was just going to Float the Images themselves...


    2.) What is the purpose of this again...
    Code CSS:
    	ul.avatars{
    		overflow: hidden;
    		zoom: 1.0;
    	}


    3.) Why do you have to Float both the li and a...
    Code CSS:
    	.avatars li,
    	.avatars a{
    		float: left;
    	}


    4.) What does the "inline" do here, and what would be the alternative? (Sorry, but I haven't played around with CSS in over a year... Been too busy with PHP!!)
    Code CSS:
    	.avatars li img{
    		display: inline;
    	}


    5.) What is the purpose of Line Height here... (When I think of Line Height, I think of paragraphs...)
    Code CSS:
    	.avatars li,
    	.avatars a{
    		width: 150px;						/* whatever the max size is*/
    		height: 150px;					/* whatever the max size is*/
    		line-height: 150px;			/* match height */
    		text-align: center;
    	}


    6.) While I appreciate the extra flexibility your design offers, don't you think it would be better to make all of my Avatars the same size (e.g. 75 x 75 pixels)?

    (Although your design would work great if this was instead for Thumbnails!!)


    Thanks for all of the help once again!!

    You always inspire me with all of the cool things you can do with CSS!!

    Sincerely,


    Debbie

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Paul,

    You never cease to amaze me!!!
    Good


    1.) Why did you use an Unordered List and List Items?
    When you have more than one of anything it is likely to be a list of things and so a ul is most appropriate (not always though). The benefit of a list is that it gives you a nice parent to use (the ul) and then the list elements to hold the content. It stops the page being all divs (divitus) (and when formatted reads much easier from a coders point of view).

    Menu items usually go in lists because they are a list of links and you have a list of avatars so use the most semantic element available.

    Originally I was just going to Float the Images themselves...
    I assumed that they were going to be links so you would need an anchor around them anyway and if you float the list and not the anchor then the anchor may not surround the image in some older browsers. So assuming you have an anchor around the image then it is historically bad for accessibility to have anchors next to each other separated only by white space (screen readers would read it as a sentence and not pause) hence the need for a parent which brings us right back to my list element.

    2.) What is the purpose of this again...
    Code CSS:
    	ul.avatars{
    		overflow: hidden;
    		zoom: 1.0;
    	}
    The overflow:hidden makes the UL contain the floats so that the parent extends around them otherwise the UL would collapse to zero height (zoom does the same thing for ie7 and under)

    3.) Why do you have to Float both the li and a...
    Code CSS:
    	.avatars li,
    	.avatars a{
    		float: left;
    	}
    Because they both need to be dimensioned and older versions of IE prefer lists and anchors to be floated rather than the anchor just display:block (otherwise they stretch the list to 100% of the available line length when in haslayout mode. It's not much of a problem these days but old habits die hard).

    4.) What does the "inline" do here, and what would be the alternative? (Sorry, but I haven't played around with CSS in over a year... Been too busy with PHP!!)
    Code CSS:
    	.avatars li img{
    		display: inline;
    	}
    It does nothing if the image is already inline (which is its default) but a lot of resets put images to block by default so that was just to make sure. The vertical-align:middle was to change the vertical alignment from the default which is baseline but vertical-align only applies to inline elements (and table-cells). If the image was block then the vertical-align would have no effect and the image would be stacked at the top of the box.

    5.) What is the purpose of Line Height here... (When I think of Line Height, I think of paragraphs...)
    Code CSS:
    	.avatars li,
    	.avatars a{
    		width: 150px;						/* whatever the max size is*/
    		height: 150px;					/* whatever the max size is*/
    		line-height: 150px;			/* match height */
    		text-align: center;
    	}
    It sets the line-height to the same as the height of the parent and thus non-wrapping content will be vertically centred in that space without any special consideration. The vertical-align:middle that I mentioned above ensures this.

    6.) While I appreciate the extra flexibility your design offers, don't you think it would be better to make all of my Avatars the same size (e.g. 75 x 75 pixels)?
    Yes if you are going to create images of the same size then you just need to float them all with no special considerations as there is no need for vertical alignment.

    I would do it more simply like this:
    Code:
    .avatars li,
    .avatars a,
    .avatars img {float:left}
    .avatars li {margin:0 10px 10px 0}
    You wouldn't need any dimensions as the image will use its intrinsic dimensions to control it all. I float all to avoid any whitespace around the images and inline elements.

    (Although your design would work great if this was instead for Thumbnails!!)
    That was the idea to provide a more versatile approach and cater for variances.

    Remember though if one of your images is 1px taller than the others then they will snag when they wrap.

    Thanks for all of the help once again!!
    You're welcome

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B,

    Just like in the "ol days", you've given me quite a bit to chew on!!!

    Thank you for all of awesome code and tips!!!

    Before I can use your code, however, I still need to figure out the "page design" for the new functionality that I'm trying to add. (Not sure if that would be better asked in a new thread or here? Probably a new thread!)

    Thanks a bunch!!

    Sincerely,


    Debbie


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
  •