Editing (v7+)

Can't edit block

Permalink October 25, 2011 at 4:03 AM

Hi,

I'm using a custom theme in Concrete5. I designed my own template, and integrated Concrete5 in it. So far so good. However, now I'm following a tutorial on creating a 'news' block, and I've created a new block.

Now, I'm trying to 'edit' the new page I made. I want to edit my menu div (to integrate the auto-nav), but it's not clickable.. :( The menu-div has a dotted border (like it should), but I can't click anywhere to add a block. When I move my mouse down, it enters the content area (which isn't clickable too, only if I move my mouse a few inches more down).

Is there an other way to implement the auto-nav in my menu?

Tommiiee replied on Oct 25, 2011 at 4:14 am Permalink Reply

Now, I've added a block in the content without any text in it. So it has minimum height. This block too, is not clickable.. How do I remove it?

To explain more clearly:

- I can't click my red blocks.
- I can click my white blocks, but only if I move my mouse DOWN out of the box (and only when moving the mouse DOWN. When the mouse is moving UP, my cursor doesn't change to add blocks).

Steevb replied on Oct 25, 2011 at 4:17 am Permalink Reply

Hi,

Is it a z-index issue?

Steev

Tommiiee replied on Oct 25, 2011 at 4:19 am Permalink Reply

I don't know?

There's only 1 z-index I'm using:

#menu ul ul {
   z-index: 99999;
}

Is this causing a problem?

Edit:
I've changed the z-index to '1' for testing, but I still can't click any blocks..

Edit:
Disabling the z-index doesn't help either (and it messes up my menu).

Steevb replied on Oct 25, 2011 at 4:31 am Permalink Reply

Could you post url or pm me with it?

Might help to see your structure.

Tommiiee replied on Oct 25, 2011 at 4:34 am Permalink Reply

I've PM'ed you the URL.

I've just switched back to the default Concrete5 template to see the difference. In the default template, when a div get's a mouse-over, it get's colored grey and becomes clickable.

My div's don't do that. When I hover one of my div, I see a slightly grey area ligt up below the specific div.. So somehow, Concrete5 doesn't really seem to work all that well.. :(

Steevb replied on Oct 25, 2011 at 5:20 am Permalink Reply

Hi,

Without going to deep, it looks like your CSS is at fault?

The menu styling is a bit strange.

You to look at the nav structure and modify it.

Tommiiee replied on Oct 25, 2011 at 5:22 am Permalink Reply

So, according to you, my menu is messing all of my blocks up?

What do you mean by 'is a bit strange'? I wouldn't know how to edit the CSS so that my menu stays exactly the same, but that Concrete5 will work properly, because I don't know how Concrete5 handles the div's to be editable..

Tommiiee replied on Oct 25, 2011 at 5:56 am Permalink Reply

I've now rebuild my menu (went better then expected), but I'm still experiencing the same problem..

Why won't C5 correctly see my divs? :(

[b]Edit:[/b] Actually, that's not correct. C5 DOES see my div's correctly, C5 just won't let me edit them correctly (the mouse-over isn't registering correctly).

Steevb replied on Oct 25, 2011 at 6:03 am Permalink Reply

Typically insert this into your theme page to set up the nav.

<div id="navbar">
      <? $a = new Area('Header Nav');$a->display($c);?>
    </div>

Copy and paste code below into your editing program and play with it. Remember to duplicate first and keep the original safe. You could also try pasting the nav part into your theme page and the CSS part into your CSS sheet to see what happens?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS-Only Dropdown Menu</title>
<style>
/* These styles just pretty up the page a bit. */
body {
   font: 62.5%/1.2 Arial, Helvetica, sans-serif;
   background-color: #eee; }
#wrap {
   font-size: 1.3em;
   width: 500px;
   padding: 20px;
   margin: 0 auto;

Viewing 15 lines of 92 lines. View entire code block.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS-Only Dropdown Menu</title>
<style>
/* These styles just pretty up the page a bit. */
body {
   font: 62.5%/1.2 Arial, Helvetica, sans-serif;
   background-color: #eee; }
#wrap {
   font-size: 1.3em;
   width: 500px;
   padding: 20px;
   margin: 0 auto; 
   background-color: #fff;
   position: relative; }
 
/* These styles create the dropdown menus. */
#navbar {
   margin: 0;
   padding: 0;
   height: 1em; }
