WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
Hi !
I have been able to upload images and insert them in my posts with text around them.
However, there is no space between the text and my pictures, and it is not very nice... How can I leave some space between text and images (especially on the left side of the images when they are aligned right)?
Thanks !!
Annie
I've been wondering this same thing.
Open your post and click on the image you want to adjust. Look at the icons in the Visual tab and select the green/blue one that is fifth from the right. This will allow you to edit/adjust image. In the box increase the horizontal space to around 10 or whatever you want until your image has enough space around it.
Simply add this snippet of code at the end of the picture or text.<p>
That will add a space between.
I prefer float to align, and this example provides a margin:
http://en.forums.wordpress.com/topic.php?id=8669&replies=3&page
ellaella - I don't find that using float gives me the space around the image, at least not in Firefox. Am I missing something?
Ah - I think I see it. The margin element is still there.
Righty-oh! And it's adjustable, of course. I think it gives the most professional-looking results with the types of images I use.
Last time, I looked, that 'float' code is now automatically added into the code when you insert an image, but you do also need to add the horizontal space and vertical space using the tree icon, as ella says.
This is an improvement which has been delivered by the new image uploader. Previously the horizontal and vertical space did not work in Firefox, although they did function in Internet Explorer.
I don't see that the horizontal and vertical settings work in Firefox.
AnnieA & MisteyG - I have been wanting to know this ever since I started here but have yet to find the solution that works for me.
Ripley6 - I just tried your suggestion since that was a new response to me but it did not work. I tried it twice on the second pic on this page and as you can see the text is still flush against the pic. http://oldschoolmusiclover.wordpress.com/2008/04/18/when-something-is-wrong-with-my-baby-as-performed-by-sam-dave-1967/
Xtap59 - exactly where would I put the paragraph tag to get the vertical space I need?
Also could someone explain float vs align please using the "dummies" lingo?
Thanks in advance to all.
Ripley46 - I tried the border spacing and worked...until I went to save the post. I just went back to normal
Hi all!
Just put a STYLE code into image tag
Example:
1) Add Image (Alignment ; none, size: X)
<img src="http://guerry.wordpress.com/files/2008/05/adoleschenchos.gif" alt="" title="adoleschenchos" width="166" height="211" class="alignnone size-full wp-image-108" />
2) Clean the code-crap (alignment values, alt, etc):
<img src="http://guerry.wordpress.com/files/2008/05/adoleschenchos.gif" width="166" height="211" />
3) Put align & style code:
IE:
align="left" style="margin-top:2;margin-right:10;margin-bottom:4"
Resulta:
<img src="http://guerry.wordpress.com/files/2008/05/adoleschenchos.gif" width="166" height="211" align="left" style="margin-top:2;margin-right:10;margin-bottom:4" />
** Don't erase final slash ( / )
**Works for any browser
-------------------- See how look it:
http://guerry.wordpress.com/2008/05/19/los-adoleschenchos/
-------------
You can adjust and add values
Salud!
@ elcadillo
What you call "crap code" in WP.com is good XHTML/CSS practice while your code is mixing structure and layout:
align="left" style="margin-top:2;margin-right:10;margin-bottom:4"
-- mind you, crap is probably good enough for IE ;-)
go to code view and modify the image tag; add styles just the way librefan sugest or you can simply use border attribute although this will create and unnessary left margin
img alt Tags are definitely NOT crap. they are very search engine friendly - meaning, there's a higher chance of Google indexing your image and showing it in Google Image Search in time. And of course, that means there's a high chance for you to get more hits from Google Image Search.
as for spacing, if the code tab doesn't freak you out, you can try this
<img src="Put_Image_Url_Here" alt="Put_alt_words" hspace="10" vspace="10" border="10">
change the digits 10 to something that suits you.
I just manually type this inside the code
hspace="10"
Just for your information: http://www.w3schools.com/tags/tag_IMG.asp says:
The "align", "border", "hspace", and "vspace" attributes of the image element were deprecated in HTML 4.01.
The "align", "border", "hspace", and "vspace" attributes of the image element are not supported in XHTML 1.0 Strict DTD.
Qite a bore, isn't? Those of us who don't choose to pay something to have access to CSS files have to do without some features or they will produce out-dated code.
(X)HTML shouldn't be mixed up with any lay-out elements in good W3C pratice. CSS is not a new thing, BTW.
I have chosen to stick to strict separation between HTLM and CSS, as far as WP.com code allows me. When my pages don't validate, I correct my code and if it's some error in WP, I let them know.
Of course, you can work with correct (X)HTML and CSS by putting an appropriate style attribute on each of the img elements; its just way more convenient to do it once in the stylesheet. :-)
works for me
The virtual editor still doesn't work for this issue (and so many others) and It is really annoying when there is inadquate spacing around pics and everything looks crowded and ugly.
Since I don't do code is there some simple code that can be shared with me so that I can just always put a 3 pixel white vertical border/space on pics so that the text does not butt right up against it. I would appreciate the code to do that and the "dummies" explanation of where to put it.
That way I can go and clean up some of the ugly blog pages I have due to the Virtual Editor not working properly.
Thanks in advance for any help you can offer.
SonDan
It's easy to add space: controlling the colour of a border is NOT easy. It's set in the theme.
To add horizontal and vertical space, just click to select the image, click on the Image Icon, and put 3 in the horizontal and vertical space boxes.
This topic has been closed to new replies.
mistygroves
ripley46
xtap59
jaymejenkins
elcadillo
librefan
aishwaryawedsabhishek
sanjidabd
moinansari
