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 Reverse Sort Order
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5528
Direct Link To This Post Topic: CSS positioning fails SOLVED
    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
Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: 30 Dec 2015
Location: Germany Frankf
Status: Offline
Points: 650
Direct Link To This Post 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
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5528
Direct Link To This Post 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






Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: 30 Dec 2015
Location: Germany Frankf
Status: Offline
Points: 650
Direct Link To This Post 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.


Edited by digizar - 05 Avr 2021 at 21:21
___________________________________
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: 5528
Direct Link To This Post Posted: 04 Avr 2021 at 20:31
Put the CSS code into your base layer
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5528
Direct Link To This Post 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


Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: 30 Dec 2015
Location: Germany Frankf
Status: Offline
Points: 650
Direct Link To This Post 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





Edited by digizar - 04 Avr 2021 at 13:19
___________________________________
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: 5528
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
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5528
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
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: 30 Dec 2015
Location: Germany Frankf
Status: Offline
Points: 650
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
 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,031 seconds.