#navbar li {
   list-style: none;
   float: left; }
#navbar li a {
   display: block;
   padding: 3px 8px;
   background-color: #5e8ce9;
   color: #fff;
   text-decoration: none; }
#navbar li ul {
   display: none; 
   width: 10em; /* Width to help Opera out */
   background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
   display: block;
   position: absolute;
   margin: 0;
   padding: 0; }
#navbar li:hover li, #navbar li.hover li {
   float: none; }
#navbar li:hover li a, #navbar li.hover li a {
   background-color: #69f;
   border-bottom: 1px solid #fff;
   color: #000; }
#navbar li li a:hover {
   background-color: #8db3ff; }  
</style>
 
 
<!--<script>
sfHover = function() {
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" hover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" hover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>-->
 
 
</head>
<body>
   <div id="wrap">
      <h1>CSS-Only Dropdown Menu</h1>
      <ul id="navbar">
      <!-- The strange spacing herein prevents an IE6 whitespace bug. -->
         <li><a href="#">Item One</a><ul>
            <li><a href="#">Subitem One</a></li><li>
            <a href="#">Second Subitem</a></li><li>
            <a href="#">Numero Tres</a></li></ul>
         </li>
         <li><a href="#">Second Item</a>
            <ul>
               <li><a href="#">Just one subitem</a></li></ul>
         </li>
         <li><a href="#">No Subitem</a></li>
         <li><a href="#">Number Four</a>
            <ul>
               <li><a href="#">Subitem One</a></li><li>
               <a href="#">Second Subitem</a></li><li>
               <a href="#">Numero Tres</a></li><li>
               <a href="#">Fourth Thinger</a></li></ul>         
         </li>
      </ul>
      <p>This CSS-only dropdown menu should work in all modern browsers. It has been tested and found working in Firefox 2, IE 7, Safari 3, and Opera 8.5.<br /> With the included JavaScript, the dropdowns also work in IE 6 (the all-important non-modern browser).</p>
      <p>If you dont need to worry about IE6 delete the javascript.</p>
   </div>
 
</body>
</html>

Tommiiee replied on Oct 25, 2011 at 6:14 am Permalink Reply

Hi,

I tried using your code. It doesn't work either. It's the same problem as my own design.

When I hover the mouse over a div, SOMETHING happens (the text "Add to menu" changes color), but I can't click. When I continue moving my mouse downwards and exit the div, I suddenly CAN click and add a block to my content area..

This is so weird :(

Steevb replied on Oct 25, 2011 at 6:58 am Permalink Reply

Hi,

Please look at you CSS!

Body tag is wrong, you don't need position or width?

It also looks a bit more complicated than it needs to be?

Tommiiee replied on Oct 25, 2011 at 7:02 am Permalink Reply

I've put my old code back.

The code you saw was not your code that I used. As I've said before: the problem still remains.

And my CSS is not 'wrong', it's valid (I checked).

Tommiiee replied on Oct 25, 2011 at 7:07 am Permalink Reply

Removing the position and width of the body doesn't help either.

Tommiiee replied on Oct 31, 2011 at 11:03 am Permalink Best Answer Reply

Found the solution:

I removed this from my CSS:

body {
position: relative;
}

This fixed my problem. The downside was I needed an extra container-div to give most of my body-properties to fix my site.

So please C5-team, fix this bug :)

newfive replied on Feb 20, 2012 at 11:52 am Permalink Reply

I had the same issue. It was relative positioning on the body. Thanks! :)

Forums

Editing (v7+)

Can't edit block

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?