The pukka way to do this is to float the image.
Well I can’t go along with that. valign has long been deprecated plus separated CSS is the way to go.
the hspace and vspace tags will work, but the problem is that it puts that space on BOTH sides, not just the side where text butts up against it.
“valign has long been deprecated plus separated CSS is the way to go.”
I didnt know that – thanks!
So what’s the code to float the image in css: just specifying space at the side of an image??
In your example above, you have:
<img src=”http://link.to.the.picture” style=”padding:3px; margin:0px” border=”1″ align=”right”>
How do you get WP to put in: style=”padding:3px; margin:0px”
Ive seen this in the source of other WP sites and for the lif eof me i cant figure out how to do that
thanx
You would add something like this to your CSS:
#photo
align: left | right | center
padding: 0 0 0 0 (If four values are given, they apply to top, right, bottom, and left padding, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.)
margin: 0 0 0 0 (If four values are given, they apply to top, right, bottom, and left margin, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.)
border: (The border property can only set all four borders; only one border width and border style may be given. To give different values to an element’s four borders, an author must use one or more of the border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width, or border-left-width properties.)
In your case, margin is the important one to pay attention to, as it determines the amount of space between itself and the next bit of content.
After editing the CSS and defining a name for the element you’re going to use, you can add this to your template.
<img src=’http://link.to.your.picture’ id=’photo’ /> (referencing the #photo ID element that you defined in your CSS) Adjust the values in your CSS till it looks correct. Hope that helps!
Regarding the first post, think of padding and margins like moving to a new house. Padding is what you put inside the box, right? The padding is the space between the content and the border (even if it’s invisible, use your imagination) of the “box”. The margin is the space between two boxes. They do seem very similar, but that gives you a simplified idea of the difference. š
Allotherplaces — I’m too short on blogskills to have come up with a way for WP to do the work. I just kept a copy of the general link-to -picture code handy in a notepad file and then I inserted an image in the post with wp. I then swapped the image link into the notepad file and copied that whole clump back in the post, replacing blob of code WP originally inserted for the image. It was much simpler than I just described.
Pplproof, thanks so much for that detailed and clear description. Heaven help me, I might be learning. I think I almost understand it. We are talking about the style.css doc in the default themes folder, correct?
pplproof — In my style.css lines 320 to 360 of the default 1.5 theme I see code that to my untrained eye looks as if it’s intended to do what you described — img. alignright has margin settings of 0 0 2px 7px, left has 0 7px 2px 0. there’s also a centered setting and one for float right and float left. So I’m guessing that my problem is that I just need to figure out how to insert images in my posts that take advantage of this CSS? There’s also this descriptive bit in the CSS:
Using ‘class=”alignright”‘ on an image will (who would’ve
thought?!) align the image to the right. And using ‘class=”centered’,
will of course center the image. This is much better than using
align=”center”, being much more futureproof (and valid) *
I have the feeling all the information is in front of me. I just don’t know my way around tags and slashes well enough to make it happen. Thanks again for your help.
Everysandwich, Given the information in the style.css that you have discovered it becomes much easier. In the IMG tag, insert class=”alignright” or whatever after you have pasted it from the notebook. That’s it.
So it reads <img class=”alignright” src=”http://link.to.your.picture” />
This tells the image to use the CSS setting of the class alignright, which has already been set up for you.
jeremycherfas, pplproof et al. That did it! Thank you so much! I really appreciate the help.
I cant agree entirely with pplproof I am sorry to say. What the padding is (or should be) to be precise is platform dependant. IE and FF are the exact opposite
Thanks for your replies – to all!
OK I figured out a ‘manual automated’ way of inserting the code for images
I grabbed some code and read the tutorials at
http://www.mandarindesign.com/boxes.html#thinborderfloat
Added the code to my CSS
Then, I use a Mac, i added these snippets to my iSnip app:
class=”imgleft”
class=”imgright”
to be placed into the <img src=”
if ya have a mac, go get iSnip – very simple, cool and free!
http://isnip.net/
I have a border around all my images so I use margin so that the text wont be touching it.
