Posted 2 years ago #
Hi
I just setup a installation of WordPress locally and I have installed a theme but for some reason if I insert an image the text wont wrap around around it. I have tried other templates and everything works fine it just seems to be the one I want (typical). Can anyone suggest what could be wrong?
Thanks!
Posted 2 years ago #
There is something wrong in the css. I don't know if you have any expierience in css, but you have to add a float to the image.
An example of this would be:
img {
align:left;
}
But this will aply on every image on your side so use a class.
If you have no css knowledge at all it would be pretty difficult.
Hope this can help you.
Greetz,
Durgé
Dimics.com
often the style.css contains floats for image alignment; for instance the default theme:
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}these styles may be missing from your theme - if so, just add them.
Posted 2 years ago #
Thanks for the replies!
alchymyth thanks for putting me on the right path. I got ythe below from the css file for the default template and it sorted the problem. Many Thanks!
/* Begin Images */
p img {
padding: 0;
max-width: 100%;
border: 0;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
/* End Images */
Posted 1 year ago #
Does it matter where in the CSS theme you add the code for image floats?
Posted 1 year ago #
It has to be contained in the same element but it does not matter what order they are in.
Posted 1 year ago #
And by same element, you mean with the other code relating to image floats?
Posted 1 year ago #
to float the image it would have to be in the .css element for that image. so say if you are using <img src="blah.gif" class="alignleft"> the float would have to be in the css matching the class listed to that image. Other than that you can have that block of code anywhere in your css, although it helps to keep them grouped together.
it would look something like this
.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
float: right;
}
Posted 1 year ago #
Is this the "same element"? I'm using cutline:
.entry img.left { padding: 3px; margin: 0.5em 15px 0.5em 0; border: 3px double #bbb; float: left; clear: left; }
.entry img.right { padding: 3px; margin: 0.5em 0 0.5em 15px; border: 3px double #bbb; float: right; clear: right; }
.entry img.center { display: block; padding: 3px; margin: 0 auto 1.5em auto; border: 3px double #bbb; float: none; clear: both; }
.entry img.off { padding: 0 !important; border: none !important; }
.entry img.stack { clear: none !important; }
Posted 1 year ago #
we posted at the same time, read my last post.
Posted 1 year ago #
Yes, thank you, I did read your post.
I can tell you've kindly given me some code to post.
I understand I can paste it anywhere on the CSS style sheet, but it is best pasted in the css element for that image. Unfortunately I do not know what that means.
It sounds like I need to search the code on the css style sheet and look for something that says "same element" or "element" or "image".
I did find a string of code that says img. That is what I posted last.
I'm assuming that the code I posted is not the "same element."
I will just past your code at the end of the style sheet and see what happens.
Sorry to be asking questions. Have a good night.
Posted 1 year ago #
I added the code to the end of the CSS style sheet, but the text is still flush against the image. Does WP have a clear explanation for how to wrap text around images without the text bumping up against the image?
Posted 1 year ago #
It has nothing to do with wordpress really. Just html and css in general. if you link me to the website i can look at the css and code and go from there.
If you are adding the code at the end of the css and there is already an element with the same name in the css it will not work
Posted 1 year ago #
AutismNewsBeat.com
Posted 1 year ago #
are you manually inserting the images (via code) or are you using the wp button to do it?
Posted 1 year ago #
I am using the WP button
Posted 1 year ago #
Try adding this to the bottom of style.css, after /*End Captions*/
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}.alignleft {
float: left;
}.alignright {
float: right;
}
Reference material. WordPress Generated Classes
Posted 1 year ago #
Didn't help.
Posted 1 year ago #
I'm surprised. I tried it in firebug on your site last night and it worked like a charm. In fact just now, I saw that the image of the little girl with her hand cupped to her ear is now aligned left and word wrapped (it was above the text last night ).
Did you get a chance to clear your browsers cache or force a reload after the changes - Ctrl+F5 - and revisit it? because it looks pretty good to me.
Posted 1 year ago #
It didn't work right away. Later, when I logged on, I saw that it did work.
I didn't know about clearing the cache, or that Ctrl+f5 worked on a Mac platform. I'll try that next time.
Does that code work if I add it directly to the HTML code in the text? I'm blogging at HuffPo, and when I add a photo I can tweak the HTML to make if center or flush left, but the text doesn't wrap.
Once you have added the code to style.css, you shouldn't need to add it anywhere else. Just use the standard controls when posting to align your image left, center, or right, and all should be fine.
This topic has been closed to new replies.
