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.
Related
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>
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 am trying to styling ol list. I almost performed all requirements, but I cannot to remove padding-left: 50px before p tag inside li.
I just need to set padding-left: 50px for the first line of li, but it sets padding-left: 50px for p also.
Please see the example: https://jsfiddle.net/8gm4zmc4/
As I understand ::after for li will not help to fix that.
Please advise how to set padding-left: 50px for the first line of li or remove padding-left: 50px before p.
That's because your p element is nested inside your li element, so everything inside the li will also move to the right when you set a padding. You can solve this by setting a negative margin-left on your .purchase-way__text like:
.purchase-way__list {
display: inline-block;
box-sizing: border-box;
text-align: left;
margin-top: 35px;
width: 100%;
counter-reset: foo;
}
.purchase-way__item {
position: relative;
counter-increment: li;
list-style: none;
box-sizing: border-box;
font-family: ProximaNovaBold, sans-serif;
font-size: 24px;
line-height: 0.833;
color: #01b04c;
margin-bottom: 80px;
padding-left: 50px;
}
.purchase-way__item::before {
content: counter(li);
position: absolute;
left: 0;
top: -6px;
background: #01b04c;
height: 32px;
width: 32px;
font-family: ProximaNovaRegular, sans-serif;
font-size: 18px;
color: #fff;
line-height: 32px;
text-align: center;
border-radius: 16px;
}
.purchase-way__text {
box-sizing: border-box;
text-align: left;
font-family: ProximaNovaRegular, sans-serif;
font-size: 14px;
line-height: 1.714;
color: #000;
margin-top: 30px;
margin-left: -50px;
}
<ol class="purchase-way__list">
<li class="purchase-way__item">
Lorem ipsum dolor sit amet
<p class="purchase-way__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec molestie tellus. Nam et neque a lectus vestibulum porttitor quis non nunc. Aenean luctus eu lorem id lobortis. Integer a tortor orci. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque ac est vel eros facilisis feugiat. Donec ornare ligula non fringilla hendrerit. In consequat faucibus ligula, ac venenatis velit dictum vitae. In in condimentum ex. Nulla lorem erat, fermentum non quam in, commodo molestie lacus.
Praesent feugiat sit amet lectus nec mattis.
</p>
</li>
<li class="purchase-way__item">
Lorem ipsum dolor sit amet
<p class="purchase-way__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec molestie tellus. Nam et neque a lectus vestibulum porttitor quis non nunc. Aenean luctus eu lorem id lobortis. Integer a tortor orci. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque ac est vel eros facilisis feugiat. Donec ornare ligula non fringilla hendrerit. In consequat faucibus ligula, ac venenatis velit dictum vitae. In in condimentum ex. Nulla lorem erat, fermentum non quam in, commodo molestie lacus.
Praesent feugiat sit amet lectus nec mattis.
</p>
</li>
<li class="purchase-way__item">
Lorem ipsum dolor sit amet
<p class="purchase-way__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec molestie tellus. Nam et neque a lectus vestibulum porttitor quis non nunc. Aenean luctus eu lorem id lobortis. Integer a tortor orci. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque ac est vel eros facilisis feugiat. Donec ornare ligula non fringilla hendrerit. In consequat faucibus ligula, ac venenatis velit dictum vitae. In in condimentum ex. Nulla lorem erat, fermentum non quam in, commodo molestie lacus.
Praesent feugiat sit amet lectus nec mattis.
</p>
</li>
</ol>
If your padding-left from li is 50px, you can set a margin-left on your nested p of -50px like I did in the example above.
It's probably best to put the title of each <li> (the part outside the <p>) in a <span> or other tag, and give it a separate style with padding-left:50px. Like so:
<li class="purchase-way__item">
<span class="purchase-way__header">HEADER</span>
<p class="purchase-way__text">PARAGRAPH HERE</p>
</li>
where "purchase-way__header" has the padding-left:50px attribute, and "purchase-way__item" does not.
You can give the first line the span tag, then give padding–left to span
You can add margin-left: -50px; to .purchase-way__text (= your p-tag)
This will move the paragraph to the left by 50px. (Since p is a child element of li, you can't "remove" the padding for it.)
Fiddle: https://jsfiddle.net/eeedckk4/