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

openElement

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

Topic ClosedCSS positioning fails SOLVED

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

Joined: Dec 30 2015
Location: Germany Frankfu
Status: Offline
Points: 738
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://blumendigi.com
Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: Dec 30 2015
Location: Germany Frankfu
Status: Offline
Points: 738
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://blumendigi.com
Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: Dec 30 2015
Location: Germany Frankfu
Status: Offline
Points: 738
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://blumendigi.com
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
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: 6194
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: 6194
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 Frankfu
Status: Offline
Points: 738
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://blumendigi.com
Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: Dec 30 2015
Location: Germany Frankfu
Status: Offline
Points: 738
Direct Link To This Post Posted: Apr 03 2021 at 10:58pm
Sorry, after awhile of frustrating fiddelings I come back like Jack-in-the-box.
I just don't get the idea. May be I am to much fixed on the pirincples of CSS?

I can postion evry element manually onto any position.
But I can not position them via CCS (Styles).

Even the (code) definitions of the 'style' does not show the coordinates durig creation of the style (code). But that shows the dimensions of some other parameters (borders), and uses them fine.
The visual appearances differs in 'relative' oder 'absolute' mode (your recommendation relative).
In relative mode they are consecutively displayed (which I'd understand).
But in 'absloute' mode they do not observe the location specification of the style/CSS.
I'll never need a responsive version.

Only if I assign the 'properties' manually piece for piece, which is not my intention. Because the style/CSS should/must do that job. A least as I understand since several (15?) years.
I have to use those 'style' on about 300 pages, and it would ask for trouble to specify the objects piece by piece.

* Where is my mistake, my misunderstanding?

I submit a down stripped source that would make it so simple as could bye to help me.
Details come per personal message. It's a complete zip. Some 300 KB.

Thanks in advance. I'm NOT in a hurry, no pressure.
My site works so far, but I need expansion.

Hope all you buddies are fine these times.
I get the first anti-conona shot on april 14th.
'Just' three months waiting time.


Edited by digizar - Apr 03 2021 at 11:01pm
___________________________________
Ask questions only if there is no answer yet.
https://blumendigi.com
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Direct Link To This Post Posted: Apr 04 2021 at 1:44am
In relative mode, distances are provided with margins.

In absolute mode, distances are defined from the parent element side (top, bottom, left and right)

If you have multiple elements, each in a separate parent element

You can give the contained elements a CSS class (MySpecialClass)  and add css code to the page such as :

.mySpecialClass{
top:30px;
left:60px;
}
  
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Direct Link To This Post Posted: Apr 04 2021 at 1:47am
If you can be more precise with your question, I might be able to be precise as well.

What are you trying to achieve?  Center elements into group of elements.  Place them at specified coordinates?






Edited by Hobby001 - Apr 04 2021 at 9:50am
Back to Top
 Post Reply Post Reply Page  <123>
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.063 seconds.