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>
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>
Related
I have try to set using flex. please check my demo my code
its possible using flote but my required using flex.
I set it up using Flex but I not found success in it. You help me...
my code
.cg-box-layout-two{display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;align-items: stretch;position: relative;}
.cg-box-layout-two .cg-box-name{flex: 0 0 100%;max-width: 100%;}
.cg-box-layout-two .cg-layout-img{flex: 0 0 36%;max-width:36%;box-sizing: border-box;border-radius: 6px;overflow: hidden;box-shadow:0 0px 10px rgba(0,0,0,0.2);position: relative;}
.cg-box-layout-two .cg-layout-img .cg-our-top-pick{position: absolute;background-color: #77b21d;color: #fff;font-size: 12px;font-weight: 700;text-transform: uppercase;padding: 4px 0px;transform: rotate(45deg);right: -68px;top: -23px;transform-origin: 0 0;width: 153px;box-sizing: border-box;text-align: center;white-space: nowrap;overflow: hidden;box-shadow: 1px 2px 7px rgba(0,0,0,0.2);}
.cg-box-layout-two .cg-layout-img .cg-li-photo{max-height:220px;padding: 32px 4px 16px;box-sizing: border-box;}
.cg-box-layout-two .cg-layout-content{flex: 0 0 calc(64% - 15px);max-width:calc(64% - 15px);box-sizing: border-box;padding:16px;position: relative;box-shadow:0px 0px 6px rgba(0,0,0,0.1);border-radius: 6px;overflow: hidden;margin-left: 15px;}
.cg-box-layout-two .cg-layout-img .cg-li-photo img{max-width: 100%;
display: block;
margin: 0 auto;
max-height: 180px;}
.cg-rate{position: relative;font-size: 20px;color: #0d3153;font-weight: bold;line-height: 20px;text-align: center;display: inline-block;padding: 0 15px;min-width: 100px;}
.cg-rate>span{font-size: 14px;display: block;line-height: 14px;}
.cg-rate:before,
.cg-rate:after{content: "";position: absolute;left: 0px;height: 31px;width: 15px;background-size: 100%;background-repeat: no-repeat;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAfCAMAAAAP3mfjAAAAb1BMVEUAAAANMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVN1VGFuAAAAJHRSTlMA82fJ6LAjEgaim3U93YpINs24V00N4tS9kX9vYFMrHxqolkKuk4aZAAAA40lEQVQY002PiRKDIAxEEw5F8b5q1dYe+//fWBgRmxkGHskmGwqRVq2/Ipbg8z26YwF5ci5fpIH6ZInS6LmI2hl4UCG+JrAA1g7+M0QF6bA7oFh2arJy+oyxeiOq77kJeYDTO1Be47AAsNFqBgX48mi4KR66CpDJfKceyAO7Vuo1ASJwwi4H3JJT3UhwWa18LWQM1ZcgHbbE77+dAwCsM3iwoaGCa8e94vT4eHaqXVIL9PQXH0BkY5BUbyHAFvoQ8NHhDTzJh3Wsaj9pCAIxGPKmdoq2u0m3OuKX4Re90i0gE6If9SsTmsaqO/oAAAAASUVORK5CYII=');}
.cg-rate:after{left: auto;right: 0px;top: 0;transform: rotateY(180deg);}
.cg-box-layout-two .cg-layout-img .cg-li-ratebadge,
.cg-box-layout-one .cg-layout-img .cg-li-ratebadge{margin:12px auto;text-align: center;}
<div class="cg-box-layout-two cg-red">
<div class="cg-layout-img">
<div class="cg-our-top-pick">Our Top Pick</div>
<div class="cg-li-photo">
<a href="https://www.amazon.com/dp/B01AZC3I6U/?tag=10b-gm-20" target="_blank" rel="nofollow" class="cg-aff-link ">
<img src="https://m.media-amazon.com/images/I/41h0H4SCgPL.jpg" class="cg-img-1" alt="Best Projector Under $200">
</a> </div>
<div class="cg-li-ratebadge"><div class="cg-rate"><span>7.8/10</span> <span>Our Score</span></div></div>
</div>
<div class="cg-layout-content">
<div class="cg-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p> </div>
<div class="cg-lc-button">
Check Price
</div>
</div>
</div>
There are a few things I modified.
I used two flex boxes, the first one has a direction of column, which contains tow vertical objects. the second one has a direction of row, which contains two horizontal objects. the image and the upper box are grouped into the second flex box since they have to show at the same row. the first flex box wraps everything.
I assigned a fixed height of the image box, 290px, since I've used JS to rearrange layout meanwhile detecting overflow occasions.
const upperText = document.querySelector('.cg-layout-content');
const lowerText = document.querySelector('.cg-layout-below');
function paragraphAppender(...sentences){
let flag = false;
for(let i = 0; i < sentences.length; i++){
let pNode = document.createTextNode(sentences[i]);
if(flag){
lowerText.appendChild(pNode);
}else{
let beforeAdd = 290;
upperText.appendChild(pNode);
if(upperText.getBoundingClientRect().height > beforeAdd){
flag = true;
upperText.removeChild(pNode);
}
}
}
}
let exp = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. ';
paragraphAppender(exp, exp, exp, exp);
.flex-row{
display: flex;
flex-direction: row;
margin-top: 2vmin;
}
.flex-column{
display: flex;
flex-direction: column;
}
.cg-box-layout-two{
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
align-items: stretch;
position: relative;
}
.cg-box-layout-two .cg-box-name{
flex: 0 0 100%;
max-width: 100%;
}
.cg-box-layout-two .cg-layout-img{
flex: 0 0 36%;
max-width:36%;
box-sizing: border-box;
border-radius: 6px;
overflow: hidden;
box-shadow:0 0px 10px rgba(0,0,0,0.2);
position: relative;
}
.cg-box-layout-two .cg-layout-img .cg-our-top-pick{
position: absolute;
background-color: #77b21d;
color: #fff;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
padding: 4px 0px;
transform: rotate(45deg);
right: -68px;
top: -23px;
transform-origin: 0 0;
width: 153px;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
overflow: hidden;
box-shadow: 1px 2px 7px rgba(0,0,0,0.2);
}
.cg-box-layout-two .cg-layout-img .cg-li-photo{
max-height:220px;
padding: 32px 4px 16px;
box-sizing: border-box;
}
.cg-box-layout-two .cg-layout-content{
flex: 0 0 calc(64% - 15px);
max-width:calc(64% - 15px);
box-sizing: border-box;
padding:16px;
position: relative;
box-shadow:0px 0px 6px rgba(0,0,0,0.1);
border-radius: 6px;
overflow: hidden;
margin-left: 15px;
}
.cg-layout-below{
box-sizing: border-box;
padding:16px;
position: relative;
box-shadow:0px 0px 6px rgba(0,0,0,0.1);
border-radius: 6px;
overflow: hidden;
}
.cg-box-layout-two .cg-layout-img .cg-li-photo img{
max-width: 100%;
display: block;
margin: 0 auto;
max-height: 180px;
}
.cg-rate{
position: relative;
font-size: 20px;
color: #0d3153;
font-weight: bold;
line-height: 20px;
text-align: center;
display: inline-block;
padding: 0 15px;
min-width: 100px;
}
.cg-rate>span{
font-size: 14px;
display: block;
line-height: 14px;
}
.cg-rate:before,
.cg-rate:after{
content: "";
position: absolute;
left: 0px;
height: 31px;
width: 15px;
background-size: 100%;
background-repeat: no-repeat;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAfCAMAAAAP3mfjAAAAb1BMVEUAAAANMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVN1VGFuAAAAJHRSTlMA82fJ6LAjEgaim3U93YpINs24V00N4tS9kX9vYFMrHxqolkKuk4aZAAAA40lEQVQY002PiRKDIAxEEw5F8b5q1dYe+//fWBgRmxkGHskmGwqRVq2/Ipbg8z26YwF5ci5fpIH6ZInS6LmI2hl4UCG+JrAA1g7+M0QF6bA7oFh2arJy+oyxeiOq77kJeYDTO1Be47AAsNFqBgX48mi4KR66CpDJfKceyAO7Vuo1ASJwwi4H3JJT3UhwWa18LWQM1ZcgHbbE77+dAwCsM3iwoaGCa8e94vT4eHaqXVIL9PQXH0BkY5BUbyHAFvoQ8NHhDTzJh3Wsaj9pCAIxGPKmdoq2u0m3OuKX4Re90i0gE6If9SsTmsaqO/oAAAAASUVORK5CYII=');
}
.cg-rate:after{
left: auto;
right: 0px;
top: 0;
transform: rotateY(180deg);
}
.cg-box-layout-two .cg-layout-img .cg-li-ratebadge,
.cg-box-layout-one .cg-layout-img .cg-li-ratebadge{
margin:12px auto;
text-align: center;
}
<div class='flex-column'>
<div class="cg-box-layout-two cg-red">
<div class='flex-row'>
<div class="cg-layout-img">
<div class="cg-our-top-pick">Our Top Pick</div>
<div class="cg-li-photo">
<a href="https://www.amazon.com/dp/B01AZC3I6U/?tag=10b-gm-20" target="_blank" rel="nofollow" class="cg-aff-link ">
<img src="https://m.media-amazon.com/images/I/41h0H4SCgPL.jpg" class="cg-img-1" alt="Best Projector Under $200">
</a> </div>
<div class="cg-li-ratebadge"><div class="cg-rate"><span>7.8/10</span> <span>Our Score</span></div></div>
</div>
<div class="cg-layout-content">
<div class="cg-text">
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p> -->
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p> -->
</div>
<div class="cg-lc-button">
Check Price
</div>
</div>
</div>
<div class="cg-layout-below">
<div class="cg-text">
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p> -->
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p> -->
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p> -->
</div>
<div class="cg-lc-button">
Check Price
</div>
</div>
</div>
</div>
Here are a few things to notice:
Paragraph contends are directly injected into .cg-layout-content and .cg-layout-below, since .cg-text has no text styling. in addition I don't know how you are going to arrange Check Price.
by using this method, you must make sure there are some context to write in as paragraph, otherwise the layout mess up.
This is the end product i'm supposed to create and i'm currently during this stage of the process and i'm stuck on how to do a line-through 3/4 links of the bottom border and how to bold mark both borders final paragraph. and also how to create space between the 2 borders as shown in the end product
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Uppgift 4E</title>
<style>
html {
background-color: lightslategrey;
}
body {
margin: auto;
width: 500px;
padding-bottom: 0.1px; /*knep för div margin */
background-color: #f0ffff;
text-align: center;
font-family: sans-serif;
}
h1 {
Color: purple;
}
#billy {
color: darkred;
border-style: solid;
border-color: purple;
border-width: 1.5px;
border-radius: 5px;
text-align: left;
}
#bob {
color: darkgreen;
border-style: solid;
border-color: purple;
border-width: 1.5px; /* border tjockhet */
border-radius: 5px; /* rundiga kanter på border */
text-align: left;
}
.two {
font-size: large;
}
.three {
font-size: small;
}
}
#bob > .two > a {
text-decoration: underline overline;
}
#bob > .three > a {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>Uppgift 4E</h1>
<div id="billy">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue porttitor.
</p>
<p class="two">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue porttitor.
</p>
<p class="three">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue porttitor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue porttitor.
</p>
</div>
<div id="bob">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue porttitor.
</p>
<p class="two">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue porttitor.
</p>
<p class="three">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue porttitor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue porttitor.
</p>
</div>
</body>
</html>
Adding two things help you margin left and right for the p tag and margin for div
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Uppgift 4E</title>
<style>
html {
background-color: lightslategrey;
}
body {
margin: auto;
width: 500px;
padding-bottom: 0.1px; /*knep för div margin */
background-color: #f0ffff;
text-align: center;
font-family: sans-serif;
}
h1 {
Color: purple;
}
#billy {
color: darkred;
border-style: solid;
border-color: purple;
border-width: 1.5px;
border-radius: 5px;
text-align: left;
margin: 10px;
}
#bob {
color: darkgreen;
border-style: solid;
border-color: purple;
border-width: 1.5px; /* border tjockhet */
border-radius: 5px; /* rundiga kanter på border */
text-align: left;
margin: 10px;
}
p {
margin-left: 5px;
margin-right: 5px;
}
.two {
font-size: large;
}
.three {
font-size: small;
}
}
#bob > .two > a {
text-decoration: underline overline;
}
#bob > .three > a {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>Uppgift 4E</h1>
<div id="billy">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue porttitor.
</p>
<p class="two">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue porttitor.
</p>
<p class="three">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue porttitor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue porttitor.
</p>
</div>
<div id="bob">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue porttitor.
</p>
<p class="two">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue porttitor.
</p>
<p class="three">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue porttitor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue porttitor.
</p>
</div>
</body>
</html>
I have been trying to figure this out ever since earlier. I've managed to figure out how to keep the navbar in place, but now that I did, the content goes over it and it won't shrink whenever I would resize the browser. I'm still learning how to code so any help and feedback would be really appreciated.
I'd like for the transparent background and the text to shrink or follow along whenever I resize the browser with the navbar in place. Here are my codes.
html,
body {
height: 100%;
margin: 0;
font-size: 20px;
background-image: url('bg2.jpg');
background-size: cover;
background-attachment: fixed;
}
img {
width: 200px;
height: 80px;
padding: 20px 20px 20px 0;
margin-left: 10px;
}
* html .clearfix {
height: 1%;
overflow: visible;
}
* html .clearfix {
min-height: 1%;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
ul {
width: 100%;
margin: 0;
padding: 0;
white-space: nowrap;
}
ul li {
list-style: none;
padding-left: 30px;
line-height: 60px;
}
ul li:firstchild {
border-top: 1px solid white;
}
ul li:hover {
background-color: #d88d4c;
}
ul li a {
text-decoration: none;
color: white;
display: block;
line-height: 60px;
padding: 10%;
}
#image {
width: 100%px;
height: 50%;
}
#container {
width: 700px;
text-align: left;
border: none;
padding: 24px;
margin: 5% 25%;
color: #fff;
background: rgba(31, 22, 25, 0.5);
border-radius: 5%;
}
#right {
width: 85%;
height: auto;
position: absolute;
right: 0;
}
#left {
float: left;
width: 15%;
height: 100%;
position: fixed;
}
.club {
width: 150px;
height: 110px;
}
.bacon {
width: 150px;
height: 110px;
}
.pork {
width: 150px;
height: 110px;
}
.section {
margin: 60px 50px;
}
.section h1 {
font: 55px/65px Helvetica, sans-serif;
}
.section p {
font: 15px/25px Helvetica, sans-serif;
}
nav {
z-index: 500;
float: left;
background-color: #1f1619;
height: 100%;
}
.nav li {
display: inline;
}
.nav a {
color: #5a5a5a;
font-size: 20px;
font-weight: bold;
padding: 14px 10px;
}
.nav {
position: absolute;
top: 20px;
right: 0px;
}
.content {
padding: 0 5% 0% 2%;
}
<!DOCTYPE html>
<html>
<head>
<title>The Watershed</title>
<link rel="stylesheet" type="text/css" href="watershed.css">
</head>
<body>
<div id="left">
<nav>
<div class="logo">
<img src="logo.png">
</h4>
</div>
<ul>
<li> HOME</li>
<li> ABOUT</li>
<li> MENU</li>
<li> CONTACT</li>
</ul>
</nav>
</div>
</div>
<div id="right">
<div id="container">
<div class="content">
<div class="section">
<h1><a name="home">HOME</a></h1>
<p>Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise
non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros.
Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis. </p>
</p>
</div>
<div class="section">
<h1><a name="about">ABOUT US</a></h1>
<p>Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise
non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros.
Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis. </p>
</p>
</div>
<div class="section">
<h1><a name="menu">MENU</a></h1>
<p>Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise
non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros.
Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis. </p>
<div id="image"><img src="be.jpg" class="bacon" alt="bacon and eggs">
<img src="cs.jpg" class="club" alt="club sandwich">
<img src="hu.jpg" class="pork" alt="humba"></div>
</div>
<div class="section">
<h1><a name="contact">CONTACT</a></h1>
<p>Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise
non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros.
Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis. </p>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Is this you want
html,
body {
height: 100%;
margin: 0;
font-size: 20px;
background-image: url('bg2.jpg');
background-size: cover;
background-attachment: fixed;
}
img {
width: 200px;
height: 80px;
padding: 20px 20px 20px 0;
margin-left: 10px;
}
* html .clearfix {
height: 1%;
overflow: visible;
}
* html .clearfix {
min-height: 1%;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
ul {
width: 100%;
margin: 0;
padding: 0;
white-space: nowrap;
}
ul li {
list-style: none;
padding-left: 0;
line-height: 60px;
text-align: center;
}
ul li:firstchild {
border-top: 1px solid white;
}
ul li:hover {
background-color: #d88d4c;
}
ul li a {
text-decoration: none;
color: white;
display: block;
line-height: 60px;
padding: 10%;
}
#image {
width: 100%px;
height: 50%;
}
#container {
width: 63%;
text-align: left;
border: none;
padding: 24px;
margin: 5% auto;
color: #fff;
background: rgba(31, 22, 25, 0.5);
border-radius: 5%;
max-width: 100%;
}
#right {
width: 83%;
height: auto;
position: absolute;
right: 0;
}
#left {
float: left;
width: 17%;
height: 100%;
position: fixed;
}
.club {
width: 150px;
height: 110px;
}
.bacon {
width: 150px;
height: 110px;
}
.pork {
width: 150px;
height: 110px;
}
.section {
margin: 60px 50px;
}
.section h1 {
font: 55px/65px Helvetica, sans-serif;
}
.section p {
font: 15px/25px Helvetica, sans-serif;
}
nav {
z-index: 500;
float: left;
background-color: #1f1619;
height: 100%;
max-width: 100%;
}
.nav li {
display: inline;
}
.nav a {
color: #5a5a5a;
font-size: 20px;
font-weight: bold;
padding: 14px 10px;
}
.nav {
position: absolute;
top: 20px;
right: 0px;
}
.content {
padding: 0 5% 0% 2%;
}
<div id="left">
<nav>
<div class="logo">
<img src="logo.png">
</div>
<ul>
<li> HOME</li>
<li> ABOUT</li>
<li> MENU</li>
<li> CONTACT</li>
</ul>
</nav>
</div>
<div id="right">
<div id="container">
<div class="content">
<div class="section">
<h1><a name="home">HOME</a></h1>
<p>Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non
velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam
ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis. </p>
</div>
<div class="section">
<h1><a name="about">ABOUT US</a></h1>
<p>Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non
velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam
ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis. </p>
</div>
<div class="section">
<h1><a name="menu">MENU</a></h1>
<p>Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non
velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam
ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis. </p>
<div id="image"><img src="be.jpg" class="bacon" alt="bacon and eggs"> <img src="cs.jpg" class="club" alt="club sandwich"> <img src="hu.jpg" class="pork" alt="humba"></div>
</div>
<div class="section">
<h1><a name="contact">CONTACT</a></h1>
<p>Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non
velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam
ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis. </p>
</div>
</div>
</div>
</div>
I'm trying to align a block of text so it looks like in the image. However, without acceptable result. The text is located in the floating div which is repeating. Same divisions are floating next to each other.
My HTML code:
<div id="bottomPanel">
<div class="bottomItem">
<img src="image.png" alt="mouse" class="imgBottom">
Lorem ipsum dolor sit amet
<p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
</div>
</div>
My CSS code:
#bottomPanel {
float: left;
width: 100%;
text-align: center;
}
.bottomItem {
float: left;
width: 100%;
margin-top: 10px;
background-color: #e6e6e6;
}
.imgBottom {
float: left;
padding-top: 25px;
padding-left: 14px;
}
.item_bottomDesc {
float: left;
font-family: Arial;
font-weight: bold;
font-size: 12px;
text-decoration: none;
color: #133855;
padding-top: 42px;
padding-left: 18px;
display: block;
}
.item_bottomAbout {
float: left;
font-family: Arial;
font-size: 12px;
width: 376px;
height: auto;
text-align: justify;
display: block;
padding-top: 50px;
color: #7b7a79;
}
This is how the elements should look like:
The text I can't align properly is the long one.
Division has 100% width which is approx. 774px. bottomPanel is a div where all floating .bottomItem are located.
Any ideas?
So not much wrong here overall. Just that you have a few extra things you don't need.
Namely, bottomDesc and bottomAbout do not need to be floated, and the padding-top for those two elements need adjusting too.
I have also added an explicit width/height for the image, feel free to adjust as needed but it's a good idea to define it. I also replaced its padding with appropriate margins.
Finally, I removed the #bottomPanel styles altogether - again float is not needed here, and width:100% is default anyway. Also, the text-align:center was unnecessary.
Here's the revised code for you to look at:
.bottomItem {
float: left;
width: 100%;
margin-top: 10px;
background-color: #e6e6e6;
}
.imgBottom {
float: left;
margin: 14px;
width: 100px;
height: 100px;
}
.item_bottomDesc {
font-family: Arial;
font-weight: bold;
font-size: 12px;
text-decoration: none;
color: #133855;
padding-top: 14px;
padding-left: 18px;
display: block;
}
.item_bottomAbout {
font-family: Arial;
font-size: 12px;
width: 376px;
height: auto;
text-align: justify;
display: block;
}
<div id="bottomPanel">
<div class="bottomItem">
<img src="http://placehold.it/100x100" alt="mouse" class="imgBottom">
Lorem ipsum dolor sit amet
<p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
</div>
</div>
Instead of float i suggest you use flexbox for this, and you dont have to use padding to get vertical align.
.bottomItem {
display: flex;
flex-direction: row;
align-items: center;
margin: 10px;
}
.right {
max-width: 60%;
margin: 0 10px;
}
<div id="bottomPanel">
<div class="bottomItem">
<img src="http://placehold.it/150x150">
<div class="right">
Lorem ipsum dolor sit amet
<p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
</div>
</div>
<div class="bottomItem">
<img src="http://placehold.it/150x150">
<div class="right">
Lorem ipsum dolor sit amet
<p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
</div>
</div>
<div class="bottomItem">
<img src="http://placehold.it/150x150">
<div class="right">
Lorem ipsum dolor sit amet
<p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
</div>
</div>
</div
I have created a list of boxes with text inside that are clickable, however IE sets the text above the link, so when hovering over the text it prioritizes it making the link no longer work. Chrome + Firefox work as intended.
Also I would like to see if a fix is possible without the use of javascript or jQuery, if possible. I also need it to support IE8+.
Here is the jsfiddle.
HTML:
<!DOCTYPE html>
<html>
<body>
<ul class="container">
<li class="optionBox"> <i class="reporting"></i>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
dictum lacinia.</p>
</li>
<li class="optionBox"> <i class="reporting"></i>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
dictum lacinia.</p>
</li>
<li class="optionBox"> <i class="reporting"></i>
Lorem ipsum dolor sit amet.
<p>CLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
dictum lacinia.</p>
</li>
<li class="optionBox"> <i class="reporting"></i>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
dictum lacinia.</p>
</li>
<li class="optionBox"> <i class="reporting"></i>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
dictum lacinia.</p>
</li>
<li class="optionBox"> <i class="reporting"></i>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
dictum lacinia.</p>
</li>
<li class="optionBox"> <i class="reporting"></i>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
dictum lacinia.</p>
</li>
<li class="optionBox"> <i class="reporting"></i>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
dictum lacinia.</p>
</li>
</ul>
</body>
</html>
CSS:
.container {
overflow: hidden;
width: 1000px;
list-style: none;
margin: 15px;
padding: 0;
}
.optionBox {
float: left;
overflow: hidden;
width: 400px;
height: 125px;
cursor: pointer;
margin: 0.3em;
padding: 0.5em 0.5em 2em 0.5em;
color: #555;
background: transparent;
border: solid 1px #DDD;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .1);
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.reporting {
position: absolute;
background:url('http://s13.postimage.org/w73u674ur/icon.png') no-repeat;
float: left;
width:30px;
height:30px;
}
a {
position: absolute;
width: 340px;
height: 115px;
font-size: 1.2em;
padding-left: 3.8em;
color: #08C;
text-decoration: none;
}
a:hover{
text-decoration:underline;
}
p {
font-size: 1.2em;
margin: 1.6em 0 0 3.8em;
}
body {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 20px;
color: #333;
}
This is a bug in IE with absolute positioned anchor elements.
The most common workaround is to set a background to the anchor. However, since you obviously don't want the link to hide the text below it, you'll need to set a transparent background image. In order to do that, I usually prefer to set the background to an existing path that would serve as an invalid image.
For example:
a {
position:absolute;
/* ... */
background:url('about:blank');
}
See jsFiddle demo
Alternatively, you can also create an actual transparent image and set it as the background.