Print Page | Close Window

CSS positioning fails SOLVED

Printed From: Forum openElement
Category:

openElement


Forum Name: Error Reports
Forum Description: Submit an error report for our technical support.
URL: http://forum.openelement.com/fr/forum_posts.asp?TID=1560
Printed Date: 18 Mai 2021 at 13:34
Software Version: Web Wiz Forums 10.11 - http://www.webwizforums.com


Topic: CSS positioning fails SOLVED
Posted By: digizar
Subject: CSS positioning fails SOLVED
Date Posted: 14 Sep 2019 at 15:09
I created a *group of elements*, that's ok.
But then I assing a CSS to this group, it does not interprete the *Size* and *Positioning* values to that group frame. If I define these values in *CSS Style Preset Zones* with *Content (Expert)* -not in *Main Frame*-, it will affect the objects contained in the group.

The only way to size and position that group seems to be with individual *Details*.
The group of elements should be positoned at 190 px down from upper limit of the Main frame, but is not, is at 0 - just below the header hight at 90 px portion of the page Top, also just after the left portion (210 px) of that page.
I expect 250 pages, even more, for this project. It would be unreasonable to modifiy every page. So the CSS should do it.

What do I miss?

The CSS:


The portions of the page:



The group fo frames in real life:



-------------
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf



Replies:
Posted By: Hobby001
Date Posted: 16 Sep 2019 at 03:59
The group element css position depend on the parent's setup.

How did you set it's parent?


Posted By: Hobby001
Date Posted: 16 Sep 2019 at 14:18
CSS hack !Important is not a recommended way to do this.

Correct me if I am wrong

You want to use Main, Left and Top sections to create multiple pages

You want to be able to position a group of elements of 530 x 660 px at 30px from left and 190 px from top of Main section.  

Am I right to assume it?


Posted By: Hobby001
Date Posted: 16 Sep 2019 at 14:29
If I am right, use a layer and configure the three sections as you did but configure the main section Position of elements as Relative (like in text editors)

Then you will be able tu use top and left margins

http://zupimages.net/viewer.php?id=19/38/r3pu.jpg" rel="nofollow">


Posted By: Hobby001
Date Posted: 16 Sep 2019 at 14:30
But you must understand that your desing will never be responsive.


Posted By: digizar
Date Posted: 16 Sep 2019 at 14:55
Thank you for your advice :-) I'll try.
Will take awhile, may be a week or so.
Your assumptions are right.

It is not reqired to be responsive.
Responsivness would cause confusion.



-------------
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf


Posted By: Hobby001
Date Posted: 16 Sep 2019 at 14:58
If your title also fits into the Main section, put it first with the required margins and decrease your group of elements's top margin accordingly.




Posted By: digizar
Date Posted: 26 Sep 2019 at 00:13
Nop, did not work.

The css
I can change the background colour of the *Group of Elements*,
but neither size & location. In fact nothing else but the background colour.

There is no hurry. Plenty of time.

I put the zip-source on my server, will give you the details in PN.
250 MB.
Also, easy access to the server is possible. Same details.

A long time ago I have detected similar effects.
When I changed the parameters in the css-syle, size&position of an ordinary button element.
It does not activate these parameters. Only if I change the border size, too.

http://reliefart.de/moderne/moderne_selection.htm" rel="nofollow - How it should look

How it looks, when ich changed to *Relative*




-------------
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf


Posted By: Hobby001
Date Posted: 26 Sep 2019 at 00:22
Make a copy of your project, downsize it to one page and send it to me trough WEtransfer via Private mail.

I will look at it


Posted By: Hobby001
Date Posted: 26 Sep 2019 at 00:23
Make sur to give me a page that was not modified so I will see what is your objective


Posted By: digizar
Date 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


Posted By: digizar
Date 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.
http://sagemir.com/" rel="nofollow - https://sagemir.com


-------------
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf


Posted By: digizar
Date 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!


-------------
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf


Posted By: Hobby001
Date Posted: 28 Sep 2019 at 14:57
https://www.w3schools.com/cssref/pr_pos_top.asp" rel="nofollow - https://www.w3schools.com/cssref/pr_pos_top.asp



Posted By: Hobby001
Date Posted: 28 Sep 2019 at 19:32
Hello Digizar,

In order to answer this question consider the following image

http://zupimages.net/viewer.php?id=19/39/cgcn.jpg" rel="nofollow">


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.







Posted By: Hobby001
Date Posted: 28 Sep 2019 at 19:41
Just replaced image with english version


Posted By: digizar
Date 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.
http://ftp://sagemir.com@ftp.sagemir.com/___sagemir.zip" rel="nofollow - ftp://sagemir.com@ftp.sagemir.com/___sagemir.zip
Access as before.
Here the link to the site: https://sagemir.com" rel="nofollow - 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.


