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

openElement

 > openElement General Discussion
  New Posts New Posts RSS Feed - CSS positioning of objects
  FAQ FAQ  Forum Search   Register Register  Login Login

CSS positioning of objects
 Post Reply Post Reply
Author
Message
  Topic Search Topic Search  Topic Options Topic Options
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: Dec 30 2015
Location: Germany Frankfu
Status: Online
Points: 742 		Post Options Post Options   Thanks (0) Thanks(0)   Quote digizar Quote  Post ReplyReply Direct Link To This Post Topic: CSS positioning of objects
    Posted: Feb 04 2020 at 4:16pm
Since ever I have trouble to understand,
why this CSS does not have influence in positionig of objects.
So far I positioned any object manually on its place > properties.
But that is getting pretty nasty.

Situation:
1) The definition in the CSS tells to place that object @420 x 0.
2) But the properties reveal it is placed @0 x 0 (blank x blank).
And infact is is placed @ 0 x 0 - which is wrong, as I think.
(yellow marks)
The objects are 'created' in a layer.
What do I miss?

Any other CSS specification works just fine.
With one exception: If the color of the border(s) is to be changed, also the size/thickness of the border has to be changed (temporarily).
I tried that trick 'positioning/thickness', too, but it did not have any impact.

How can I position an object (whatsover it might be, group of elements, button links, ...),
to the place defined in CSS?

1) CSS


2) Properties



Edited by digizar - Feb 04 2020 at 4:37pm
___________________________________
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: 6209 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Feb 04 2020 at 5:28pm
The positionning depend on the parent element's properties

There are two options embedded in OpenElement: Positionning Absolute or Relative

Add a group of elements in a blank page without layers attached.

The default page Positionning setup being Absolute, the element will be located at a fixed position on defined coordinates.  Change them for 0 0,  your group of elements will move to the page top, left corner.

Resize this group of elements to 800 x 600

Insert a second group of elements in it

It will stay where inserted.

Change the larger group of element's positionning for Relative

The smaller Group of Elements will move to the top left corner no mather the values enterred in position.

In Relative positionning you can select left, centerred or right as horizontal positionning.  Then you will have to use margins to position your element.

In reponsive web pages, Relative positionning is a powerfull tool.
https://denislafrance.net, OE training video
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6209 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Feb 04 2020 at 5:31pm
Temporarily change an element border color and thickness have to be done with css in response to a specific event.

Can you be more specific on your needs?
https://denislafrance.net, OE training video
Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: Dec 30 2015
Location: Germany Frankfu
Status: Online
Points: 742 		Post Options Post Options   Thanks (0) Thanks(0)   Quote digizar Quote  Post ReplyReply Direct Link To This Post Posted: Feb 05 2020 at 11:56pm
CSS Border colour:
it seems to be a bug, but one can live with.

When only the colour of the border is changed in the style, it will not have effect - 
unless you simultaneously 'force the color to be changed' by re-defining also the border size.

That means it defines the border thickness AND the border color.
If one does not change the thickness of the border (or may be something else but color),
it will not change the color - even if color is to be changed.
To affect the border color, it has to be changed together: color and thickness.
For me it looks like a bug.
Thicknes can then be redefined, the color is retained as defined.
The effect works only if the individual object's Property (Top and/or Left) is left blank.
It does not work with the Positioning, if these two entries are left blank in the Properties setting.


The size of an object can be changed, and it is in effect instantly, which is correct.

For me it's not a problem, because I was trapped once. But newcomers (as I was) may really be confused.
Still much harder to accept is, when a Folder ist deleted in the oe project's Site Explorer.
That definitlvely destroys the complete project.



The other problem still is (for me), not to be able to define the position (x-y) of an object via the Style/CSS, may it be a button or a group of elements.
Whatsoever is defined in the style (x-y), it has no effect, it will appear as blank (0-0) in the Properties.
Definition has to be defined in the object's Properties, individually for each object.
That is not CSS-conform. It can cause disaster with huge websites, if some global objects have to be relocated. I ran into that situation, but I live with that.
Most of my pages will stay fixed, no reponsiveness required. https://blumendigi.com/index.gb.htm
Size, text and color (exception above description) and other definitions work nicely as expected.


Edited by digizar - Feb 06 2020 at 1:14am
___________________________________
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: 6209 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Feb 06 2020 at 2:42am
OE is designed to allow basic users to add CSS code without even knowing it's CSS

Look at this page: https://denislafrance.net/border-color-change.htm and resize it, the border will change color.

Here is the code:

.borderAdapt{
border: 2px solid red;
}

.borderAdapt:hover{
border-color:purple;
}

@media only screen and (max-width:1199px){
.borderAdapt{
border-color:blue;
}
}

@media only screen and (max-width:768px){
.borderAdapt{
border-color:green;
}
}

If you want expert's results you need to develop your knowledge accordingly




Edited by Hobby001 - Feb 06 2020 at 2:54am
https://denislafrance.net, OE training video
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6209 		Post Options Post Options   Thanks (1) Thanks(1)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Feb 06 2020 at 2:43am
And let me tell you, that's the moment where OE started to be realy intersting to me.
https://denislafrance.net, OE training video
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6209 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Feb 06 2020 at 2:49am
Originally posted by digizar digizar wrote:

 
The other problem still is (for me), not to be able to define the position (x-y) of an object via the Style/CSS, may it be a button or a group of elements.
Whatsoever is defined in the style (x-y), it has no effect, it will appear as blank (0-0) in the Properties.
Definition has to be defined in the object's Properties, individually for each object.
That is not CSS-conform. It can cause disaster with huge websites, if some global objects have to be relocated. I ran into that situation, but I live with that.
Most of my pages will stay fixed, no reponsiveness required. https://blumendigi.com/index.gb.htm
Size, text and color (exception above description) and other definitions work nicely as expected.

Again, positionning depend on parent element's positionning mode.

You select the positionning mode then you use coordinates or margins depending on your selection.  This is standard CSS that OE offers the possibility to use (only Relative or Absolute) without writing the code.
https://denislafrance.net, OE training video
Back to Top
digizar View Drop Down
Senior Member
Senior Member
Avatar

Joined: Dec 30 2015
Location: Germany Frankfu
Status: Online
Points: 742 		Post Options Post Options   Thanks (0) Thanks(0)   Quote digizar Quote  Post ReplyReply Direct Link To This Post Posted: Feb 06 2020 at 3:21am
Originally posted by Hobby001 Hobby001 wrote:

OE is designed to allow basic users to add CSS code without even knowing it's CSS/CODE.
If you want expert's results you need to develop your knowledge accordingly
I figured that some time ago :-) - and that is why I'm still here.




Edited by Hobby001 - Feb 06 2020 at 11:31am
___________________________________
Ask questions only if there is no answer yet.
https://blumendigi.com
Back to Top
 Post Reply Post Reply
  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.