BullGuard Antivirus Sale - 60% Off with openElement !
openElement Website Homepage
Forum Home Forum Home >

openElement

> Error Reports
  New Posts New Posts RSS Feed - CSS positioning fails
  FAQ FAQ  Forum Search   Register Register  Login Login

CSS positioning fails

 Post Reply Post Reply Page  <12
Author
Message
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: Dec 30 2015
Location: Germany
Status: Offline
Points: 429
Post Options Post Options   Thanks (0) Thanks(0)   Quote digizar Quote  Post ReplyReply Direct Link To This Post Posted: Sep 25 2019 at 11:45pm
Will keep it as short as possible.
Not in a hurry, it's after midnight here, need some sleep.
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf
Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: Dec 30 2015
Location: Germany
Status: Offline
Points: 429
Post Options Post Options   Thanks (0) Thanks(0)   Quote digizar Quote  Post ReplyReply Direct Link To This Post Posted: Sep 26 2019 at 11:29am
Meanwhile, I broke it down to the absolute minimum.
Will send you the access details via PN.

I created a new blank project, w/o predefined Template.
The zip file of the project: ftp://sagemir.com/__sagemir.zip
Also the 'backup' is there.
It's a very short package.

Home page, not BaseLayer:
top range 50, left range 50. Absolute.
Group of Elements placed @ top 70, left 50 in Properties.
Properties - Positioning absolute.
Assigned a Style named 'goe' @ top 100, left 80 - Main Frame - Normal.
That does not move the yelow rectangle to 100/80, as expected.

What do I miss? It looks so simple, so there must be some missing information for me.

What you'll see is just a plain yellow rectangle.
https://sagemir.com


Edited by digizar - Sep 26 2019 at 11:39am
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf
Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: Dec 30 2015
Location: Germany
Status: Offline
Points: 429
Post Options Post Options   Thanks (0) Thanks(0)   Quote digizar Quote  Post ReplyReply Direct Link To This Post Posted: Sep 27 2019 at 5:50pm
What I did ... someone else could use it, too.

In the meantime I used the upper/lower limit of each section (top, left, bottom) as a reference point/line.
Since I do not need the lower section (usually the 'about' part), I made that section as large as the *normal* viewing area. Leaving space for the top section, the header.
Then I put the *Group of Elements* @ location top=0 -or blank- (the upper limit of the lower 'about' section.
So if I modify that section size, the group follows/moves, means
when I change the sections, the images will follow/move, since the layer defines the sections - and so the location of the *Group of Elements*. And what is inside the group, will follow, too.
Hey, pretty simple, isn't it?

The section handling is somehow tricky, but nice ... if one knows how to use it; I have known that before. Confusing is, that new dimensions are not desplayed immediately on the fly.
And the *Save* / *Abort* bottons are missing.

Still the question is: ... why doesn't the *Style* work as expected?
But not to care about now.

If you want to, you may pull the zip from previos location, same parameters as before, simplified version:
ftp://sagemir.com@ftp.sagemir.com/__sections.zip

Thanks again very much.
As a German I don't speak much of the french language.
Au revoir!


Edited by digizar - Sep 27 2019 at 7:17pm
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 4250
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Sep 28 2019 at 1:57pm
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 4250
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Sep 28 2019 at 6:32pm
Hello Digizar,

In order to answer this question consider the following image



These are four group of elements with css class: 'boites'

The left blank group is in absolute mode, the right one is in relative mode.

The CSS code apply to all of them

In absolute mode, the filled group is located at 100px from to plus 50 px margin and 100px from left plus 50 px margin

In relative mode, only the margins are effective

In openElement, there is one condition to get this result:  it is mandatory that no distance from top, left, right nor bottom is defined in the style menu because OE is adding CSS to the element and it applies in priority.

Using !important overrrides OE CSS.


I hope that this will clarify the situation for you.







Edited by Hobby001 - Sep 28 2019 at 6:42pm
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 4250
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Sep 28 2019 at 6:41pm
Just replaced image with english version
Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: Dec 30 2015
Location: Germany
Status: Offline
Points: 429
Post Options Post Options   Thanks (0) Thanks(0)   Quote digizar Quote  Post ReplyReply Direct Link To This Post Posted: Sep 28 2019 at 8:43pm
*boites* ... Well, that much I understand. LOL
Anyway, I could figure it out.

Looks exciting, I promise to check it carefully.


In the meantime I expanded the first version with sections.
Access as before.
Here the link to the site: https://sagemir.com

For me it looks simple.
I created the *BaseLayer* for the left section, continously from top to bottom,
intentionally slightly smaller than that image inside.
There are three sections (top, left, bottom).

Then I created another *LayoutLayer* (based on *BaseLayer*), which has different sized sections.
To prove, that this *LayoutLayer*, based on *BaseLayer* may have different sections of various sizes.

Inserted two *Group of Elements*, the top one ist located inside the *top* section.

The second *Group of Elements* containes three images, this group is located inside the bottom section. The two images in the top row are located @ 0, 0 (left image 1) and 0, 240 (right image 2) - inside limits of the group.
The group itself can be located somewhere, here it is located exactly on/under the top limit (0 or blank) of the bottom section.
As soon as one redefines the size if the bottom section of the layer *LayoutLayer*, the *Group of Elements* moves along. And so do the (three) images.

The *BaseLayer* stays unmodfied.
The Styles can still be used as usual.


Edited by digizar - Sep 29 2019 at 1:30am
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf
Back to Top
 Post Reply Post Reply Page  <12
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 10.11
Copyright ©2001-2012 Web Wiz Ltd.

This page was generated in 0,031 seconds.