design help

hey there, i'm wondering how i would be able to create an overlap design as seen here where the image is a 50/50 split between inside and outside the black div element. i've attatched a codepen of what i've got so far (for mobile view). Anyone have any tips on how to achieve this? https://codepen.io/deerCabin/pen/mdQBjag
R
CodePen
Couply
...
18 Replies
Ssadiq Roy
Ssadiq Roy•17mo ago
Do you want the image to cut 50/50 of the black div showing the currency?
Myndi
Myndi•17mo ago
https://codepen.io/myntsu/pen/xxQPRYG Here you have an example. There's many ways to do it, but this is one of them.
snxxwyy
snxxwyy•17mo ago
ah so for each "product" container i'd have to have a before or after psuedo class of the company icon container? sorry, what do you mean?
Myndi
Myndi•17mo ago
It could be, you can do it with a regular div as well. There's multiple ways of achieving it.
snxxwyy
snxxwyy•17mo ago
the site is also responsive so the one column of nike trainer boxes turn into two when it reaches tablet size etc, so would regular divs be the way to go as i'm making a grid container around them?
Myndi
Myndi•17mo ago
You could do either way. Like I mentioned, there's many ways of achieving it. Above's example is using a ::after, could be a ::before too.
Ssadiq Roy
Ssadiq Roy•17mo ago
I couldn't get your objective
snxxwyy
snxxwyy•17mo ago
i've experimented with it and came up with something that sorta works but even that comes with an error 😅 the black box container holds the brand logos and nike shoe boxes too with a max-height property set on it, but it doesn't seem to recognise the end of the container where the boxes end but rather where the max height property ends, which makes sense of course, so when i add a new section it appears underneath the black box rather than underneath the shoe containers as shown here. For this specific design i'm going to try to utilize divs but am just completely confused about how to go about the design. I've updated the codepen if that helps. https://codepen.io/deerCabin/pen/mdQBjag
R
CodePen
Couply
...
Myndi
Myndi•17mo ago
This happens for one reason. Since you pulled each of the element's inside the products section out of the flow, then the whole products section becomes 0 height, 0 width. That's why the footer is sitting there.
snxxwyy
snxxwyy•17mo ago
so i make the products div a height of 100%?
Myndi
Myndi•17mo ago
The width of the section is determined by the tag, in this case <section> that comes with width: 100% by default, and the height is set to auto, and the height is evaluated based on the content itself. height: 100% wouldn't do anything.
snxxwyy
snxxwyy•17mo ago
ah yeah because i've set the max width the content is what's in the black box, i see now
Myndi
Myndi•17mo ago
The issue is here:
section.offers {
max-height: 25em;
}
section.offers {
max-height: 25em;
}
The height is being forced. That's why the footer is sitting at that exact position, because it won't grow higher than that. If you want to keep that black box and the elements under neath, you need to make a div just for the black-box, and let the section's offer to naturally expand. Usually it's not good to fixate heights, unless you know what it is for.
snxxwyy
snxxwyy•17mo ago
ah i see i see, so from what you've said, if i keep the brand logos div and shoe box div wrapped in the same container, remove the fixated height on the contaienr, make the container holding both of them position: relative; and have a seperate div for the black box as you've said with position: absoloute; and a z-index: -1; then position it at the top of the container, that'd do the trick sufficiently?
Myndi
Myndi•17mo ago
Well, in this particular situation, trying would be better. Give it a try, and let me know how it goes :)
snxxwyy
snxxwyy•17mo ago
yeah that seems to have worked perfectly 🙂 thank you for your help with this, you must see me in this channel frequently and it must get annoying having to explain basic things constantly 😅, some things are a little difficult to grasp at first look but after explanation etc become easier
Myndi
Myndi•17mo ago
That's completely fine. This is the purpose of this channel, for people to ask, learn and help ThumbsUp it up.
snxxwyy
snxxwyy•17mo ago
will do! starting to love css ngl 😅
Want results from more Discord servers?
Add your server