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…
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…
.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!!)
.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…)
.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:
.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!!) :agree:
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