The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Flexible layout
Tachu
post Mar 20 2023, 02:25 AM
Post #1





Group: Members
Posts: 3
Joined: 20-March 23
Member No.: 28,861



Hello,
I'd like to position the shapes in the attached sample with percentages of the height and width of the visible browser Window the page is displayed in (viewport).

In various attempts to implement the attached layout I have tried the style position, but I think that style only allows pixel positions. And the CSS grid seems to be too rigid to implement these more free positions. And flexbox seems to only allow top, center and bottom or left, center and right. Or perhaps I have overlooked something?

I'd be grateful for any suggestions, hints or URLs on what approaches are possible here.

Thank you Tachu Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 20 2023, 07:09 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Hello!

QUOTE(Tachu @ Mar 20 2023, 08:25 AM) *

In various attempts to implement the attached layout I have tried the style position, but I think that style only allows pixel positions.

You should be able to use e.g. percent, wv and wh units; but in smaller windows it's very likely that the content areas will overlap each other when using "position: absolute".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 20 2023, 09:00 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I think it would be hard to keep that layout in differently sized window however you do it. Unless you accept very varied text size.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:36 AM