CSS for images–help needed

Kathy_P
(@kathy_p)

21 years, 1 month ago

I use the Connections theme and the CSS that Lorelle provided here didn’t work for me. This is exactly how I have it in my stylesheet, at the end, after everything else:

img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; } img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }

Is there something wrong with my punctuation that I just can’t see? Do I have to associate it with a certain class or div? Here is how I use it in this post:

<img src='http://www.coldclimategardening.com/wp-content/ Iris_sibirica_Jaybird_at_Seneca_Hills_June_12_2004 _cropped.jpg' class='left' alt='deep blue Siberian iris' />

If you look at the post, you will see that the image is in the center of the page. For the other two images, which align correctly, I used the “old-fashioned” align=’left’ and align=’right’.

Another question: is there a way to specify a caption that will appear underneath the image, similar to what I have here?

And is there a way to have three images in a row, each with its own caption, like this? I used tables for these images when I first posted them in Movable Type, and they are broken since I’ve imported them into WordPress. I would like to redo them with CSS.

Three different questions, all related to displaying images with CSS. Thanks in advance if you can help with any of them.

Viewing 10 replies - 1 through 10 (of 10 total)

Lorelle
(@lorelle)

21 years, 1 month ago

Did you put in the last part of the instructions I gave you:

.right { float: right; } .left { float: left }

This is the instructions for floating the image to the left and right with the text wrapping around. The other helps the image to have padding around it. You need all four lines. Add this and try it again.

Also, your file names are really long and while it’s okay and not the end of the world, they may bork on some browsers and systems and they are very easy to screw up – trust me on that. The longer they are, the more likely they are to flip of the hinger the link. Also, please add a title to the description (I know its redundant) of these wonderful flowers as Firefox doesn’t pop up the ALT (though it’s there if the picture isn’t) like MSIE and these are too wonderful to lack the info for Firefox users. Like this:

<img src="ball.gif" class="left" alt="picture of ball" title="picture of ball" />

Having the title and the alt is plenty of caption, but there is a caption, if I remember right, feature coming up in CSS3….I’ll have to check. Otherwise, every image needs to go in a container with the text added. Here are a bunch of examples you might think about considering. Look at the reveal codes to grab the secrets.

Thread Starter Kathy_P
(@kathy_p)

21 years, 1 month ago

Thank you, Lorelle, that was the problem. Somehow I thought those last two lines applied to objects other than images.

I will be looking at your examples and learning what I can from them. But I have to admit, I had never thought of Alt and Title as captions. I’m confused about the difference between the two, besides the fact that alt doesn’t pop up like a tooltip in Firefox and title does. What is the purpose of each, as originally intended? Do either alt or title have a character limit, or certain characters that you shouldn’t use?

I have contributors to my blog that don’t know beans about html, but still want to upload photos. I am hoping to use CSS to make it easy for them to format the photos the way they want to. But I am also going to investigate plugins as well. The one thing I miss about Movable Type is that it would not only create a thumbnail for you, but it would create the html (and javascript?) code to make the thumbnail an image link to a larger image.

yamel
(@yamel)

21 years ago

Hi Kathy. I guess I’ll try to answer the alt and title differences. Alternate text (alt) is used primarily for image identification. This is standards compliant for Web users who either have images turned off or are visually impaired.

The title text is what the image is titled, or in this case, what holds a caption. Here’s an example:

<img src="image.jpg" alt="Picture of turtle sunning" title="I saw this little guy while canoeing in the Tampa River" />

And yes, there is a length restriction on the title tag. Let me elaborate… there seems to be no limit on how long the title text is, but only so much will show in the browser’s caption. However, I don’t know what the max number of characters is.

Hope this helps 🙂

Marc
(@marc)

21 years ago

Try this for captions:

http://www.mandarindesign.com/boxes.html#polaroid

Lorelle
(@lorelle)

21 years ago

Kathy_P: I don’t know how it can get easier than class="left" and class="right". That’s all they have to do. The rest is in the style sheet. Very simple and easy. Anything else just complicates things.

Thread Starter Kathy_P
(@kathy_p)

21 years ago

Thank you, Yamel. Your example makes it clearer. Marc, that is a good site for learning CSS tricks. Hopefully I can adapt some things there for my old table layouts, and the polaroid one does show how to include a caption. Lorelle, I wasn’t implying that assigning those two classes was difficult. If I installed a plugin, it would be so I could have thumbnails in the post that, when clicked, would open up a pop-up window with a larger image. That is something that MT automated for me, and I don’t even know how to do it on my own. But sometimes when looking at flowers, you want to zoom in and look at the details, so the ability to do that with images is a feature I’d like to have.

electrolund
(@electrolund)

20 years, 10 months ago

This is a great thread! Thanks for the great info. Incidentally, I seem to have trouble using relative links like this src="image.gif". I have to specify an absolute (full) path or it doesn’t work.

This has got to be a setup issue somewhere, right? Where does the relative path point to by default?

moshu
(@moshu)

20 years, 10 months ago

Relative path usually doesn’t work because of the “variable” URIs. Taking your example above, if I am on the main page of your blog, the path would be conbstructed as
www.example.com/blog/image.gif – but if I am viewing the post as a single post, the URI is changing to
www.example.com/blog/archives/2005/08/04/post-title/image.gif

electrolund
(@electrolund)

20 years, 10 months ago

Mmm, I see moshu. So, moral of the story, stick with absolutes? I’m not all that worried about it, except for what Lorelle said about some browsers having trouble with super long link names.

moshu
(@moshu)

20 years, 10 months ago

It shouldn’t be superlong. I mean the image link.
http://www.example.com/yourblog/image-folder/pic.jpg