How to avoid overlapping editable Areas when in Edit Page mode?
Permalink
I have some sites that have editable regions fairly close together and when I put them in Edit mode, the red outlines and the Add To Area text link buttons sometimes overlap and look like a mess. Very confusing-looking for the client. Sometimes one will overlap another and make it difficult to click the Add To Area option.
Is my method of CSS resetting my elements causing this problem or is this just inherent in Concrete5 if your Editable Regions are "too close" together?
Is my method of CSS resetting my elements causing this problem or is this just inherent in Concrete5 if your Editable Regions are "too close" together?
I had a problem like this and it wasn’t my reset css but my own coding. I had placed an editable area with padding instead of margin. The best tool I've found for analyzing the css is CSSEdit from MacRabbit if you're on a Mac. It'll give you a live preview as you edit the css locally keeping the site files safe.
I never use padding since it does not play nice at all with the IE box model. So, I basically never use it.
That's cool, though-- CSS Edit lets you connect remotely to your C5 site?
If you happen to be using Dreamweaver to edit CSS, this guy created a snippet which allows you to insert the needed set of codes to fix the overlap with just a click.
http://concrete5-japan.org/dreamweaver/en/...
I have used it for this issue and it worked great.
http://concrete5-japan.org/dreamweaver/en/...
I have used it for this issue and it worked great.
SWEEEEET! That is awesome and something totally unexpected.
Thank you so much!
Thank you so much!
I tried using the code from the DW snippets but no matter where I put it my main area still overlaps my Nav area. The two didn't over lap until i started removing code not adding it. I am altering the plain yogurt theme and this is driving me crazy. Any help would be greatly appreciated. See the site athttp://www.georgialawngrowers.com/development...
un:admin
pw:IAysJC78
un:admin
pw:IAysJC78
I think you just have too many areas squished up next to each other.
If you're using a recent version of concrete5 (version 5.4 or 5.4.1 at least I think), you might want to not use the area splitter and instead use the built-in "Layouts" feature, which accomplishes the same thing but lines the sub-areas up a little better (you can add a layout by clicking on "Add To Main" (or "Add To ___" whatever the area is called) and choosing "Add Layout" from the popup menu. Probably want to remove the area splitter from those pages first though as they will interfere with each other.
if this doesn't solve your problem, you are going to need to add some more padding or margins between each sub-area in your CSS. You can use Firebug (a free Firefox addon) to help with this kind of thing -- it lets you click on elements in the page and see the corresponding html and css, which makes it easier to identify the id's and classes of various elements so you know which CSS to change (although if you're not already familiar with HTML and CSS this isn't going to do much good -- will just confuse things more...)
If you're using a recent version of concrete5 (version 5.4 or 5.4.1 at least I think), you might want to not use the area splitter and instead use the built-in "Layouts" feature, which accomplishes the same thing but lines the sub-areas up a little better (you can add a layout by clicking on "Add To Main" (or "Add To ___" whatever the area is called) and choosing "Add Layout" from the popup menu. Probably want to remove the area splitter from those pages first though as they will interfere with each other.
if this doesn't solve your problem, you are going to need to add some more padding or margins between each sub-area in your CSS. You can use Firebug (a free Firefox addon) to help with this kind of thing -- it lets you click on elements in the page and see the corresponding html and css, which makes it easier to identify the id's and classes of various elements so you know which CSS to change (although if you're not already familiar with HTML and CSS this isn't going to do much good -- will just confuse things more...)
