Link to home
Start Free TrialLog in
Avatar of FaheemAhmadGul
FaheemAhmadGulFlag for United Kingdom of Great Britain and Northern Ireland

asked on

CSS to arrange 5 buttons in a grid such that 4 button lie hidden behind the 5th button (or grid)

User generated imageThis question is a modfficcation on a related question I had asked a long time ago and for which a perfect solution was provided very kindly by

Julian Hansen, August 2022. I include a link to the solution Julian had provided. 

I need help with CSS which can help me place 4 buttons in a grid such that the first 3 buttons are lying next to each other, such that button 2 in the middle takes 60% of the space and the 1 and 2 take 20% of the space. The 4th button should sit such that it completely covers the first three buttons, so that the user will only see button 4. Button 1, 2 and 3 should have a onClick function attached to them so that when clicked they give an alert ”I am button 1” (when the user clicks on left 20% part of button 4, “I am button 2” when the  user clicks anywhere on the right 20% of the button 4 and “I am button three” when the when the user clicks the middle 60% of the button 4.

So the basic functionality I need is that I have button which can call three different methods when clicked depending on which part of the button as have been clicked. If the let 20% is clicked we see an alert “I am button 1” and so forth.

I attach 2 images which further explains the functionality I need and how I would like to arrange the buttons. The first image is of my original question. The second image is of what I need now (which is basically a need for two buttons - one in the upper part of right 20% of the full component and the other occupying the lower half of right 20% of the full component. User generated image


https://www.marcorpsa.com/ee/t4009.html

ASKER CERTIFIED SOLUTION
Avatar of lenamtl
lenamtl
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial