How to put Images or divs on top of another in html

In an HTML for my school website for an admission page, I was struggling to put the forms for admission or pictures of the forms on top of one another. Not literally on top but almost like line-by-line. here is a picture of the problem. And I want it to be central, what should I do?
No description
34 Replies
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
here is the code as well <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Admission</title> <style> body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; /* Background color for the page / } / Styling for the admission container / .admission-container { width: 700px; / Adjust the width as needed / overflow: hidden; border-radius: 10px; / Rounded corners / box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); / Box shadow on hover / transition: transform 0.3s, box-shadow 0.3s; text-align: center; margin-bottom: 20px; / Margin between containers / } / Styling for the admission image / .admission-image { width: 100%; height: auto; object-fit: cover; transition: transform 0.3s; } / Styling for the admission text / .admission-text { font-family: 'Times New Roman', Times, serif; color: black; margin: 10px 0; / Adjust the margin as needed / } / Hover effect on the admission container / .admission-container:hover { transform: scale(1.05); / Enlarge the image on hover / box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); / Increase shadow on hover */ } </style> </head> <body> <div class="admission-container"> <img class="admission-image" src="Screenshot 2023-10-05 215603.jpg" alt="Admission Image"> <div class="admission-text"> <p>This is the admission form for NASCD only for 2023</p> <p>This explains the requirements like: Admission time and deadline, required documents for admission.</p> </div> </div> <div class="admission-container"> <img class="admission-image" src="Screenshot 2023-10-05 215619.jpg" alt="Admission Image"> </div> </body> </html>
Zoë
Zoë14mo ago
Post code to https://pen.new/ instead
CodePen
...
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
the whole code it's still side-by-side
Zoë
Zoë14mo ago
So form elements on top of the image? I'd use grid and then apply the image to everything and then create columns and rows that line up with the image and then place the form elements into there. Actually it'd be simpler having a grid with 1 column and 1 row, then assign the image and the form to the same cell, and then do the rows and columns for the form elements. Would save assigning the image to all rows and columns. I just have to ask why are you doing it this way?
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
to be honest, I am asking myself. It was actually my friends problem, he gave it to me and somehow I couldn't solve it because it was literally 4AM and I needed to sleep for school that's why grid didn't work 😭 can someone literally customize the code 😭
Zoë
Zoë14mo ago
We don't have the images to work with. It would also be nice if you could put it into a codepen
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
hmm I gave the code to you oh yeah wait I'm giving the images
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
No description
No description
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
these 2 images
13eck
13eck14mo ago
For your code, please use code blocks, as you can see Discord's markdown is rendering some of it as font formatting. As mentioned before, please see #how-to-ask-good-questions (hint, code blocks start and end with three backticks (```))
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
it's the same I tried adding what you said but still doesn't work somehow
Zoë
Zoë14mo ago
I'm doing it now, at least the start which you or your friend can complete
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
Oh, thank you so much for this help tbh
Zoë
Zoë14mo ago
Getting there but this is horrible
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
yes 😭
Zoë
Zoë14mo ago
Also codepen is having issues
No description
No description
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
insane also you can add a head Called admission form
Zoë
Zoë14mo ago
No, that's an error, Codepen is having issues rn
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
CodePen having seizures fr you can use replit or other compilers
Zoë
Zoë14mo ago
I'd rather just wait
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
uh I need it like probably in 20 to 30 mins so wouldn't reccommend
Zoë
Zoë14mo ago
It's basically done it just needs positioning the inputs into the c1-c9 areas https://codepen.io/z-/pen/bGOQexW/910a536a4bc37cfadd7b1a11fb38abd7?editors=1100
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
ok
Zoë
Zoë14mo ago
I blind edited it and it might work but I can't see
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
uh ok same just copy paste the code here let me check on the other compilers done? um
Zoë
Zoë14mo ago
I haven't touched it since this. Again, CodePen isn't working but it's basically done
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
just give the code to me I'll check
Zoë
Zoë14mo ago
Here
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
uh ok it shows this
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
No description
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
nothing else
Zoë
Zoë14mo ago
It's basically done it just needs positioning the inputs into the c1-c9 areas
TheOnlyAnubabu
TheOnlyAnubabu14mo ago
ok done? @z- ::theProblemSolver::
Zoë
Zoë14mo ago
No, CodePen still not working All you need to do is move the inputs to the c1-c9 areas
Want results from more Discord servers?
Add your server