I've been struggling with this for a while and couldn't find the right solution.
At the bottom of the page I've a footer that's full width. Inside it I want to display I list of messages and right next to its left an icon, in this case it's a Font Awesome icon.
The message list needs to be centered both vertically and horizontally and the icon has to be centered vertically.
I've tried doing this using ul elements with display: inline-block and text-align: center.
The messages displays correctly but the icon is stuck in the same place no matter the size of its container.
Here's what I've so far:
<div class="error-message-container">
<ul class="error-message-bell">
<li aria-hidden="true" class="fa fa-bell-slash-o"></li>
</ul>
<ul class="error-message-list">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem</li>
<li>ipsum</li>
</ul>
</div>
and the css:
.error-message-container {
border: 1px solid blue;
bottom: 0;
color: light-blue;
font-size: 12px;
left: 0;
position: fixed;
text-align: center;
width: 100%;
}
.error-message-container .error-message-bell {
display: inline-block;
font-size: 20px;
height: 100%;
margin-top: 0;
padding: 0;
vertical-align: middle;
}
.error-message-container .error-message-list {
display: inline-block;
font-weight: 500;
line-height: 1.2;
list-style-type: none;
margin-bottom: 11px;
margin-top: 11px;
padding-left: 8px;
}
https://jsfiddle.net/b1rw80jz/1/
Does anyone know how can I accomplish this?
Thanks
If you need only one icon, you can use pseudo-elements::before for the bell
.error-message-container {
border: 1px solid blue;
bottom: 0;
color: light-blue;
font-size: 12px;
left: 0;
position: fixed;
text-align: center;
width: 100%;
}
.error-message-container .error-message-list {
display: inline-block;
font-weight: 500;
line-height: 1.2;
list-style-type: none;
margin-bottom: 11px;
margin-top: 11px;
padding-left: 8px;
position: relative; /** this provides reference to the ::before element **/
}
.error-message-list::before {
content: "\f1f6"; /** refers to awesome font **/
font-family: FontAwesome; /** refers to awesome font **/
position: absolute; /** this will stick to error-message-list **/
top: 50%; /** this will position the icon 50% height of the error-message-list **/
margin-top: -10px; /** minus half the icon height to truely vertically centered **/
left: -20px; /** this will push it to the left out the error-message-list **/
}
https://jsfiddle.net/b1rw80jz/6/
You could use flex-box like this:
+CSS
.error-message-container {
border: 1px solid blue;
bottom: 0;
color: light-blue;
font-size: 12px;
left: 0;
position: fixed;
text-align: center;
width: 100%;
}
.error-message-container .error-message-bell {
display: inline-block;
font-size: 20px;
height: 100%;
margin: 0;
padding: 0;
}
.error-message-container .error-message-list {
display: inline-block;
font-weight: 500;
line-height: 1.2;
list-style-type: none;
margin-bottom: 11px;
margin-top: 11px;
padding-left: 8px;
}
.center {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
+HTML
<div class="error-message-container center">
<ul class="error-message-bell center">
<li aria-hidden="true" class="fa fa-bell-slash-o"></li>
</ul>
<ul class="error-message-list">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem</li>
<li>ipsum</li>
</ul>
</div>
Demo
You could add line-height: 5; vertical-align: top; to .error-message-container .error-message-bell.
Fiddle: https://jsfiddle.net/b1rw80jz/1/
Try to change the .error-message-list display to block and add margin-bottom: -5px; to .error-message-bell instead of margin-top
https://jsfiddle.net/b1rw80jz/3/
HTML
<div class="error-message-container">
<div class="inner-container">
<ul class="error-message-bell">
<li aria-hidden="true" class="fa fa-bell-slash-o"></li>
</ul>
<ul class="error-message-list">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem</li>
<li>ipsum</li>
</ul>
</div>
</div>
CSS
.inner-container{margin: 0 auto;
display: inline-block;}
.error-message-container .error-message-bell {
display: table-cell;
font-size: 20px;
height: 100%;
margin: 0 auto;
padding: 0;
vertical-align: middle;}
.error-message-container .error-message-list {
display: table-cell;
font-weight: 500;
line-height: 1.2;
list-style-type: none;
margin-bottom: 11px;
margin-top: 11px;
padding-left: 8px;}
Font-Awesome already does it for you by using the <i> element and nesting it within your <li>. Refer to documentation. BTW, I put a DANGER! icon in just for the hell of it.
<li><i class="fa fa-bell-slash-o" aria-hidden="true"></i> ERROR!</li>
FIDDLE
Related
I have two major problems with my code.
Problem 1 - Alignment: Inside the <nav> I created two <div> tags. One for the logo, and one for the hyperlinks, but I can't manage to align then. I've been stuck on this for hours.
Problem 2 - Overlapping: If the screen-size is a bit small, when I hover over an element of the navigation bar they overlap each other, which in theory is fine, however it doesn't cover the element behind, so both element keeps displaying.
Is there a way to prevent this from happening? btw, this problem only happens when I'm using a small screen size.
The image below can illustrate both problems:
body{
background-color: rgb(210,210,210);
margin:0px;
padding: 0px;
}
nav{
background-color: rgb(97, 97, 97);
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right:10px;
display: flex;
}
section{
padding: 0 10%;
}
#Logo{
width: 20%;
height: inherit;
float: left;
clear: left;
}
#Hyperlinks{
width: 80%;
float: right;
text-align: right;
}
#Logo p{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande';
font-size: 120%;
color: white;
padding-left: 40px;
}
#Hyperlinks a{
font-size: 1.2rem;
text-align: center;
text-decoration: none;
color: white;
padding-right: 5px;
}
#Hyperlinks li li>a{
font-size: 1.1rem;
}
#Hyperlinks>ul>li:hover {
background-color: rgb(27, 129, 107);
border-radius: 0 0 10px 0;
}
#Hyperlinks ul li li:hover{
background-color: rgb(27, 129, 107);
}
#Hyperlinks ul ul li:last-child{
border-radius: 0 0 10px 0;
}
#Hyperlinks>ul>li>a{
border-right:solid white 3px;
}
#Hyperlinks ul{
padding-inline-start: 0;
}
#Hyperlinks>ul>li{
display: inline-block;
padding: 10px 50px 10px 2px;
margin-right: 10px;
}
#Hyperlinks ul ul{
display: none;
}
#Hyperlinks>ul>li{
position: relative;
}
#Hyperlinks ul li:hover ul{
display: block;
position: absolute;
width: 92%;
left: 0%;
top: 42px;
background-color: rgb(97, 97, 97);
border-radius: 0 0 10px 0;
}
#Hyperlinks li:hover li{
display: block;
padding: 1em 0em 1em 5px;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Bar 3</title>
<link rel="stylesheet" href="gabarito2.css">
</head>
<body>
<header>
<nav>
<div id="Logo">
<p>MySite.com</p>
</div>
<div id="Hyperlinks">
<ul>
<li>Home</li>
<li>Tutorial
<ul>
<li>Tutorial 1</li>
<li>Tutorial 2</li>
<li>Tutorial 3</li>
</ul>
</li>
<li>About</li>
<li>Newsletter
<ul>
<li>News 1</li>
<li>News 2</li>
<li>News 3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section>
<h2>Test</h2>
<p>Hello, it`s just a test. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, temporibus, culpa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, temporibus, culpa! Impedit amet voluptates reiciendis esse quisquam. Eum quia, facere laboriosam quos possimus, ratione, optio incidunt sunt dolorum commodi magni.</p>
</section>
</body>
</html>
Get rid of all the floats and use flexbox exclusively. Make sure your ul and li have no default margins and paddings.
Just set a background color and z-index if necessary.
So I have this black transparent box in my header. It's got some text inside. When the text shrinks I want the the box to shrink as well, but I want it to shrink proportionately. The problem I'm running into is that when I shrink the text in my media queries, the width of the p tags doesn't shrink with it. so This pushes the right side of its parent farther out making it disproportional. I've tried setting the p tags to inline but then the parent won't shrink to fit the tags unless I set the parent to inline. And If I do that I need to use flexbox to stack the p tags on top of each other again, and I can't use display: flex cause its already display: inline. Any Ideas?
const navLinks = document.querySelectorAll('.nav-links .link');
const linksArray = Array.from(document.querySelectorAll('.links div'));
const header = document.querySelector('header');
const form = document.querySelector('form');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', changeColor);
}
for (var i = 0; i < linksArray.length; i++) {
linksArray[i].addEventListener('click', shuffle);
}
function changeColor() {
let hexArray = [0, 1, 2, 3, 4, 5, 6, 'A', 'B', 'C', 'D', 'E', 'F'];
let hexColor = '#';
for(let i = 0; i < 6; i++) {
let random = Math.floor(Math.random()*hexArray.length);
hexColor += hexArray[random];
}
header.style.backgroundImage = 'none';
header.style.backgroundColor = hexColor;
setTimeout(function() {
header.style.backgroundImage = 'url(img/canada.jpeg)';
}, 2000);
}
function shuffle() { // Fisher-Yates shuffle algorithm
for (let i = linksArray.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[linksArray[i].innerHTML, linksArray[j].innerHTML] = [linksArray[j].innerHTML, linksArray[i].innerHTML];
}
}
form.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.querySelector('.name').value;
const address = document.querySelector('.address').value;
const city = document.querySelector('.city').value;
const dialog = document.querySelector('.dialog-wrap');
const close = document.querySelector('.close');
dialog.style.display = 'block';
document.querySelector('.dialog-name').innerHTML = name;
document.querySelector('.dialog-address').innerHTML = address;
document.querySelector('.dialog-city').innerHTML = city;
close.onclick = () => {
dialog.style.display = 'none';
document.querySelector("form").reset();
}
})
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Verdana';
box-sizing: border-box;
color: #63889b;
}
* {
outline: 1px solid red;
}
/*------NAV-----*/
nav {
display: flex;
justify-content: space-between;
font-size: 1.8rem;
padding: 25px 0;
position: fixed;
background-color: #fff;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 10;
box-shadow: 0px 0px 70px rgb(99, 99, 99, 0.5);
}
.brand, .nav-links {
display: flex;
align-items: center;
}
.brand {
margin-left: 6%;
}
.logo {
max-width: 70px;
max-height: 45px;
margin-right: 25px;
}
.nav-links {
position: relative;
margin-right: 6%;
}
.nav-links .link {
text-transform: uppercase;
margin-right: 20px;
cursor: pointer;
transition: all .2s ease;
}
.nav-links .link:hover {
color: #014263;
}
/*-----HEADER-----*/
header {
margin-top: 92px;
background-image: url(img/canada.jpeg);
background-position: center;
background-size: cover;
padding-top: 7%;
padding-bottom: 25%;
}
.header-info {
display: inline-block;
color: #fff;
font-size: 1.5rem;
background-color: rgba(0,0,0,0.6);
padding: 35px;
margin-left: 10%;
}
header p {
margin: 0;
padding: 0;
}
header p:first-child {
margin-bottom: 25px;
}
/*-----MAIN-----*/
main {
display: flex;
background-color: #fff;
}
.col {
flex-basis: 33.33%;
padding: 50px 0 40px 0;
}
.col p {
width: 65%;
font-size: 1.25rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.col img {
display: block;
margin: 0 auto;
}
.col-3 img {
width: 280px;
height: 155px;
}
.col-3 img, .col-3 h3, .col-3 p {
position: relative;
top: -8px;
}
.col-2 img, .col-2 h3, .col-2 p {
position: relative;
top: 30px;
}
.col-1 {
margin-left: 7%;
}
.col-3 {
margin-right: 7%;
}
h3 {
text-align: center;
}
/*------FOOTER-----*/
footer {
font-family: 'Helvetica';
background-color: #63889b;
display: flex;
justify-content: space-between;
color: #fff;
padding-bottom: 30px;
}
.internal-links {
padding-left: 15%;
font-size: 1.5rem;
}
.links div {
margin:2px 0;
cursor: pointer;
}
.internal-links h4 {
text-decoration: underline;
text-align: center;
margin-bottom: 8px;
margin-top: 30PX;
color: #fff;
}
.links {
font-size: 1.2rem;
display: flex;
flex-direction: column;
}
.form-wrap {
padding-top: 30px;
display: flex;
align-items: flex-end;
flex-basis: 50%;
}
form {
margin: 0 100px 0 0;
display: flex;
flex-direction: column;
width: 100%;
}
input {
border: none;
outline: none;
font-size: 1.6rem;
}
label {
font-size: 1.3rem;
padding: 3px 0;
}
button {
margin-top: 20px;
border: 1px solid #fff;
width: 50%;
font-size: 1.3rem;
background-color: #1090d1;
align-self: flex-end;
color: #fff;
padding: 4px 30px;
}
.dialog-wrap {
background-color: rgba(0,0,0,0.7);
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 1000;
display: none;
}
dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 500px;
height: 220px;
border: none;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
dialog div {
font-size: 1.4rem;
color: #fff;
margin: 10px 0;
outline: 1px solid #63889b;
}
dialog div:first-child {
margin-top: 0px;
}
dialog .label {
background-color: #63889b;
padding: 7px;
display: inline-block;
width: 30%;
margin: 0;
text-align: center;
}
dialog .info {
display: inline-block;
padding-left: 5px;
color: #000;
}
dialog button {
border: none;
width: 100%;
margin: auto;
padding: 7px;
}
dialog button:hover {
cursor: pointer;
transition: all .3s ease;
background-color: #0675ad;
}
dialog div:last-child {
outline: none;
}
#media screen and (max-width: 1600px) {
.header-info {
font-size: 1.4rem;
width: 392px;
margin-left: 7%;
}
}
#media screen and (max-width: 1400px) {
.col p, .links {
font-size: 1.1rem;
}
}
#media screen and (max-width: 1200px) {
nav {
font-size: 1.5rem;
}
.header-info {
font-size: 1.3rem;
}
.col-1 img {
width: 270px;
height: 132px;
}
.col-2 img {
width: 280px;
height: 107px;
}
.col-3 img {
width: 250px;
height: 140px;
}
.col p, .links, label {
font-size: 1rem;
}
}
#media screen and (max-width: 1000px) {
.col p {
width: 85%;
}
.col-1 img {
width: 230px;
height: 112px;
}
.col-2 img {
width: 220px;
height: 82px;
}
.col-3 img {
width: 210px;
height: 120px;
}
button {
font-size: 1.1rem;
}
dialog div {
font-size: 1.2rem;
}
}
#media screen and (max-width: 925px) {
}
#media screen and (max-width: 900px) {
.header-info {
font-size: 1.1rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapman Automotive Skills Assessment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="brand">
<img src="img/Logo.png" alt="logo" class="logo">
<div class="comp-name">CHAPMAN</div>
</div>
<div class="nav-links">
<div class="link">Home</div>
<div class="link">Sales</div>
<div class="link">Blog</div>
<div class="link">Login</div>
</div>
</nav>
<header>
<div class="header-info">
<p>We are a company that does stuff.</p>
<p>Car and web stuff.</p>
</div>
</header>
<main>
<div class="col col-1">
<img src="img/car1.jpg" alt="car1">
<h3>Some Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col col-2">
<img src="img/car2.jpg" alt="car2">
<h3>More Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col col-3">
<img src="img/car3.jpg" alt="car3">
<h3>Last Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</main>
<footer id="footer">
<div class="internal-links">
<h4>Internal Links</h4>
<div class="links">
<div>Page One</div>
<div>Another Page</div>
<div>Sales Page</div>
<div>Page Three</div>
<div>Keep Going</div>
<div>Last One</div>
<div>Just Kidding</div>
</div>
</div>
<div class="form-wrap">
<form>
<label for="Name">Name</label>
<input type="text" class="name" required>
<label for="Name">Address</label>
<input type="text" class="address" required>
<label for="Name">City</label>
<input type="text" class="city" required>
<button type="submit" id="submit">Submit Form</button>
</form>
<div class="dialog-wrap">
<dialog>
<div><span class="label">Name:</span><span class="dialog-name info"></span></div>
<div><span class="label">Address:</span><span class="dialog-address info"></span></div>
<div><span class="label">City:</span><span class="dialog-city info"></span></div>
<div><button class="close">Close</button></div>
</dialog>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
I can't use magic numbers.
How do you shrink the text?
I tried your code and it seems to scale fine when the font size is modified in 'header p' with the font-size CSS property.
header p {
font-size: 50%;
}
I want to make a responsive step bar with year on top side of step circle and text in bottom of the circle like this one:
Here is my html code.
<div class="container">
<ul class="progressbar">
<li>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li id="last-child"></li>
</ul>
</div>
Demo
The problem is I am not getting how to add these years, circle in start and arrow in the end. Please help me how I can do this and make it responsive.I'll be very thankful to you for your help.
Hope this helps. thanks
.container {
width: 1000px;
margin: 100px auto;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
width: 16.6%;
float: left;
font-size: 10px;
position: relative;
text-align: center;
color: #444972;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: counter(step);
counter-increment: step;
line-height: 30px;
border: 3px solid #444972;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
width: 100%;
height: 3px;
content: '';
position: absolute;
background-color: #444972;
top: 15px;
left: -50%;
z-index: -1;
}
#last-child:after {
width: 100%;
height: 3px;
content: '';
position: absolute;
background-color: #444972;
top: 15px;
left: -50%;
z-index: -1;
}
#last-child:before {
display: none;
}
.progressbar li:first-child:after {
/*content: none;*/
}
#circle{
font-size: 24px;
position: absolute;
left: 7%;
top: 16.29%;
color: #444972;
}
.outer{position:realative}
.year{
position: absolute;
top: -40px;
left: 50%;
transform: translatex(-50%);
}
.progressbar{position:relative;}
.progressbar:before{
content: "";
position: absolute;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
left: -10px;
top: 12px;
}
.progressbar:after{
content: "";
position: absolute;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-left: 10px solid black;
right: 63px;
top: 5px;
}
<div class="container">
<ul class="progressbar">
<li>
<div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
<li>
<div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
<li>
<div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
<li>
<div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
<li>
<div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
<li id="last-child"></li>
</ul>
</div>
use label with in your li and try this
label{
position: absolute;
top:-40%;
left: 0;
bottom: 0;
right: 0;
margin: auto;
font-size:18px;
}
.container {
width: 1000px;
margin: 100px auto;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
width: 16.6%;
float: left;
font-size: 10px;
position: relative;
text-align: center;
color: #444972;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: counter(step);
counter-increment: step;
line-height: 30px;
border: 3px solid #444972;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
width: 100%;
height: 3px;
content: '';
position: absolute;
background-color: #444972;
top: 15px;
left: -50%;
z-index: -1;
}
#last-child:after {
width: 100%;
height: 3px;
content: '';
position: absolute;
background-color: #444972;
top: 15px;
left: -50%;
z-index: -1;
}
#last-child:before {
display: none;
}
.progressbar li:first-child:after {
/*content: none;*/
}
#circle{
font-size: 24px;
position: absolute;
left: 7%;
top: 16.29%;
color: #444972;
}
label{
position: absolute;
top:-40%;
left: 0;
bottom: 0;
right: 0;
margin: auto;
font-size:18px;
}
/*for circle use this class*/
.dot {
height: 18px;
width: 18px;
background-color: #444972;
border-radius: 50%;
display: inline-block;
position: absolute;
top:8px;
left: -60%;
bottom: 0;
right: 0;
}
/*for triangle use this class*/
.triangle {
width: 0;
height: 0;
overflow: hidden;
}
.triangle:after {
content: "";
display: block;
width: 0;
height: 0;
margin-top:5px;
margin-left:78px;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 12px solid #444972;
}
<div class="container">
<ul class="progressbar">
<li>
<span class="dot"></span>
<label>1998</label>
Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li>
<label>2004</label>
Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li>
<label>2006</label>
Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li>
<label>2014</label>
Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li>
<label>2015</label>
Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
<li id="last-child">
<span class="triangle"></span>
</li>
</ul>
</div>
js fiddle
1.TRYING TO ALIGN ICON ON THE RIGHT MIDDLE SIDE THROUGH CSS
2. I am trying to show icons when a user selects a right answer.
<style>
. li.rightAnswerOption:after {
content: "\2714";
font-family: FontAwesome;
display: block;
font-size: 24px;
font-weight: 999;
float: right;
margin-right: -15px;
width: 1.3em;
color: #0d923f;
}
li.wrongAnswerOption:after {
content: "\2715";
font-family: FontAwesome;
display: block;
margin-right: -15px;
padding-bottom: 5px;
font-size: 24px;
font-weight: bolder;
float: right;
width: 1.3em;
color: red;
}
<ul class="list-group col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-9 col-xs-offset-0 col-xs-12">
<li class="question-option list-group-item answerOption wrongAnswerOption">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</ul>
Absolute position is your answer
ul li{
background: #DDD;
padding: 5px 1.3em 5px 5px;
position: relative;
}
li.right:after,
li.wrong:after{
display: block;
font-family: FontAwesome;
font-size: 24px;
font-weight: 999;
position: absolute;
right: 0;
top: calc(50% - 12px);
width: 1.3em;
}
li.right:after{
color: #0d923f;
content: "\2714";
}
li.wrong:after{
color: red;
content: "\2715";
}
<ul>
<li class="right">Lorem Ipsum</li>
<li class="wrong">Dolor Sit amet</li>
</ul>
I have the following view : https://jsfiddle.net/jcrqhqLq/
I'd like to align the "Add to cart" buttons to the bottom of their container, so the buttons of every plans are all horizontally aligned, but I can't manage to do it. I tried to add position: absolute; bottom 0; on the buttons, but it breaks the container.
How can I do it ?
Try by adding this in your code
.pricing-table .plan{position:relative;}
li.plan-feature:last-child {
min-height: 65px;
}
li.plan-feature:last-child a {
bottom: 10px;
display: block;
left: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
right: 0;
width: 95px;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.pricing-table .plan {
background-color: #f3f3f3;
border-radius: 5px;
box-shadow: 0 0 6px 2px #b0b2ab;
text-align: center;
height: 100%;
}
.pricing-table .plan:hover {
background: #fff;
box-shadow: 0 0 12px 3px #b0b2ab;
}
.pricing-table .plan .plan-name {
background-color: #5e5f59;
border-radius: 5px 5px 0 0;
color: #fff;
padding: 20px;
}
.pricing-table .plan:hover .plan-name {
background: #4e9a06;
}
.pricing-table .plan .plan-name span {
font-size: 20px;
}
.pricing-table .plan ul {
border-radius: 0 0 5px 5px;
list-style: outside none none;
margin: 0;
padding: 0;
}
.pricing-table .plan h2 {
margin: 10px 0;
}
.pricing-table .plan ul li.plan-feature {
border-top: 1px solid #c5c8c0;
padding: 15px 10px;
}
.pricing-table .plan ul li.plan-feature .plan-feature-description {
margin: 0;
color: #777;
font-size: .9em;
}
.pricing-table .plan{position:relative;}
li.plan-feature:last-child {
min-height: 65px;
}
li.plan-feature:last-child a {
bottom: 10px;
display: block;
left: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
right: 0;
width: 95px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-eq-height pricing-table">
<div class="col-xs-12 col-md-4">
<div class="plan">
<div class="plan-name">
<h2>Plan #1</h2>
<span>24.90 €</span>
</div>
<ul>
<li class="plan-feature">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt, urna et hendrerit rutrum, dui eros efficitur massa, at mattis justo tortor eget nisl.</li>
<li class="plan-feature">
Feature #1
<p class="plan-feature-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li class="plan-feature">Add to cart</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="plan">
<div class="plan-name">
<h2>Plan #2</h2>
<span>39.90 €</span>
</div>
<ul>
<li class="plan-feature">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt, urna et hendrerit rutrum, dui eros efficitur massa, at mattis justo tortor eget nisl.</li>
<li class="plan-feature">
Feature #1
<p class="plan-feature-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li class="plan-feature">
Feature #2
<p class="plan-feature-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li class="plan-feature">Add to cart</li>
</ul>
</div>
</div>
</div>
You can adjust the padding in your css code to put the buttons at the bottom:
.pricing-table .plan ul li.plan-feature {
border-top: 1px solid #c5c8c0;
padding: 15px 10px 0 10px;
}