Forums

css Positioned obejcts?

Permalink 1 user found helpful
Hi
I'm trying to convert an old page to a theme.

It has a lot of position:absolute and relative divs.

If I put in any editable content inside such a div it does not work,´.

So what is the best way to do this? I dont want to rebuild the whole site.

And where are the guidelines for this? How should the css be setup?

Regards
Olle
 
jordanlev replied on at Permalink Reply
jordanlev
If you wrap an absolutely positioned element inside a relatively positioned element, the absolute positioning will be in relation to the surrounding element instead of to the page as a whole. Seehttp://www.barelyfitz.com/screencast/html-training/css/positioning/... for more details (click on the "4" tab)

The easiest way to do this would be to set a block wrapper for the areas that are causing problems. In you page type templates ("default.php", "right_sidebar.php", "full.php", etc.), find the code that's outputting the area, for example:
$a = new Area('Main');
$a->display($c);

And change it to something like this:
$a = new Area('Main');
$a->setBlockWrapperStart('<div class="positionwrapper">');
$a->setBlockWrapperEnd('</div>');
$a->display($c);


Then in your theme's stylesheet, add this:

.positionwrapper {
position:relative;
}

Hope that helps!
olleka replied on at Permalink Reply
Hi
Well, it turns out that anything with a z index higher that 5 is not possible to have an editor.

Its like the top bar or something is hiding the popup for the editing choise.

So is that supposed to be like that?

Regards
Olle