Want Side-by-Side Thumbnails

HTML & CSS
1

I want to place a series of Thumbnails - each representing a Recipient - side-by-side across the page.

Each Thumbnail is wrapped in an Anchor Tag and with a Title, and looks like this…

(screenshot)

Unfortunately, this is what I am getting when I run my PHP script…

(screenshot)

Here is a snippet of my HTML…


<a href=''>username1<br />
	<img src='/uploads/NoImageAvailable_100x76.png' width='80' />
</a>

<a href=''>username2<br />
	<img src='/uploads/NoImageAvailable_100x76.png' width='80' />
</a>

<a href=''>username3<br />
	<img src='/uploads/PhotoPendingApproval_100x76.png' width='80' />
</a>

The only relevant Styles I can find in FireBug are these…


#viewPM img {
    display: inline-block;
    padding: 0 0 5px;
}

a img {
    text-decoration: underline;
}

img {
    border: medium none;
    font: 12px/16px normal,Arial,Verdana,sans-serif;
}

The above Thumbnails are inside a plain-vanilla parent container, so nothing to really look at there…

I am pretty sure this has something to do with the Images hanging on the Text, or visa-versa. (And if that is the problem, yeah, I know we have discussed this several times before, but since I don’t do CSS all day like a lot of you, I forget…) :blush:

Here is hoping this issue isn’t too hard to track down and fix… :frowning:

Sincerely,

Debbie

2

I didn’t see the screenshots (“Attachments Pending Approval”), but I guess the links <a> have to get the inline-block, and not the images (images are inline by default).

BTW: Would like to see the {font: 12px/16px normal,Arial,Verdana,sans-serif;} of an image. :wink:

3

It would be better if you could post a full HTML/CSS example of what you are doing. There’s no “viewPM” ID in your HTML, so we don’t know what it refers to. Please take a look at this thread for guidance on posting an example we can help with:

4

Looks like you need this but check Francky’s example first.


#viewPM a{display:inline-block;text-align:center;}
5

Yep, that appears to be where I screwed up.

Good catch - especially without a screenshot!

Thanks!!

Debbie

6

Yep, good guess +1. :wink:
But maybe some users have a longer username than the width of the thumbnail, then the design isn’t equidistant anymore:

This can be solved with a fixed width for the <a>'s, combined with the word-wrap property:

a {
	display: inline-block;
	width: 80px;
	margin-right: 10px;
	text-align: center;
	word-wrap: break-word;
	}
a img { /* no fat blue border in IE7 */
	border: none;
	}
7

What I decided to do in that scenario was to Left-Align the Username and Thumbnail, and let the “VeryVeryLongUsername” trail off to the right.

It creates uneven gaps, but I think it looks as good if not better than your idea. (Although I like what you did, and commend you for thinking ahead!!)

My username can be between like 8 and 30 characters, so I don’t think this will be a huge issue.

In the end, this is a good example of where “real world usage” will help me determine what can be done to improve things!! (Without any real experience, anything I do is purely conjecture…)

Sincerely,

Debbie

P.S. Is that your naked thumb you’re splashing around on the Internet?! :lol: