Text jammed up against images
Permalink
Hi - I'm new to Concrete5. When you insert an image into a post, the text jams up right against it. Have assigned a position left, but there's no space. Is this just a css problem?
http://grovesk.c5host.com/
Thanks, Karen
http://grovesk.c5host.com/
Thanks, Karen
After inserting the image, select it, click on the Image properties (tree icon in the toolbar) and set a value for Vertical and Horizontal space.
Tried that earlier (added 10 to horizontal) but it creates 10px of space on both sides. The image becomes indented, which I also don't want. (see updated page).
Any other suggestions?
Any other suggestions?
are you using the advanced editor? when you click on the image does it write some css code? like "float: left; margin-left: 10px; margin-right: 10px; margin-top: 0px; margin-bottom: 0px;"? Because this is what I see in your page.
If you just edit those making the margin-left and margin top 0px and adding the number of px space your need for right and bottom.
If you just edit those making the margin-left and margin top 0px and adding the number of px space your need for right and bottom.
Not sure if I'm using the advanced editor. I *do* see now that once you add *any* margin value, it adds the full css code in the HTML, which I know what to do with. But, my client won't. Is there another "non-tech" way to handle this? An add-on that gives more options perhaps?
It's the same editor, with 'Simple', 'Office', 'Advanced', or 'Custom' Toolbar Set.
When using 'Simple', the image properties will have one screen/tab only (see attached simple.png), while when using 'Advanced' you'll have two more tabs (advanced.png).
So, when you click on the image and choose insert/edit image, and goto the appearance tab (appearance.png), you'll be able to set the margin manually.
AFAIK this is the only way for the user to do it.
The other way, is you code the CSS in your template to give a "margin: 0 5px 5px 0" to images in this area/div.
The side effect is it will add the right and bottom 5px margin to all images in this area.
When using 'Simple', the image properties will have one screen/tab only (see attached simple.png), while when using 'Advanced' you'll have two more tabs (advanced.png).
So, when you click on the image and choose insert/edit image, and goto the appearance tab (appearance.png), you'll be able to set the margin manually.
AFAIK this is the only way for the user to do it.
The other way, is you code the CSS in your template to give a "margin: 0 5px 5px 0" to images in this area/div.
The side effect is it will add the right and bottom 5px margin to all images in this area.
Brilliant! Activated Office editor (Advanced didn't give me the two extra tabs?), and I'm good to go now.
Thanks :)
Thanks :)
Nice tip on the image margins! I missed that feature.
I usually add this to the typography.css (the one TinyMCE looks inside for usable styles) combined with a align left/right applied directly on the image (it actually floats right or left). This allows a user to apply the style to get the desired effect which can then be changed easily site wide if necessary.
EDIT: ignore the PHP tags above and below.
#container can be any enclosing DIV id.
It's good to scope/use this method as a general rule so it doesn't interfere with C5's inherent styles.
for version 5.4 and later you may need to use this instead.
because that version encloses the element in a span.
you may need to also add the old style with no properties in order for Tiny MCE to "see it" but the other styling to actually make the styling work.
i've noticed that once a style is added, if you change it, the styling on the element isn't substituted for the old one. Instead the style is added to the span. Pretty annoying. To get around this, I'd recommend telling people to just delete the current image, re-add it and apply the alignment and styling again.
mario
I usually add this to the typography.css (the one TinyMCE looks inside for usable styles) combined with a align left/right applied directly on the image (it actually floats right or left). This allows a user to apply the style to get the desired effect which can then be changed easily site wide if necessary.
#container .padImageLeft { /* gives a image some breathing room - doesn't actually show up in the text editor however but it does in the Concrete5 editor */ padding:0px 0px 0px 10px; } #container .padImageRight { /* gives a image some breathing room - doesn't actually show up in the text editor however but it does in the Concrete5 editor */ padding:0px 10px 0px 0px; }
EDIT: ignore the PHP tags above and below.
#container can be any enclosing DIV id.
It's good to scope/use this method as a general rule so it doesn't interfere with C5's inherent styles.
for version 5.4 and later you may need to use this instead.
#container span.padImageLeft img{ /* gives a image some breathing room - doesn't actually show up in the text editor however but it does in the Concrete5 editor */ padding:0px 0px 0px 10px; } #container span.padImageRight img { /* gives a image some breathing room - doesn't actually show up in the text editor however but it does in the Concrete5 editor */ padding:0px 10px 0px 0px; }
because that version encloses the element in a span.
you may need to also add the old style with no properties in order for Tiny MCE to "see it" but the other styling to actually make the styling work.
#container .padImageLeft, #container .padImageRight { }i've noticed that once a style is added, if you change it, the styling on the element isn't substituted for the old one. Instead the style is added to the span. Pretty annoying. To get around this, I'd recommend telling people to just delete the current image, re-add it and apply the alignment and styling again.
mario
Some users may find this free add-on helpful:
http://www.concrete5.org/marketplace/addons/content-around-image/...
http://www.concrete5.org/marketplace/addons/content-around-image/...
