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?
34 Replies
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>
the whole code
it's still side-by-side
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?
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 😭
We don't have the images to work with. It would also be nice if you could put it into a codepen
hmm
I gave the code to you
oh yeah
wait
I'm giving the images
these 2 images
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 (```))
it's the same
I tried adding what you said
but still doesn't work somehow
I'm doing it now, at least the start which you or your friend can complete
Oh, thank you so much for this help tbh
Getting there but this is horrible
yes 😭
Also codepen is having issues
insane
also you can add a head
Called admission form
No, that's an error, Codepen is having issues rn
CodePen having seizures fr
you can use replit
or other compilers
I'd rather just wait
uh
I need it like probably in 20 to 30 mins
so
wouldn't reccommend
It's basically done it just needs positioning the inputs into the c1-c9 areas https://codepen.io/z-/pen/bGOQexW/910a536a4bc37cfadd7b1a11fb38abd7?editors=1100
ok
I blind edited it and it might work but I can't see
uh
ok
same
just copy paste the code here
let me check on the other compilers
done?
um
I haven't touched it since this. Again, CodePen isn't working but it's basically done
just give the code
to me
I'll check
Here
uh
ok
it shows this
nothing else
It's basically done it just needs positioning the inputs into the c1-c9 areas
ok
done?
@z- ::theProblemSolver::
No, CodePen still not working
All you need to do is move the inputs to the c1-c9 areas