position:absolute with concrete5
Permalink 1 user found helpful
I'm trying to move a simple site to concrete5. It uses position:absolute all the time and this causes a few problems.
The top menu is hidden behind the toolbar!
the body {margin-top:49px} doesn't fix this for ff3 and ie8
I tried to add the margin to the html tag as well. This seems to work but unfortunately there's another bug, the edit button is moved down as well. I attached a screenshot..
Has anyone had this problem before? What's the best way to use position:absolute with concrete5?
The top menu is hidden behind the toolbar!
the body {margin-top:49px} doesn't fix this for ff3 and ie8
I tried to add the margin to the html tag as well. This seems to work but unfortunately there's another bug, the edit button is moved down as well. I attached a screenshot..
Has anyone had this problem before? What's the best way to use position:absolute with concrete5?
With a template I had chosen that had a background image and two standard images making up the header area above a menu. The problem was that when the edit bar was up it pushed the two images down and generally made the layout look like crap when the toolbar was up.
The code I ended up using to push the background down was this:
I just yoinked the code that header_required uses to display the bar but I think i left out another and on the if statement.
IsEditMode will work, but the actual page has to be in edit mode for that to work.
So i guess i would probably wrap everything in a div and do relative positioning from that, and if the edit bar is up introduce a margin on the wrapper div to push it down so it isn't be covered by your edit bar?
Just an idea. Always a pleasure.
The code I ended up using to push the background down was this:
<? $cp = new Permissions($c); if($cp->canWrite() && $cp->canAddSubContent()){ echo('<style type="text/css">body{background-position:0px 50px;}</style>'); }?>
I just yoinked the code that header_required uses to display the bar but I think i left out another and on the if statement.
IsEditMode will work, but the actual page has to be in edit mode for that to work.
So i guess i would probably wrap everything in a div and do relative positioning from that, and if the edit bar is up introduce a margin on the wrapper div to push it down so it isn't be covered by your edit bar?
Just an idea. Always a pleasure.
This saved me a lot of headaches and time. I really appreciate it.
I had tried scottC method and it's work. but I must change the height value to 49px for best position.
so I write:
so I write:
<? $cp = new Permissions($c); if($cp->canWrite() && $cp->canAddSubContent()){ echo('<style type="text/css">body{background-position:0px 50px;}</style>'); }?>
My approach was more like "Fix c5" to make sure you don't have to modify your css/html at all.
I can fix this by using something like Scott mentioned but this might annoy a couple of people, especially when they build their first theme and it doesn't work like expected...
Adding "html {margin-top:49px ! important;}" fixes the layout problem with the theme. This is why I thought that it might be possible to fix the "add to area" button as well.
We then would have a c5 edit mode that works with position:absolute out of the box. I consider wrapper div's and custom edit styles as work arounds. I'm fine with them, it doesn't take much time, but some people might think differently, which is why I wanted to "fix" this!
But thanks anyways, I guess I'll try to use your solutions for my site and check if I can fix the c5 css later...
I can fix this by using something like Scott mentioned but this might annoy a couple of people, especially when they build their first theme and it doesn't work like expected...
Adding "html {margin-top:49px ! important;}" fixes the layout problem with the theme. This is why I thought that it might be possible to fix the "add to area" button as well.
We then would have a c5 edit mode that works with position:absolute out of the box. I consider wrapper div's and custom edit styles as work arounds. I'm fine with them, it doesn't take much time, but some people might think differently, which is why I wanted to "fix" this!
But thanks anyways, I guess I'll try to use your solutions for my site and check if I can fix the c5 css later...
this was the first thing i encountered when developing the basics for my latest template. The C5 toolbar is always inserted by script after the opening body tag. so if you want to ge rid of your probs you have to build a temporary "body". Wrap your design into another DIV that encapsulates your whole content. This DIV needs to be set position relative for beeing the "frame" for correct positions of absolute childs. You don't have to implement this as a permanent part of the code...think of the <?php if ($c->isEditMode()) { ?> capsule for the opening and the closing part of that DIV and the toolbar will never bother you anyway.