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 😭