Issue
I want to put a quote block over an image, but I don't know how. I tried using absolute positioning but it ends up at the top of the page instead of the section the HTML tag of it is on. I tried (using my basic HTML knowledge) to position it lower but, every time it either doesn't move or it just disappears completely.
quote block
[![enter image description here][1]][1]
image/lower section of website
[![enter image description here][2]][2]
upper section of website
[![enter image description here][3]][3] Here's my code:
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
body {
font-family: 'Playfair Display', serif;
color: white;
background-color: rgb(109, 107, 107);
cursor: default;
}
header {
background-color: rgb(80, 79, 79);
padding: 30px;
margin: -20px -8px -20px -18px;
width: auto;
text-align: center;
}
#title {
font-size: 40px;
}
#image {
border: 2px solid white;
}
#img-caption {
font-style: italic;
}
#img-div {
text-align: center;
}
#accomplishments-section {
background-color: rgb(151, 146, 140);
padding: 50px;
margin: -20px -5px -20px -20px;
}
footer {
text-align: center;
background-color: rgb(228, 219, 209);
margin: -20px -8px -20px -18px;
padding: 15px;
color: rgb(80, 79, 79);
}
#left-picture {
width: 500px;
height: 500px;
position: relative;
border-radius: 3%;
}
h2 {
font-size: 30px;
}
p {
font-weight: 550;
cursor: text;
}
#tribute-info {
font-size: larger;
}
#quote-text {
background-color: rgb(182, 177, 170);
padding: 30px;
border-radius: 5px;
position: absolute;
left: 50%;
top: 50%;
}
a {
color: rgb(80, 79, 79);
}
a:hover {
color: rgb(104, 104, 104);
}<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<title>A Malcolm X Tribute Page</title>
</head>
<body>
<header>
<h1 id="title">Malcolm X</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit nec orci quis facilisis. Nulla
molestie aliquam dui non ultrices. </p>
</header>
<!-- <hr /> -->
<section>
<main id="main">
<h2 style="margin-top: 50px;">About Malcolm</h2>
<figure>
<div id="img-div">
<img id="image"
src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fanswersafrica.com%2Fwp-content%2Fuploads%2F2016%2F02%2FmalcolmX.jpg&f=1&nofb=1"
alt="Malcolm speaking on a podium" />
<figcaption id="img-caption">Malcolm making a speech.</figcaption>
</div>
</figure>
<p id="tribute-info" style="margin-bottom: 40px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit commodo arcu a maximus. Sed
volutpat imperdiet augue, eu maximus diam malesuada et. Donec ac scelerisque elit. Nunc non ex tempor
felis auctor rhoncus. Nulla viverra ipsum ac volutpat bibendum. Aliquam bibendum lorem quam, nec
convallis sem dictum sed. Suspendisse fermentum, sem eget suscipit rhoncus, metus lorem varius nulla, at
tempor felis sem nec nunc. Morbi velit nulla, mollis a finibus gravida, dignissim eu nisl. Integer
rhoncus orci id volutpat vulputate. Suspendisse semper dui eu vehicula cursus. Praesent lacus est,
fringilla a diam eget, scelerisque dapibus eros. Maecenas velit justo, posuere et lacus id, tempor
auctor turpis. Vestibulum finibus magna eget turpis egestas, sit amet fringilla nibh fermentum. Etiam at
velit dolor. Praesent venenatis non dolor id gravida.
</p>
</main>
</section>
<hr />
<section id="accomplishments-section">
<h2>Notable Accomplishments</h2>
<q id="quote-text"><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></q>
<img id="left-picture"
src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F1200%2F1*BlFeXofPFQdHsxa8JWJZBg.jpeg&f=1&nofb=1"
alt="" />
<!-- separation -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<footer>©2021 - To learn more about Malcolm, <a href="#" id="tribute-link" target="_blank"
title="Malcolm X">visit his wiki page</a>.</footer>
</body>
</html>Solution
You need to set position: relative on the parent element that contains the image and the quote. Then set position: absolute on the qoute.
div {
position: relative;
width: 200px;
}
p {
position: absolute;
background-color: lightpink;
padding: 10px;
top: 50%;
left: 0;
right: 0;
margin: 0;
}<div>
<img src="https://via.placeholder.com/200"/>
<p>Lorem ipsum.</p>
</div>Answered By - Lundstromski Answer Checked By - Senaida (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.