-------------
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf


Posted By: digizar
Date 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.
https://blumendigi.com/index.gb.htm" rel="nofollow - 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.


-------------
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf


Posted By: Hobby001
Date 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;
}
  


-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: Hobby001
Date 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?






-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: digizar
Date Posted: 04 Avr 2021 at 13:15
Place them at specified coordinates?
Yes, as simple as that.
Just one coordinate specified in the 'Style' settings.
To be used anywhere in the project it is referenced.
So I may move them on all pages, with just that one definition in Style/CSS.
That style is then used for all the elements referencing that Style on all pages.

These parameter settings exist in the 'style' definition (Top Distance, Left Distance). ScreenShot 1.
But they do not have any effect; they do not even show up in the 'code' during specifying of those settings. As the borders specs do.
The element (here the English flag) sticks at the 0, 0 coordinate on the upper limit of a range.
But shoould be 100-x and 100-y away from that 'section' border.

Though it can be placed as individual coordinate, manually specified in 'Properties' of that element - which ist not the intention. That would ask for trouble, if to be specified individually for an element on all 300 pages. That should be the job of the Style/CSS.

That English flag should be placed 100-x & 100-y away from the beginning of that (page) section.
Or away from the borders of a 'group of elements'.

But it is placed at 0, 0. Which happens to be at the upper limit of the page section (2nd shot),
disregarding the specs of the style/CSS totally.





 Page Sections





-------------
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf


Posted By: Hobby001
Date Posted: 04 Avr 2021 at 17:21
If I use an image in an absolute positioning configured group of elements, add a custom class ans add the following code.

.MyPreferredSpot{
top:10px !important;
left:20px !important;
}

It work


https://zupimages.net/viewer.php?id=21/13/f038.jpg" rel="nofollow">


-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: Hobby001
Date Posted: 04 Avr 2021 at 20:31
Put the CSS code into your base layer

-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: digizar
Date Posted: 05 Avr 2021 at 20:34
Originally posted by Hobby001 Hobby001 wrote:

Put the CSS code into your base layer


I understand the intention of that manual coding - no prob.

But what about the BaseLayer? That confuses me.
My general BaseLayer of Blumendigi.com does not have such an element.
So where to start, to attach, to create such manipulated Style?
Most of the following project pages do have individual layers (even stacked).

Do you mean the Layer of these individual page(s), containing such element(s)?
I could easily manage that with a special layer, just containing such (any) individual Style(s) - and include that layer in the page(s)
Which I guess is your proposal of the 'BaseLayer'.

May be, I still miss something of OE?
So better to ask once more.
Wink

Keep in mind, that I do NOT know much about HTML&CSS, this is why I am happy with OE.
But I still am able to learn.

Stay away from the Corona disaster.


-------------
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf


Posted By: Hobby001
Date Posted: 06 Avr 2021 at 03:02
My understanding is that you are looking for a way to standardise a position for multiple objects in multiple pages.

Creating a css class with the fiollowing code

.MyPreferredSpot{
top:10px !important;
left:20px !important;
}

provides a set of instructions that forces an element to be placed at 10/20 pk from the top left corner of the parent element in case of absolute positioning system.

To apply the instruction to an element you need to add the custom class MyPreferedSpot to the element.

Adding the CSS code to the base layer and attaching this layer to your different pages apllies the code to all pages therefore any element with custom class MyPrefredSpot will follow the instruction.

So in the base layer, click on Source Code

Click onn the Plus sign to add new code

Add a name that suit your preferences 

Select CSS type

Select Header position

Add the code as written up here

Then select any of the targetted elemement and add custom class MyPreferredSpot








-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: digizar
Date Posted: 06 Avr 2021 at 16:29
Originally posted by Hobby001 Hobby001 wrote:

My understanding is that you are looking for a way to standardise a position for multiple objects in multiple pages.

Exactly!
And I can see now the picture of the whole story.
That also brings me a step closer to understand the OE - and HTML/CSS.
Thank you very muchos, Hobby001 !

I did not yet check the result of your proposal, but it looks reasonable for me.
I will report. May take awhile.

The question is anyway, why doesnt that work with the standard specificions (for dummies like me)?
Not nessesary to answer now. But it keeps me wondering.



-------------
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf


Posted By: Hobby001
Date Posted: 06 Avr 2021 at 23:31
openElement produces css for each element.

In some cases you have to add !important to the code to bypass oe's css code


-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big



Print Page | Close Window

Forum Software by Web Wiz Forums® version 10.11 - http://www.webwizforums.com
Copyright ©2001-2012 Web Wiz Ltd. - http://www.webwiz.co.uk