Problems, need help? Have a tip or advice? Post it here.
3 posts Page 1 of 1
I'm trying out Couch CMS, and I've already run into an issue. If I make a DIV containing text an editable region, the positioning is ignored.

Here's the site.

[url=http://stevebrame.com/index.php]Here's the site.[url]

Without the Couch tags, the text box is centered inside the brown box. Add the tags, and the text moves to the top.
Hi Sebrame,

Following is the original markup of your page -
Code: Select all
<div id="divMain" style="background:transparent;margin-left:auto;margin-right:auto;position:relative;width:800px;height:1000px;">

    <img alt="" src="images/wp9117eacb_06.png" id="img_1" style="position:absolute;left:0px;top:366px;width:800px;height:218px;">

    <h2 style="text-align: center;"><strong>Monday - 06/02/2014</strong></h2>

    <h3 style="text-align: center;"><strong>Time: 11AM - 2:30PM</strong></h3>

    <h3 style="text-align: center;"><strong>Where: Highwoods Campus</strong></h3>

</div>

As can be seen it has a liberal amount of inline styling.

If we were to put the cms:editable tag around the full block e.g.
Code: Select all
<cms:editable name=test type=richtext>
<div id="divMain" style="background:transparent;margin-left:auto;margin-right:auto;position:relative;width:800px;height:1000px;">

    <img alt="" src="images/wp91..
    ..
    ..
</div>
<cms:editable>
- we'd be allowing the user to edit the inline CSS styling as well (although it won't be apparent to him in the richtext editor unless he takes a look at the source).

The best way to use Couch is to allow only the content to be edited so that user cannot mess with your styles.
For example instead of following
Code: Select all
<cms:editable name='test' type='text'>
<h2 style="text-align: center;"><strong>Monday - 06/02/2014</strong></h2>
</cms:editable>

it is better to use the following where we make only the content editable
Code: Select all
<h2 style="text-align: center;"><strong>
<cms:editable name='date' type='text'>
Monday - 06/02/2014
</cms:editable>
</strong></h2>

If such a granularity is not required, you could try moving the CSS rules to an external stylesheet or if your user is HTML savvy use 'textarea' to allow him to see what he is editing.

Hope this helps.
Great! Makes perfect sense. I actually just moved the tags inside the DIV, and absolute positioning worked again. I've been using Serif Webplus for a few years, but I've had a long background of hand-coding HTML, so this shouldn't be a problem.

Thanks!
3 posts Page 1 of 1
cron