K
K
Kirill2018-11-06 18:22:35
css
Kirill, 2018-11-06 18:22:35

How to properly arrange these elements?

I could just absolutely position everything and put them in their places, but there it would be crap with an adaptive. I tried to do it on svg, I don't know how to change the appearance of the active 'tab'.
Has anyone done something similar? Any ideas for implementation?
5be1b198bc943233593199.png

Answer the question

In order to leave comments, you need to log in

3 answer(s)
S
Sergey delphinpro, 2018-11-06
@TeslaGogol

Don't be smart. Saw on absolutes. Set sizes and positions as a percentage. Plus a couple of media queries to redistribute blocks on smaller screens.
And generally it is possible to implement also a normal flow, practically without positioning. Take a closer look - the blocks go in the usual order if they are floated. They just need to fix the height so that they do not bump into each other:
The first five floats should be located in their places. The sixth will not fit into the remaining space and will jump to the third line. You don’t need to float the last one, but fix the width and center it. Due to the fixed height, the space occupied by the third block will be the same as everyone else, and the content will come out and be as it should. As well as the seventh.
For adaptability, it's better not to fix the height in pixels, but to make it responsive to the block width (using the standard method through the bottom padding)
That's all.
A simple example to get started:

A
Archi1ect, 2018-11-06
@Archi1ect

You can also use CSS Grid to position elements.
Something like this:

A
Azim Kurt, 2018-11-06
@Symphony

masonjs.com
masonry.desandro.com callmecavs.com/bricks.js Just
needs to
be set up correctly.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question