Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Im trying to remove some whitespace from the bottom of my website.
I tried to adjust the .product overflow to hidden but that didnt work.
image of the whitespace im trying to remove
here's my code:
https://jsfiddle.net/w7zemk0d/
Any help would be appreciated :)
The problem is that the last div is being sized using the height of the elements and assumes that the three plan cards are underneath each other, because of that the "prices" div takes up so much vertical space.
If you remove the absolute positioning and switch to a flex layout for the div, there is no gap at the bottom anymore:
body {
overflow-x: hidden;
overflow-y: auto;
background: linear-gradient(90deg, rgb(217, 217, 217, 0.85), rgb(255, 255, 255, 0.85)),url(https://i.pinimg.com/originals/5d/9d/dd/5d9dddca471960cd09ced9539ccb85d7.jpg);
}
#header {
font-family: quicksand;
font-size: 25px;
position: relative;
left: 105px;
top: -80px;
color: white;
}
#header-div {
width: 2000px;
height: 75px;
box-shadow: 5px 5px 8px rgb(128, 128, 128);
background-color: rgb(255, 202, 103);
position: relative;
top: -10px;
left: -10px;
}
#header-img {
position: relative;
top: -12px;
left: 5px;
}
#email {
overflow-x: auto !important;
overflow-y: auto !important;
margin: 20px;
width: 500px;
height: 32px;
border: 1px solid black;
border-radius: 5px;
font-family: quicksand;
font-size: 20px;
}
#email-div {
margin: 20px;
text-align: center;
}
#email-label {
font-family: quicksand;
font-size: 20px;
}
#g-btn {
width: 150px;
height: 30px;
background-color: rgb(255, 194, 81);
font-family: quicksand;
font-size: 18px;
border: none;
border-radius: 5px;
}
#g-btn:hover {
animation-name: button-animation;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes button-animation {
100% {
background-color: rgb(255, 216, 143);
}
}
#nav-links {
position: relative;
left: 1050px;
top: -123px;
display: flex;
flex-direction: column;
}
#nav-links li {
display: inline;
font-family: quicksand;
font-size: 20px;
}
#nav-links a {
color: white;
text-decoration: none;
word-spacing: 5px;
}
#features {
text-align: center;
}
.features-text {
font-family: quicksand;
font-size: 25px;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
left: 60px;
top: -35px;
}
#padlock {
position: relative;
top: 35px;
left: -400px;
}
#padlock-text {
top: -90px;
}
#p-header {
position: relative;
top: -60px;
left: -235px;
}
#location {
position: relative;
left: -400px;
top: -10px;
}
#location-text {
position: relative;
top: -145px;
left: 80px;
}
#l-header {
position: relative;
top: -120px;
left: -200px;
}
#mobile {
position: relative;
left: -400px;
top: -65px;
}
#mobile-text {
position: relative;
top: -200px;
left: 160px;
}
#m-header {
position: relative;
top: -185px;
left: -230px;
}
.header-text {
font-family: quicksand;
font-size: 30px;
}
#video {
display: flex;
justify-content: center;
position: relative;
top: -150px;
}
/* Start Of Danger Zone */
.product {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 1px solid black;
border-radius: 5px;
width: 350px;
font-family: quicksand;
margin: 10px;
background-color: white;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
.product li {
list-style: none;
}
.product > .level {
background-color: #ddd;
color: black;
padding: 15px 0;
width: 100%;
border-radius: 5px;
text-transform: uppercase;
font-weight: bolder;
}
.button {
width: 100px;
height: 30px;
background-color: rgb(252, 189, 17);
border: none;
border-radius: 5px;
margin: 10px;
font-family: quicksand;
color: white;
font-size: 20px;
position: relative;
top: -15px;
}
.price {
font-size: 30px;
margin: 10px;
}
#prices{
display:flex;
width: fit-content;
max-width:100%;
margin: auto;
}
.perks {
position: relative;
top: -15px;
}
/* End Of Danger Zone*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FCC: VPN Product Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fccplpstylesheet.css">
</head>
<body>
<div id="main">
<div id="header-div">
<nav id="nav-bar">
<img id="header-img" src="project Images/vpn.jpeg" width="100px" alt="company logo">
<div id="header">Prive9000 VPN Service</div>
<div id="nav-links">
<ul>
<li> Features <span class="middot"> ·</span> </li>
<li> Pricing <span class="middot"> ·</span> </li>
<li> Mobile App </li>
</ul>
</div>
</nav>
</div>
<div id="email-div">
<form action="https://www.freecodecamp.org/email-submit)." id="email-form">
<label for="email" id="email-label"> Please Enter Your Email: <br>
<input id="email" type="email" placeholder=" Enter Your Email" required> <br>
</label>
<button type="submit" id="g-btn">GET STARTED</button>
</form>
</div>
<div id="features">
<img id="padlock" src="Project Images/padlock-key.jpeg" width="100px" height="95px" alt="padlock">
<h2 class="header-text" id="p-header">Privacy Ensured</h2>
<p class="features-text" id="padlock-text">Your Information Is Safe With Us; Privacy Will Never Be A Worry Again</p>
<img id="location" src="Project Images/place-localizer.jpeg" width="100px" height="95px" alt="location-pointer">
<h2 class="header-text" id="l-header">Change Your Location</h2>
<p class="features-text" id="location-text">Change Your Country Whenever You Want!; Connect To Over 190+ Countries</p>
<img id="mobile" src="Project Images/built-mobile.jpeg" width="100px" height="95px" alt="mobile-graphic">
<h2 class="header-text" id="m-header">For All Platforms</h2>
<p class="features-text" id="mobile-text">Apps Built For Both Android And iOS Aswell; Stay Safe No Matter What Platform Your On</p>
</div>
<div id="video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XP4rSoBS_iw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Start Of Danger Zone-->
<div id="prices">
<div class="product" id="free">
<div class="level">Free Plan</div>
<div class="price">Free</div>
<ul class="perks">
<li>No Payments; 100% Free</li>
<li>Connect To Over 20+ Countries</li>
<li>Ads Included</li>
<li>Doesn't Allow Country Swap</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="paid-monthly">
<div class="level">Monthly Paid Plan</div>
<div class="price">$100</div>
<ul class="perks">
<li>$100 per Month</li>
<li>Connect To Over 100+ Countries</li>
<li>Ads Included</li>
<li>Allows Country Swap For Netflix Only</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="yearly-paid">
<div class="level">Yearly Paid Plan</div>
<div class="price">$800</div>
<ul class="perks">
<li>$800 per Year</li>
<li>Connect To ALL Countries</li>
<li>Ad Free</li>
<li>Allows Country Swap For All Platfroms</li>
</ul>
<button class="button">Select</button>
</div>
</div>
</div>
<!--End Of Danger Zone-->
</div>
</body>
</html>
Your problem is not that you are using absolute positioning, it is because you aren't using absolute positioning. Change relative to absolute on #paid-monthly and #paid-yearly and you should be all set. You'll also need to change top: for both of them as indicated. This will preserve your staggered cards.
body {
overflow-x: hidden;
overflow-y: auto;
background: linear-gradient(90deg, rgb(217, 217, 217, 0.85), rgb(255, 255, 255, 0.85)),url(https://i.pinimg.com/originals/5d/9d/dd/5d9dddca471960cd09ced9539ccb85d7.jpg);
background-size:cover;
}
#header {
font-family: quicksand;
font-size: 25px;
position: relative;
left: 105px;
top: -80px;
color: white;
}
#header-div {
width: 2000px;
height: 75px;
box-shadow: 5px 5px 8px rgb(128, 128, 128);
background-color: rgb(255, 202, 103);
position: relative;
top: -10px;
left: -10px;
}
#header-img {
position: relative;
top: -12px;
left: 5px;
}
#email {
overflow-x: auto !important;
overflow-y: auto !important;
margin: 20px;
width: 500px;
height: 32px;
border: 1px solid black;
border-radius: 5px;
font-family: quicksand;
font-size: 20px;
}
#email-div {
margin: 20px;
text-align: center;
}
#email-label {
font-family: quicksand;
font-size: 20px;
}
#g-btn {
width: 150px;
height: 30px;
background-color: rgb(255, 194, 81);
font-family: quicksand;
font-size: 18px;
border: none;
border-radius: 5px;
}
#g-btn:hover {
animation-name: button-animation;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes button-animation {
100% {
background-color: rgb(255, 216, 143);
}
}
#nav-links {
position: relative;
left: 1050px;
top: -123px;
display: flex;
flex-direction: column;
}
#nav-links li {
display: inline;
font-family: quicksand;
font-size: 20px;
}
#nav-links a {
color: white;
text-decoration: none;
word-spacing: 5px;
}
#features {
text-align: center;
}
.features-text {
font-family: quicksand;
font-size: 25px;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
left: 60px;
top: -35px;
}
#padlock {
position: relative;
top: 35px;
left: -400px;
}
#padlock-text {
top: -90px;
}
#p-header {
position: relative;
top: -60px;
left: -235px;
}
#location {
position: relative;
left: -400px;
top: -10px;
}
#location-text {
position: relative;
top: -145px;
left: 80px;
}
#l-header {
position: relative;
top: -120px;
left: -200px;
}
#mobile {
position: relative;
left: -400px;
top: -65px;
}
#mobile-text {
position: relative;
top: -200px;
left: 160px;
}
#m-header {
position: relative;
top: -185px;
left: -230px;
}
.header-text {
font-family: quicksand;
font-size: 30px;
}
#video {
display: flex;
justify-content: center;
position: relative;
top: -150px;
}
/* Start Of Danger Zone */
.product {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 1px solid black;
border-radius: 5px;
width: 350px;
font-family: quicksand;
margin: 10px;
background-color: white;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
.product li {
list-style: none;
}
.product > .level {
background-color: #ddd;
color: black;
padding: 15px 0;
width: 100%;
border-radius: 5px;
text-transform: uppercase;
font-weight: bolder;
}
.button {
width: 100px;
height: 30px;
background-color: rgb(252, 189, 17);
border: none;
border-radius: 5px;
margin: 10px;
font-family: quicksand;
color: white;
font-size: 20px;
position: relative;
top: -15px;
}
.price {
font-size: 30px;
margin: 10px;
}
.perks {
position: relative;
top: -15px;
}
#paid-monthly {
position: relative;
left: 380px;
top: -282px;
}
#yearly-paid {
position: relative;
left: 759px;
top: -565px;
}
/* End Of Danger Zone*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FCC: VPN Product Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fccplpstylesheet.css">
</head>
<body>
<div id="main">
<div id="header-div">
<nav id="nav-bar">
<img id="header-img" src="project Images/vpn.jpeg" width="100px" alt="company logo">
<div id="header">Prive9000 VPN Service</div>
<div id="nav-links">
<ul>
<li> Features <span class="middot"> ·</span> </li>
<li> Pricing <span class="middot"> ·</span> </li>
<li> Mobile App </li>
</ul>
</div>
</nav>
</div>
<div id="email-div">
<form action="https://www.freecodecamp.org/email-submit)." id="email-form">
<label for="email" id="email-label"> Please Enter Your Email: <br>
<input id="email" type="email" placeholder=" Enter Your Email" required> <br>
</label>
<button type="submit" id="g-btn">GET STARTED</button>
</form>
</div>
<div id="features">
<img id="padlock" src="Project Images/padlock-key.jpeg" width="100px" height="95px" alt="padlock">
<h2 class="header-text" id="p-header">Privacy Ensured</h2>
<p class="features-text" id="padlock-text">Your Information Is Safe With Us; Privacy Will Never Be A Worry Again</p>
<img id="location" src="Project Images/place-localizer.jpeg" width="100px" height="95px" alt="location-pointer">
<h2 class="header-text" id="l-header">Change Your Location</h2>
<p class="features-text" id="location-text">Change Your Country Whenever You Want!; Connect To Over 190+ Countries</p>
<img id="mobile" src="Project Images/built-mobile.jpeg" width="100px" height="95px" alt="mobile-graphic">
<h2 class="header-text" id="m-header">For All Platforms</h2>
<p class="features-text" id="mobile-text">Apps Built For Both Android And iOS Aswell; Stay Safe No Matter What Platform Your On</p>
</div>
<div id="video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XP4rSoBS_iw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Start Of Danger Zone-->
<div id="prices">
<div class="product" id="free">
<div class="level">Free Plan</div>
<div class="price">Free</div>
<ul class="perks">
<li>No Payments; 100% Free</li>
<li>Connect To Over 20+ Countries</li>
<li>Ads Included</li>
<li>Doesn't Allow Country Swap</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="paid-monthly">
<div class="level">Monthly Paid Plan</div>
<div class="price">$100</div>
<ul class="perks">
<li>$100 per Month</li>
<li>Connect To Over 100+ Countries</li>
<li>Ads Included</li>
<li>Allows Country Swap For Netflix Only</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="yearly-paid">
<div class="level">Yearly Paid Plan</div>
<div class="price">$800</div>
<ul class="perks">
<li>$800 per Year</li>
<li>Connect To ALL Countries</li>
<li>Ad Free</li>
<li>Allows Country Swap For All Platfroms</li>
</ul>
<button class="button">Select</button>
</div>
</div>
</div>
<!--End Of Danger Zone-->
</body>
</html>
body {
overflow-x: hidden;
overflow-y: auto;
background: linear-gradient(90deg, rgb(217, 217, 217, 0.85), rgb(255, 255, 255, 0.85)),url(https://i.pinimg.com/originals/5d/9d/dd/5d9dddca471960cd09ced9539ccb85d7.jpg);
}
#header {
font-family: quicksand;
font-size: 25px;
position: relative;
left: 105px;
top: -80px;
color: white;
}
#header-div {
width: 2000px;
height: 75px;
box-shadow: 5px 5px 8px rgb(128, 128, 128);
background-color: rgb(255, 202, 103);
position: relative;
top: -10px;
left: -10px;
}
#header-img {
position: relative;
top: -12px;
left: 5px;
}
#email {
overflow-x: auto !important;
overflow-y: auto !important;
margin: 20px;
width: 500px;
height: 32px;
border: 1px solid black;
border-radius: 5px;
font-family: quicksand;
font-size: 20px;
}
#email-div {
margin: 20px;
text-align: center;
}
#email-label {
font-family: quicksand;
font-size: 20px;
}
#g-btn {
width: 150px;
height: 30px;
background-color: rgb(255, 194, 81);
font-family: quicksand;
font-size: 18px;
border: none;
border-radius: 5px;
}
#g-btn:hover {
animation-name: button-animation;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes button-animation {
100% {
background-color: rgb(255, 216, 143);
}
}
#nav-links {
position: relative;
left: 1050px;
top: -123px;
display: flex;
flex-direction: column;
}
#nav-links li {
display: inline;
font-family: quicksand;
font-size: 20px;
}
#nav-links a {
color: white;
text-decoration: none;
word-spacing: 5px;
}
#features {
text-align: center;
}
.features-text {
font-family: quicksand;
font-size: 25px;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
left: 60px;
top: -35px;
}
#padlock {
position: relative;
top: 35px;
left: -400px;
}
#padlock-text {
top: -90px;
}
#p-header {
position: relative;
top: -60px;
left: -235px;
}
#location {
position: relative;
left: -400px;
top: -10px;
}
#location-text {
position: relative;
top: -145px;
left: 80px;
}
#l-header {
position: relative;
top: -120px;
left: -200px;
}
#mobile {
position: relative;
left: -400px;
top: -65px;
}
#mobile-text {
position: relative;
top: -200px;
left: 160px;
}
#m-header {
position: relative;
top: -185px;
left: -230px;
}
.header-text {
font-family: quicksand;
font-size: 30px;
}
#video {
display: flex;
justify-content: center;
position: relative;
top: -150px;
}
/* Start Of Danger Zone */
.product {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 1px solid black;
border-radius: 5px;
width: 350px;
font-family: quicksand;
margin: 10px;
background-color: white;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
.product li {
list-style: none;
}
.product > .level {
background-color: #ddd;
color: black;
padding: 15px 0;
width: 100%;
border-radius: 5px;
text-transform: uppercase;
font-weight: bolder;
}
.button {
width: 100px;
height: 30px;
background-color: rgb(252, 189, 17);
border: none;
border-radius: 5px;
margin: 10px;
font-family: quicksand;
color: white;
font-size: 20px;
position: relative;
top: -15px;
}
.price {
font-size: 30px;
margin: 10px;
}
.perks {
position: relative;
top: -15px;
}
#paid-monthly {
position: absolute;
left: 380px;
top: 1285px;
}
#yearly-paid {
position: absolute;
left: 759px;
top: 1400px;
}
/* End Of Danger Zone*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FCC: VPN Product Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fccplpstylesheet.css">
</head>
<body>
<div id="main">
<div id="header-div">
<nav id="nav-bar">
<img id="header-img" src="project Images/vpn.jpeg" width="100px" alt="company logo">
<div id="header">Prive9000 VPN Service</div>
<div id="nav-links">
<ul>
<li> Features <span class="middot"> ·</span> </li>
<li> Pricing <span class="middot"> ·</span> </li>
<li> Mobile App </li>
</ul>
</div>
</nav>
</div>
<div id="email-div">
<form action="https://www.freecodecamp.org/email-submit)." id="email-form">
<label for="email" id="email-label"> Please Enter Your Email: <br>
<input id="email" type="email" placeholder=" Enter Your Email" required> <br>
</label>
<button type="submit" id="g-btn">GET STARTED</button>
</form>
</div>
<div id="features">
<img id="padlock" src="Project Images/padlock-key.jpeg" width="100px" height="95px" alt="padlock">
<h2 class="header-text" id="p-header">Privacy Ensured</h2>
<p class="features-text" id="padlock-text">Your Information Is Safe With Us; Privacy Will Never Be A Worry Again</p>
<img id="location" src="Project Images/place-localizer.jpeg" width="100px" height="95px" alt="location-pointer">
<h2 class="header-text" id="l-header">Change Your Location</h2>
<p class="features-text" id="location-text">Change Your Country Whenever You Want!; Connect To Over 190+ Countries</p>
<img id="mobile" src="Project Images/built-mobile.jpeg" width="100px" height="95px" alt="mobile-graphic">
<h2 class="header-text" id="m-header">For All Platforms</h2>
<p class="features-text" id="mobile-text">Apps Built For Both Android And iOS Aswell; Stay Safe No Matter What Platform Your On</p>
</div>
<div id="video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XP4rSoBS_iw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Start Of Danger Zone-->
<div id="prices">
<div class="product" id="free">
<div class="level">Free Plan</div>
<div class="price">Free</div>
<ul class="perks">
<li>No Payments; 100% Free</li>
<li>Connect To Over 20+ Countries</li>
<li>Ads Included</li>
<li>Doesn't Allow Country Swap</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="paid-monthly">
<div class="level">Monthly Paid Plan</div>
<div class="price">$100</div>
<ul class="perks">
<li>$100 per Month</li>
<li>Connect To Over 100+ Countries</li>
<li>Ads Included</li>
<li>Allows Country Swap For Netflix Only</li>
</ul>
<button class="button">Select</button>
</div>
<div class="product" id="yearly-paid">
<div class="level">Yearly Paid Plan</div>
<div class="price">$800</div>
<ul class="perks">
<li>$800 per Year</li>
<li>Connect To ALL Countries</li>
<li>Ad Free</li>
<li>Allows Country Swap For All Platfroms</li>
</ul>
<button class="button">Select</button>
</div>
</div>
</div>
<!--End Of Danger Zone-->
</body>
</html>
Havent touched html/css in years so I need some help. I have a nested list, and want to style the outer list (#todo), and just have 'normal' bullets on the inside list (#task). Problem is when I style the outer list it automatically styles the inside list as well. As a rigged fix, i thought of removing the li tags from and just making them <p> and somehow add a bullet to the front of them. How do you add bullets to the front of <p> tag?
#parent .todo ul li:before{
content: "";
position: absolute;
top: 5px;
left: -25px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 2px solid #0bb5f4;
}
#parent .todo ul li:after{
content: "";
position: absolute;
top: 14px;
left: -21px;
width: 2px;
height: 75px;
background: #0bb5f4
}
.task{
padding-left: 25px;
}
<div class="todo">
<div class="title">
<p class="bold">Title1</p>
</div>
<ul>
<li>
<div class="date">today</div>
<div class="info">
<p class="semi-bold">Name</p>
<p class="description"><em>location</em></p>
<div class="task">
<p>task1</p>
<p>task2</p>
<p>task3</p>
</div>
</div>
</li>
<li>
<div class="date">yesterday</div>
<div class="info">
<p class="semi-bold">Name2</p>
<p class="description"><em>location2</em></p>
<div class="task">
<p>item1</p>
<p>item2</p>
<p>item3</p>
</div>
</div>
</li>
</ul>
</div>
Add a class on the li elements of the outer list and apply the styles you want to apply on the outer list, on this class. This way, inner list's li elements won't be styled.
.outer-li {
position: relative;
list-style: none;
margin: 10px 0 0 0;
}
.outer-li::before {
content: "";
position: absolute;
top: 5px;
left: -25px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 2px solid #0bb5f4;
}
.outer-li::after {
content: "";
position: absolute;
top: 14px;
left: -21px;
width: 2px;
height: 75px;
background: #0bb5f4
}
<div class="todo">
<div class="title">
<p class="bold">Title1</p>
</div>
<ul class="outer">
<li class="outer-li">
<div class="date">today</div>
<div class="info">
<p class="semi-bold">Name</p>
<p class="description"><em>location</em></p>
<ul class="task">
<li>task1</li>
<li>task2</li>
<li>task3</li>
</ul>
</div>
</li>
<li class="outer-li">
<div class="date">yesterday</div>
<div class="info">
<p class="semi-bold">Name2</p>
<p class="description"><em>location2</em></p>
<ul class="task">
<li>task1</li>
<li>task2</li>
<li>task3</li>
</ul>
</div>
</li>
</ul>
</div>
Alternatively, you could use ::before pseudo selector.
li {
position: relative;
list-style: none;
margin: 10px 0 0 0;
}
li::before {
content: "";
position: absolute;
top: 5px;
left: -25px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 2px solid #0bb5f4;
}
li::after {
content: "";
position: absolute;
top: 14px;
left: -21px;
width: 2px;
height: 75px;
background: #0bb5f4
}
.task {
padding-left: 25px;
}
.task p {
position: relative;
}
.task p::before {
content: '';
position: absolute;
background: #222;
width: 5px;
height: 5px;
left: -13px;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
}
<div class="todo">
<div class="title">
<p class="bold">Title1</p>
</div>
<ul>
<li>
<div class="date">today</div>
<div class="info">
<p class="semi-bold">Name</p>
<p class="description"><em>location</em></p>
<div class="task">
<p>task1</p>
<p>task2</p>
<p>task3</p>
</div>
</div>
</li>
</ul>
</div>
Sample Image How to put Icon for image At the end with Css and HTMl5.
Please help me in this , Thanks in advance
Here I am getting outside of the image But I have to get at the right side corner with clickable
.container img {
max-width:5%;
max-height:5%
}
.positioner {
position: absolute;
}
.icon {
position: absolute;
right: -70px;
bottom: -20px;
width: 32px;
height: 32px;
border-radius: 20px;
border: 4px solid white;
background: rgb(0, 195, 255);
}
<div class="container" style="margin-bottom: 10px;">
<img src="https://www.bpimaging.com/assets/uploads/2015/02/business-portrait-photography-man.jpg" style="width: 56px;max-height: 56px;clip-path: circle(22px at center);"
class="mr-3 d-none d-sm-block" alt="..." i class="fa fa-pencil fa-lg" style="color:white">
<div class="positioner">
<div class="icon">
<i class="fa fa-pencil fa-lg" style="color:white"></i>
</div>
</div>
<div>
[Sample Image for your reference]
[1]: https://i.stack.imgur.com/cYzfh.png
<html>
<head>
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
</style>
</head>
<body>
<div class="container">
<img src="rose-817431_960_720.jpg" alt="Snow" style="width:100%;">
<img src="flat-blue-home-icon-4.png" class="bottom-right" id='icon'>
</div>
<script>
document.getElementById('icon').addEventListener('click',() => {
alert("CLICKED ON ICON");
});
</script>
</body>
check below code
.container {
margin-bottom: 10px;
}
.icon {
position: absolute;
bottom: 5px;
right: 0px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgb(0, 195, 255);
}
.profile-pic {
position: relative;
width: 56px;
float: left;
}
.profile-desc {
margin-left: 56px;
height: 60px;
/* padding: 10px; */
}
.profile-desc p {
margin: 0;
padding: 15px 10px 10px;
}
<div class="container" style="/* margin-bottom: 10px; */">
<div class="profile-pic">
<img src="https://www.bpimaging.com/assets/uploads/2015/02/business-portrait-photography-man.jpg" style="width: 56px;max-height: 56px;clip-path: circle(22px at center);" class="mr-3 d-none d-sm-block" alt="..." i="">
<div class="icon">
<i class="fa fa-pencil fa-lg" style="color:white"></i>
</div>
</div>
<div class="profile-desc">
<p>dsds</p>
</div>
<div>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: ""
}], "*")
}
</script>
</div></div>
I have a small script that generates signatures for mail, but after testing the same in Outlook, it does not recognize the divs, and some other tags.
I'm breaking my head and I can not simulate this signature on a table.
can you help me? Please!
Signature code:
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
#sigCelu{
position: absolute;
left: 92px !important;
top: -1px;
width: 140px;
}
#new_sign{
font-family: 'Roboto Condensed', sans-serif;
width: 100%;
height: auto;
position: relative;
color: #333333 !important;
display: block;
}
#new_sign img{
position: relative;
display: block;
margin-bottom: 5px;
}
#new_sign .barra{
width: 3px;
height: 150px;
background-color: #004375;
position: relative;
display: block;
float: left;
margin-right: 5px;
}
#new_sign .barra2{
width: 3px;
height: 50px;
background-color: #28aa76;
position: relative;
display: block;
float: left;
}
#new_sign #info_sign{
position: relative;
display: block;
margin: 5px 0px 0px 15px;
}
#new_sign #info_sign p span{
position: relative;
display: inline-block;
margin-bottom: 5px;
}
#info_sign img{
position: relative;
display: block;
width: 30px;
height: 30px;
margin-left: -5px;
}
.logos{
margin-top: -7px;
position: relative;
}
#info_sign .logos > span{
position: absolute;
top: 12%;
left: 23px;
}
<div id="new_sign">
<img src="https://i.imgur.com/j4oT9Lz.png" id="sigFoto" alt="logo">
<i class="barra"></i>
<i class="barra2"></i>
<div id="info_sign">
<h3 id="sigName">Nome Aqui</h3>
<p>
<span id="sigTitle">Texto aqui /</span>
<span id="sigCompany">Texto aqui</span>
</p>
<div class="logos">
<img src="https://caoa.com.br/temp/images/icone-telefone.png" alt="#">
<span id="sigMobile">(11) 0000-0000</span>
<span id="celular2">
<span id="sigCelu">| (11) 90000-0000</span>
</span>
</div>
<div class="logos">
<img src="https://caoa.com.br/temp/images/icone-email.png" alt="#">
<span>
<a id="sigEmail">teuemail</a>
</span>
</div>
<div class="logos">
<img src="https://caoa.com.br/temp/images/icone-email-site.png">
<span id="sigWebsite">www.site.com.br</span>
</div>
<div class="logos">
<img src="https://caoa.com.br/temp/images/icone-email-local.png" alt="#">
<span id="sigAddress">Rua, <span id="numero">2822</span>, restante</span>
</div>
</div>
</div>
I can not get familiar with these tables, I believe that because I started right in html5, without messing with tables so much, I've tried several times, consecutive hours working on the code and I do not get a result :(
I'm building a panel for a front end system, but I got an annoying problem.
I am not that good with CSS. This is what happens:
This is my HTML code:
#main #myTopMenu #iconBar {
margin-right: 10px;
float: right;
}
#main #myTopMenu #iconBar a {
display: inline-block;
margin-left: 30px;
color: white;
}
#main #myTopMenu #iconBar .optionsContainer {
line-height: 55px;
}
#main #myTopMenu #iconBar .optionsContainer img {
vertical-align: middle;
position: relative;
}
#main #myTopMenu #iconBar .valueWithOption {
background-color: #59a632;
height: 25px;
width: 35px;
position: absolute;
top: 10px;
margin-left: 27px;
border-radius: 4px;
}
#main #myTopMenu #iconBar .valueWithOption span {
background-color: blue;
width: 100%;
height: 100%;
}
<div id="iconBar">
<a href="#">
<div class="optionsContainer">
<img src="images/icons/message.png">
<div class="valueWithOption">
<span>5</span>
</div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/bell.png">
<div class="valueWithOption"><span>5</span></div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/settings.png"></div>
</a>
</div>
Also do you guys have tips to make it so that the width of the green box expands so that the value in the green box always fits properly.
I made some significant changes to your codes for expected results. See snippet
#iconBar {
margin-right: 10px;
float: right;
}
#iconBar a {
display: inline-block;
margin-left: 30px;
color: white;
}
#iconBar .optionsContainer img {
vertical-align: middle;
position: relative;
}
#iconBar .valueWithOption {
background-color: #59a632;
padding: 5px;
top: 10px;
border-radius: 4px;
position: relative;
top: -10px;
display:inline-block
}
#iconBar .valueWithOption span {
background-color: blue;
width: 100%;
height: 100%;
}
<br>
<br>
<div id="iconBar">
<a href="#">
<div class="optionsContainer">
<img src="images/icons/message.png">
<div class="valueWithOption">
<span>5</span>
</div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/bell.png">
<div class="valueWithOption"><span>500</span></div>
</div>
</a>
<a href="#">
<div class="optionsContainer"><img src="images/icons/settings.png"></div>
</a>
</div>