CSS positioning fails SOLVED |
Post Reply | Page <123> |
Author | |
digizar
Senior Member Joined: Dec 30 2015 Location: Germany Frankfu Status: Offline Points: 742 |
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 |
|
digizar
Senior Member Joined: Dec 30 2015 Location: Germany Frankfu Status: Offline Points: 742 |
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.comEdited by digizar - Sep 26 2019 at 11:39am |
|
___________________________________
Ask questions only if there is no answer yet. https://blumendigi.com |
|
digizar
Senior Member Joined: Dec 30 2015 Location: Germany Frankfu Status: Offline Points: 742 |
Posted: Sep 27 2019 at 5:50pm |
What I did ... someone else could use it, too. 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. 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.So if I modify that section size, the group follows/moves, means 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 |
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6209 |
Posted: Sep 28 2019 at 1:57pm |
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6209 |
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 |
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6209 |
Posted: Sep 28 2019 at 6:41pm |
Just replaced image with english version
|
|
digizar
Senior Member Joined: Dec 30 2015 Location: Germany Frankfu Status: Offline Points: 742 |
Posted: Sep 28 2019 at 8:43pm |
*boites* ... Well, that much I understand.
Anyway, I could figure it out. Looks exciting, I promise to check it carefully. In the meantime I expanded the first version with sections. 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 |
|
digizar
Senior Member Joined: Dec 30 2015 Location: Germany Frankfu Status: Offline Points: 742 |
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 |
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6209 |
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 :
|
|
Hobby001
Admin Group Joined: Jun 05 2018 Location: Canada, Québec Status: Offline Points: 6209 |
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 |
|
Post Reply | Page <123> |
Tweet
|
Forum Jump | Forum Permissions You cannot post new topics in this forum You cannot reply to topics in this forum You cannot delete your posts in this forum You cannot edit your posts in this forum You cannot create polls in this forum You cannot vote in polls in this forum |