How to approach this type of layout
i have tried to make the button and the overflow people as the separate component and make them absolute, and for the other part i made it as background image....
72 Replies
I don't know what the question is
What the heck am i even looking at
yeah, i mean
i want to arrange the position of the orange box outside from the white container @StefanH @Lamer of Sweden
what is the list of possible approach and what is the best approach ?
i'd use position absolute
ok yeah i have seen kevin youtube video also, it's also possible with transform approach and position relative approach...
i mean transform and absolute positioning go hand in hand
if you want the box to take up space in the flow you could also use a grid here. but i'd only do that if required
ok
Personally would use grid, it’s excellent way to achieve stacking and overlapping content.
hmmm interesting, usually i was using flex, never really implemented grid approach...
but to make the content overlapping we still need control the insect(top,left,...) right ?
insects are not needed. not sure what good adding bugs to your code does but anyway
you'd define 3 rows like this and then assign the elements to sit in those rows
and if you put the red square after the white square in the dom it will naturally be drawn on top of it. no absolute positioning needed
But again i'd only do this if you explicitly want the red square to be part of the dom. That choice is up to you
to position it perfectly though youd also need columns and another row
e.g.
kind of confuse sir, is there a simple code example that i can see and run on my local ?
@StefanH @curiousmissfox
is that grid or flex also ?
I think @curiousmissfox had a full example? I only drew something in snipping tool
for example this is the starter template
<div class="parent">
<div class="bowl">
</div>
</div>
usually i made parent relative
then bowl relative
I think this is a good grid exercise though. Kevin made lots of grid videos, he aught to teach something very similar here
then push to the top
kevin did also teach this technique
made element relative and push
Yeah that's the absolute positioning solution which works fine. We just offered an alternative solution you can use if you want the red square to take up space in the flow. Because right now it's just going to overlap whatever is above which, which might be what you want. Depends on what you want really. These are just two different ways of doing it. Neither is better. It just depends on what you need
ok, i'm wondering about this
if i resize the design to small, how to make the bear also small ?
How do you want to constrain this? Can the white rectangle grow? How it grows is important so you know how the bear should grow with it
If the aspect ratio is constrained you can make the bear's width a percentage of the parent's width and then it'll always stay as big
it's just
width: 20% on the bearso let say that's on desktop
so max always like that, let's say the max-width is 2000px
so can't grow anymore
and let say mobile start < 992px
if you want it to stop growing you can then set a
max-width in addition to width which is set to an absolute pixel value (should really use rem)the problem is if it's resize down
"this element's width is 20% of that of the parent but cannot be bigger than 30rem"
wait grid or flex parent doesn't matter ?
if you specify a percentage value for width or height, that is based on the parent's size
please correct me if i'm wrong. percentage is honestly a measure i try to avoid
i'm not sure also
I mean it is based on the parent but there's always weird edge cases. In general it's based on the parent though
but
so this is working
width 100%
but if need to make the head of the bear out of the box
.container {
display: flex;
justify-content: center;
max-width: 2000px;
gap: 10px;
}
.parent{
flex: 0 1 500px;
background-color: red;
}
img {
width: 100%;
}
nvm, but my question is using flex is the right way on here ?
and i'm wondering when i should add width to an element ?
when should use % or px or other type ?
percentage is used if you want an element's size to be proportional with the parent's size. width: 100% is very common for example to make an element be as big as the parent (block level elements like divs are already take up 100% width so no need to declare it manually)
px is a pixel. The issue is that because different screens have different pixel density and sizes, 1:1 pixel scaling is almost never useful. Turn on "Desktop view" in your mobile browser and you'll see what it'd look like if 1px = 1px. Because of this we usually prefer using the
rem unit which is equivalent to 16px by default. "The lengths are perceptual: 16px looks roughly the same on a phone, laptop, or TV screen at typical viewing distance" - mdnMDN Web Docs
CSS values and units - Learn web development | MDN
CSS rules contain declarations, which in turn are composed of properties and values.
Each property used in CSS has a value type that describes what kind of values it is allowed to have.
In this lesson, we will take a look at some of the most frequently used value types, what they are, and how they work.
There's also unity like these which i never used. I guess they're useful in print?
ok
the mdn page i linked is really good btw
ok, anyway sir i'm wondering
if you have layout like this
let say red is button, purple is icon same like the other kinds of image
if me i'm goind to make bear and button separate component and make the other as background
but what's the most optimize way ?
I'd make the purple icon also a normal element in the flow
I guess you can do a lot with background images too but prefer to use real elements in cases where the size of an object can change
Background images have to either stretch or crop to accommodate different container sizes. They can't intelligently rearrange themselves
so you will export all the component separately ?
Also never use a background image for text because you can't select / copy it and a screen reader can't read it
yes that's why button i made separate
Honestly i find it hard to understand this example
Why is there a pentagram
that's just kind like sticker
I'd make that its own element yeah
but then what is the div structure looks like ?
I'd use background images only for things that are actually backdrops. Where it doesn't matter if something gets cropped off, like a landscape background or some kind of pattern
and if it's resize it's still okay and perfect ?
If you make it work then yeah
Programming is problem solving. There's no one way to do everything. You have to look at your design and then figure out how to use the tools available to you to make it work
You keep changing the design, so the way i'd build it also changes (this is actually really annoying at work lol)
You could make a grid like this
And then the flowers are either absolute positioned or a background image. Really depends on what they actually are
ok, i never implemented grid before
i need to watch some kevin video about grid
Kevin made tons of videos about it yeah
so do you mean the grid
will lock
the absolute/relative
element
?
not sure what you mean with lock
i mean limit
movement
so for example red button
can't go to the star area
The grid lets you position all the different elements nicely and when you resize the card, the elements will follow your grid's row and column sizes
owh ok, but why need that
?
You can configure the columns and rows like this
1fr means "take up as much space as you can"
auto means "be as big as the child wants to be but no bigger"
those grid lines are gonna be there but the bear simply spans over multiple rows
of course you won't actually see them. this is just debug visualization
owh ok so it's posibble to delete that so it become like this
ok
kevin suggest at outline isn't usually
you don't "delete" it. you just tell the element to take up multiple rows
ok
here you can see how the image is set up to take up multiple rows
