Are there any tutorials out there on how to layout photos? I'm not uploading directly to TypePad, I'm trying to link everything from my Flickr page.
I spent several hours today trying to get a single posting laid out, and still wasn't able to finish. Any advice is GREATLY appreciated.
Here is the post in question.
This Post was written by s'kat from s'kat and the food.
10 comments:
I should add that when I was working at home last night, it was on Firefox. Today I'm at work and viewing it through IE, and its looking better.
I believe the culprit is the "float: right" in the style= declaration for each img element. The automatic CSS styles insertion is the somewhat annoying thing about flickr and their 'blog this' feature. Instead of using 'blog this', when I insert flickr images in my blogs (the food one is Typepad) I go to the image page, All Sizes, select the size I want, then copy-paste the "1. . Copy and paste this HTML into your webpage:" code.
Oh, and to fix the images you already have there, just take out the whole style="....." part for each img.
I'm not sure how you want them to layout, but you're getting into the deep end when floating images.
Perhaps the tag you're looking for is <br clear="all"> (or in some cases instead of all, it's left or right).
This 'floaturial' will teach you the basics of floating:
http://css.maxdesign.com.au/floatutorial/
Well, no wonder I am feeling so floaty today. Thanks for the input, it definitely rings a bell... I'll go over the floatorial at lunch, and see if I can fix it through flickr this eve.
*crosses fingers*
Okay, I'm a little unclear from the floatorial... is there anything that would break it down for someone who just doesn't 'get' css stuff? I'm still uncertain as to where I need to instert the 'float' at.
Aren't these blog services supposed to make this sort of thing easy, lol?
To limit it to what flickr's float: declarations are doing, if it says float: left, the image will be to the left of the container column, and the text will flow to the right of that. If it's float: right then the image will be on the right and the text flows to the left of it.
The problem occurs if you don't have enough text to flow all around the images and the images start to try to float against each other - which is what you are experiencing. (On this post on my site, you'll see small images with float: left specified being used. They have enough text around them to pin them in place as it were.)
So- the solution is to either make sure you have enough text to flow all around the images, or -
If you just want your images to be displayed in a simple column, left-aligned, one by one (simplest solution) then just delete the whole float: right; or float: left; part in the style declaration, or indeed the whole style decoration.
That sounds almost sensical. Thank you, Maki!
thanks for shearing nice blog.
Nice post . keep up the good work
Post a Comment