Forums

When Editing a Page, The Editable Areas Behave Erratically

Permalink
I am creating a theme for a client who has provided me with a PSD file. The theme looks good when it is in viewing mode (See attachment 1) but when I go to edit a page, it is really brutal (see attachment 2). There is a lot of overlap when it comes to the editable areas which makes it hard to pick and add new items.

The other issue that I have run into is the editable parts. When you mouse over one of these editable parts, it is supposed to be highlighted. But, in my theme, the highlight is about an inch below the actual area that is to be edited (see attachment 3, the mouse is actually on the text Add To Left Footer).

Here is my CSS file:
#Header
{
   position: absolute;
   left: 161px;
   top: 0px;
   width: 778px;
   height: 82px;
   font-family: Verdana;
}
#Logo
{
   background-image: url(images/logo.png);
   width: 288px;
   height: 104px;
   position: absolute;
Viewing 15 lines of 166 lines. View entire code block.


And here is my default.php file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php Loader::element('header_required'); ?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="<?=$this->getThemePath()?>/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Header">
</div>
<div class="menu">
   <ul class="nav-header">
      <?php $a = new Area('Header Nav'); $a->display($c); ?>
   </ul>
</div>
Viewing 15 lines of 39 lines. View entire code block.


Any insight is greatly appreciated.

Jason

3 Attachments

TechBlessings
 
dancer replied on at Permalink Best Answer Reply
dancer
Unfortunately this is due to you using Positioning to align your elements with CSS.

As a rule of thumb I avoid positioning wherever possible. I use Floats normally. Seems to iron out bugs when coming to IE.

Other than changing your CSS I cannot suggest anything else.

You maybe able to "force" the areas into the right place by overwriting the CSS but I wouldn't recommend it.
TechBlessings replied on at Permalink Reply
TechBlessings
This is exactly the type of information that I needed. I'll work on modifying the CSS and see if that helps.

I'm relatively new at this so I am willing to jump through some hoops until I master it.

Thanks!

Jason
dancer replied on at Permalink Reply
dancer
No worries...

have a look at this post as well, and the Editmode specific CSS stylesheet, and how to implement it:
http://www.concrete5.org/community/forums/themes/how-to-avoid-overl...

Good luck
TechBlessings replied on at Permalink Reply
TechBlessings
I have updated the CSS as suggested and a few things have sorted themselves out, especially with the whole spacing issue.

Here is my new CSS:
#Header
{
   clear: both;
   float: left;
   top: 0px;
   left: 161px;
   width: 778px;
   height: 82px;
   font-family: Verdana;
}
#Logo
{
   background-image: url(images/logo.png);
   width: 288px;
   height: 104px;
Viewing 15 lines of 172 lines. View entire code block.


As you can see, pretty much all floats now (which really makes my life easy! Thanks for pointing me in the right direction!).

Now, this just leaves me with one problem. Whenever I mouse over the edit areas, the area is supposed to darken and I should be able to click on the location. Unfortunately, what happens is an area bout an inch below the edit location darkens and if I move to that location, then you can click on it and edit that location.

Any suggestions?

Jason
TechBlessings replied on at Permalink Reply
TechBlessings
Never mind! I've answered my own question. The problem that I was having was having a 
position:absolute
on the body. Here is my final CSS that works beautifully:

#Header
{
   clear: both;
   float: left;
   top: 0px;
   left: 161px;
   width: 778px;
   height: 82px;
   font-family: Verdana;
}
#Logo
{
   background-image: url(images/logo.png);
   width: 288px;
   height: 104px;
Viewing 15 lines of 172 lines. View entire code block.


Thanks for all the help. It really put me on the right track!

Jason
dancer replied on at Permalink Reply
dancer
No worries. Glad I have helped someone on here, normally everyone is helping me. Glad to get a little Karma back my way.

BTW... this doesn't mean "don't use positioning" I still use it when needed. Infact a lot of JQuery scripts require positioning, just use it sparingly and be aware that some areas may look a little strange. Or hard code some blocks that dont need to be editable, like the Nav.

Good luck
AvanOsch replied on at Permalink Reply
AvanOsch
I ended up adding some javascript to the footer.php
It resizes/repositions the "edit containers" for absolutely positioned elements (to the size/position of the element)

It works very nicely for the site I'm working on.

<?php if ($c->isEditMode()) { ?>
<script type="text/javascript">
$(document).ready(function() {
   $('.ccm-area-move-enabled .ccm-block-styles').each(function() {
      if ($(this).css('position') === 'absolute') {
         var left = $(this).css('margin-left'), top = $(this).css('margin-top');
         $(this).css({ 'margin-left': 0, 'margin-top': 0 });
         $(this).parent('.ccm-block').css({'position': 'absolute', 'height': $(this).outerHeight(), 'width': $(this).outerWidth(), 'left': left, 'top': top });
      }
   });
});
</script>
<?php } ?>