BullGuard Antivirus Sale - 60% Off with openElement !
Forum openElement Homepage
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: 30 Dec 2015
Location: Germany Frankfu
Status: Offline
Points: 652
Direct Link To This Post Posted: 26 Sep 2019 at 00:45
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: 30 Dec 2015
Location: Germany Frankfu
Status: Offline
Points: 652
Direct Link To This Post Posted: 26 Sep 2019 at 12:29
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 - 26 Sep 2019 at 12:39
___________________________________
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: 30 Dec 2015
Location: Germany Frankfu
Status: Offline
Points: 652
Direct Link To This Post Posted: 27 Sep 2019 at 18:50
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 - 27 Sep 2019 at 20:17
___________________________________
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: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5683
Direct Link To This Post Posted: 28 Sep 2019 at 14:57
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5683
Direct Link To This Post Posted: 28 Sep 2019 at 19:32
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 - 28 Sep 2019 at 19:42
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5683
Direct Link To This Post Posted: 28 Sep 2019 at 19:41
Just replaced image with english version
Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: 30 Dec 2015
Location: Germany Frankfu
Status: Offline
Points: 652
Direct Link To This Post Posted: 28 Sep 2019 at 21:43
*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 - 29 Sep 2019 at 02:30
___________________________________
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: 30 Dec 2015
Location: Germany Frankfu
Status: Offline
Points: 652
Direct Link To This Post Posted: 03 Avr 2021 at 23:58
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 - 04 Avr 2021 at 00:01
___________________________________
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: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5683
Direct Link To This Post Posted: 04 Avr 2021 at 02:44
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: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5683
Direct Link To This Post Posted: 04 Avr 2021 at 02:47
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 - 04 Avr 2021 at 10:50
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 10.11
Copyright ©2001-2012 Web Wiz Ltd.

This page was generated in 0,047 seconds.