Would greatly appreciate some help with my coding:
`https://jsfiddle.net/1qvejx38/`
It seems like does not work on my coding, which I noticed when examining the Chrome Developer. It does not detect the entire grid, which affects the third section when the browser is reduced to medium device width.
Also, the section titles do not align with the right border of the sections.
Could someone please give me some advice? I've been racking my brains out but I just cannot pinpoint where the fault lies.
By the way, this is an assignment for a course that I am taking at the moment. We are not allowed to use any CSS or JS frameworks.
Thanks very much!
Remove the width: 90%; from p. Also add required padding for p and h2.
/***** Basic Styles *****/
*{
box-sizing: border-box;
}
h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 175%;
font-weight: bold;
text-align: center;
color: #696969;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: 125%;
font-weight: bold;
color: #FF8C00;
width: 100px;
padding: 10px;
position: relative;
float: right;
overflow: hidden;
margin: 0 10px 0 0;
}
p {
font-family: Arial, Helvetica, sans-serif;
text-align: left;
color: #4B0082;
margin: 0 10px 10px;
padding: 20px;
padding-top: 65px;
}
section {
float: left;
display: block;
position: relative;
}
.box1a{
border: 1px solid #696969;
/** background-color: **/
}
.box1b{
border: 1px solid #696969;
/** background-color: **/
}
.box1c{
border: 1px solid #696969;
/** background-color: **/
}
.box2a{
border: 1px solid #696969;
/** background-color: **/
}
.box2b{
border: 1px solid #696969;
/** background-color: **/
}
.box2c{
border: 1px solid #696969;
/** background-color: **/
}
/*****Simple Responsive Framework*****/
.row {
width: 100%;
}
/***** For Large Devices *****/
#media (min-width: 992px) {
.col-lg-4 {
float: left;
width: 33.33%;
}
}
/***** For Medium Devices *****/
#media (min-width: 768px) and (max-width: 991px) {
.col-md-6 {
float: left;
width: 50%;
}
.col-md-12 {
width: 100%;
}
.section3 {
width: 100%;
margin-bottom: 25px;
}
}
/***** For Small Devices *****/
#media (max-width: 767px) {
.col-sm-12 {
width: 100%;
}
.section3 {
margin-bottom: 25px;
}
}
<title>Assignment Solution for Module 2</title>
<link rel="stylesheet" href="style.css">
<body>
<h1> Our Menu</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
<section class="section1">
<h2 class="box1a">Chicken</h2>
<p class="box2a">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</section>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<section class="section2">
<h2 class="box1b">Beef</h2>
<p class="box2b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</section>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<section class="section3">
<h2 class="box1c">Seafood</h2>
<p class="box2c">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</section>
<div>
</div>
</body>
</html>
Updated fiddle - https://jsfiddle.net/afelixj/1qvejx38/2/
Related
Text
Hi there,
first I have to say: I´m a beginner, so I hope you are patient with me!:-)
I created a navigation via a list. By adding a "padding" for "a" I determined also the height of its ancestor elements ("ul" and "nav"). I did that because afterwards I wanted the whole areas to get black with a transition.
Now, when I want to scale it to 1.2, the "a"-clicking-area appears bigger than the ancestor arease of "ul" and "nav".
Any ideas how I can limit it to the height of the link area?
image
Link to picture of Problem
CSS and html code
<!-- language: lang-css -->
* {
margin: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
padding: 0;
font-family: helvetica;
}
body {
color: #000;
font-size: 1em;
text-align: left;
padding: 0;
background-color: #fff;
}
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
display: block;
}
strong, b {
font-weight: bold;
}
em, i {
font-style: *italic*;
}
small {
font-size: 0.8rem;
}
main h1,
main p {
margin-bottom: 1rem;
}
main h1 {
font-size: 2em;
font-weight: **bold**;
}
main p {
line-height: 1.5em;
}
main :last-child {
margin-bottom: 0;
}
nav ul {
list-style-type: none;
padding: 0;
}
header {
height: 30rem;
background-image: url(../images/whatsapp.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: right bottom;
position: relative;
}
header a {
color: white;
}
/*Breakpoint 1*/
#media (max-width: 1024px) {
header {
height: 20rem;
}
}
header #title {
font-size: 7.5rem;
font-weight: **bold**;
white-space: nowrap;
text-decoration: none;
word-spacing: -0.05em;
position: absolute;
top: 0.5rem;
left: calc(50% - 30rem);
opacity: 0.75;
}
/*Breakpoint 1*/
#media (max-width: 1024px) {
header #title {
font-size: 5rem;
font-weight: **bold**;
white-space: nowrap;
text-decoration: none;
word-spacing: -0.05em;
position: absolute;
top: 0.5rem;
left: calc(60% - 30rem);
opacity: 0.75;
}
}
header #title::before {
content: url(../images/sun.svg);
display: inline-block;
vertical-align: middle;
width: 30%;
font-size: inherit;
margin-top: 1rem;
margin-right: 2rem;
margin-left: 1rem;
}
/*Breakpoint 2*/
#media (max-width: 768px) {
header #title, header #title::before {
transform: rotate(-90deg);
top: calc(30rem - 100%);
left: -6rem;
}
header #title {
font-size: 2.8rem;
}
header #title::before {
width: 20%;
margin-right: 0rem;
margin-left: 2.5rem;
margin-bottom: 1rem;
}
}
nav {
width: 100%;
background-color:rgba(255, 255, 255, 0.3);
position: absolute;
top: 321px;
}
nav ul {
max-width: 1025px;
display: flex;
justify-content: space-around;
margin: auto;
}
nav ul li {
font-size: 1.4rem;
font-weight: **bold**;
white-space: nowrap;
}
nav ul li a {
padding: 4rem 2rem;
text-decoration: none;
display: block;
text-align: center;
}
nav ul li a:hover {
background-color: rgba(0, 0, 0, 0.3);
transform: scale(1.2);
transition: background-color 0.3s ease-in;
transition: transform 0.1s ease-in;
padding: 4rem 2rem;
}
#media (max-width: 1024px) {
nav {
box-sizing: border-box;
width: 180px;
height: inherit;
position: unset;
top: 0;
right: 0;
}
nav ul {
width: 100%;
flex-direction: column;
}
nav ul li a {
padding: 1.03rem;
text-align: left;
}
}
main {
max-width: 1025px;
box-sizing: border-box;
margin: auto;
padding: 2rem;
}
p {
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
```
html code
```
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Whatsapp</title>
<link href="styles/styles_neu.css" rel="stylesheet" media="screen" />
</head>
<body>
<header>
Whatsapp
<nav>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
</ul>
</nav>
</header>
<main>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
</body>
</html>
<!-- end snippet -->
I would like to know the technique how to make vertical timeline with dot between two point as like as the picture.
Any sample code.
Regards.
Use background-image: radial-gradient create dotes and use "pseudo-element" add dotes and icon.
* {
box-sizing: border-box;
}
.items {
margin: 0;
padding: 0;
list-style: none;
}
.items li {
position: relative;
padding: 0 10px 20px 40px;
}
.items li:after {
content: "";
position: absolute;
background: #02a4ce;
width: 16px;
height: 16px;
left: 6px;
top: 2px;
border-radius: 50%;
}
.items li:before {
content: "";
position: absolute;
height: 100%;
width: 20px;
left: 8px;
top: 0;
background-image: radial-gradient(circle at 2.5px, #ccc 1.25px, rgba(255, 255, 255, 0) 2.5px);
background-position: top, right, bottom, left;
background-size: 15px 15px;
background-repeat: repeat-y;
}
.items .end:before {
display: none;
}
.items .end:after {
background: #ec6352;
}
<ul class="items">
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</li>
<li>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</li>
<li class="end">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</li>
</ul>
This question already has answers here:
Make a CSS triangle with transparent background on a div with white bg image?
(5 answers)
Transparent arrow/triangle indented over an image
(4 answers)
How do CSS triangles work?
(23 answers)
Closed 5 years ago.
GitHub uses two pseudoelements to show the green border around the triangle.
Like this:
Can I get the same result with only using one ::after selector?
You can try this
div {
width:300px;
height:100px;
background:#fff;
border:1px solid green;
position:relative;
padding:20px;
}
div:after {
content:"";
position:absolute;
right:-11px;
top:30px;
width:20px;
height:20px;
background:#fff;
border:1px solid green;
border-left:none;
border-bottom:none;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
user-select:none;
-webkit-user-select: none;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,quis nostrud exercitation
</div>
You can used :after & :before selector for that
div {
width: 300px;
height: 200px;
background: #fff;
border: 1px solid #1db73f;
position: relative;
padding: 20px;
border-radius:5px;
}
div:before {
content: "";
position: absolute;
right: -20px;
top: 30px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #fff;
z-index:1;
}
div:after {
content: "";
position: absolute;
right: -21px;
top: 30px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #1db73f;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
I worked on the code i had posted here and fixed it so it does the things i wanted to but the third element in the row wraps to the next line when the browser is between 992px and 1350px. when the browser is between 992px and 1350px the third element in he row wraps to the next line, i have tried with display: inline-block, the left, rifght, center, floats, the flexbox and many other things but nothing seems to work with the media queries in the csss
CSS
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: Times, Verdana, sans-serif;
font-size:100%;
}
}
/**** Row (for the responsive design***/
.row {
padding: 15%;
margin-right: 5px;
margin-left: 5px;
}
/**** Header ****/
header {
font-size: 24px;
margin-bottom: 35px;
padding-top: 2.5%;
text-align: center;
}
/**** Article styles and position ****/
#art1, #art2, #art3 {
display: inline-block;
float: left;
height: 40%;
width: 31%;
}
#art1 {
margin: 10px 20px 10px 25px;
}
#art2 {
margin: 10px 10px 10px 10px;
}
#art3 {
margin: 10px 20px 10px 10px;
}
/**** Article titles ****/
#lorem1 {
background-color: lightgreen;
border: 1.5px solid black;
left: 70%;
margin-bottom: -28.9px;
padding-left: 15px;
padding-right: 15px;
position: relative;
text-align: center;
width: 30%;
}
#lorem2 {
background-color: turquoise;
border: 1.5px solid black;
left: 70%;
top: 20%;
position: relative;
width: 30%;
margin-bottom: -28.9px;
padding-right: 15px;
padding-left: 15px;
text-align: center;
}
#lorem3 {
background-color: crimson;
border: 1.5px solid black;
left: 70%;
margin-bottom: -28.9px;
padding-left: 15px;
padding-right: 15px;
position: relative;
text-align: center;
width: 30%;
}
/**** Content of the articles ****/
p {
border: 1px black solid;
overflow: hidden;
text-overflow: hidden;
}
.p1, .p2, .p3 {
background-color: mediumpurple;
color: gold;
padding: 35px 10px 10px 15px;
}
/**** Media queries ****/
/**Mobile devices**/
#media (max-width: 767px) {
* {
box-sizing: border-box;
margin: 0;
}
#art1, #art2, #art3 {
width: 94.5%;
display: block;
}
#art1, #art2, #art3 {
margin: 10px 20px 10px 20px;
}
}
/**Tablets**/
#media (min-width: 768px) and (max-width: 991px) {
*{
margin: 0; }
#art1, #art2 {
width: 45.5%;
display: inline-block;
}
#art3 {
display: inline-block;
width: 92%;
position: relative;
left: 2.5%;
}
#art1 {
margin: 10px 20px 10px 25px;
}
#art2 {
margin: 10px 10px 10px 10px;
}
#art3 {
margin: 10px 40px 10px 20px;
}
/**Desktop computers**/
#media (min-width: 992px) and (max-width: 1199px) {
* {
box-sizing: border-box;
margin: 0;
}
.row {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
flex-direction: row;
border: 2px solid red; /* not necesary just checkiing it'd appear on the screen*/
}
#art1, #art2, #art3 {
width: 31%;
height: 30%;
}
#art1 {
margin: 10px 20px 10px 25px;
}
#art2 {
margin: 10px 10px 10px 10px;
}
#art3 {
margin: 10px 20px 20px 10px;
fle
}
}
/**** Deskptops above 1360px ****/
#media (min-width: 1200px) and (max-width: 1350px) {
* {
box-sizing: border-box;
margin: 0;
}
.row {
display:flex;
flex-wrap: wrap;
justify-content: center ; /* for horizontal aligning of child divs */
align-items : center ; /* for vertical aligning */
}
#art1, #art2, #art3 {
width: 31%;
display: inline-block;
}
#art1 {
margin: 10px 20px 10px 25px;
}
#art2 {
margin: 10px 10px 10px 10px;
}
#art3 {
margin: 10px 20px 20px 10px;
}
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles-2.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Week 2 assigment</title>
</head>
<body>
<section class="row">
<header>
<h1>Our Menu</h1>
</header>
<article id="art1" >
<h2 id="lorem1">Chiken</h2>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article id="art2" >
<h2 id="lorem2">Beef</h2>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article id="art3">
<h2 id="lorem3">Sushi</h2>
<p class="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</section>
</body>
</html>
Your code is not following any general layout. I suggest checking out w3 and looking at float/clearfix or flexbox layouts so you can figure out stuff before posting too much.
here is a simple vanilla way too display three columns in a line. You can add your media queries to make the sections 100% on resize.
Your CSS is excessive and uses bootstrap classes without having it in your head. And your css plays with these classes. I am not sure what's going on here haha. Hope this helps bro!
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
section {
width:31.33%;
float:left;
margin-right:1%;
}
<body>
<header>
<h1>Our menu</h1>
</header>
<div class="clearfix">
<section class="1">
<h2 class="loremab1">lorem 1</h2>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="2">
<h2 class="loremab2">lorem 2</h2>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section class="3">
<h2 class="loremab3">lorem 3</h2>
<p class="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
</body>
Here is my CSS and HTML code.
.column {
float: left;
width: 252px;
padding-left: 1px;
padding-bottom: 34px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul,
ol {
list-style-type: none;
}
.items li {
border-bottom: 1px solid red;
padding: 7px 16px 4px;
white-space: nowrap;
}
.items li.item--highlighted {
background: #f0ce78;
}
.items li .item__title {
font-size: 14px;
font-weight: normal;
text-transform: none;
font-family: "Roboto", sans-serif;
}
.items li .item__meta__separator {
display: inline-block;
margin: 0 5px;
}
.items li .red {
color: #ed1b2e;
}
.items li .info-bubble.info-bubble-bottom.info-bubble-bottom-left {
left: 70px;
}
.meta {
color: #9D9D9D;
font-size: 11px;
}
<div id="salesInvoice4Columns" class="column column-4" style="width:px;">
<ol class="items">
<li id="saleInvoiceLink0">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">622790_150510_05101756067567567567565758DI</a> <span class="item__meta__separator">|</span>
27.08 09:16
</div>
</li>
<li id="saleInvoiceLink1">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">201523443434343434072QU</a> <span class="item__meta__separator">|</span>
26.08 15:48
</div>
</li>
</ol>
</div>
The problem is that I want all the text which is after red bottom line replaced with ... or fade out. Something that will look nice. Can somebody suggest me how to make this? I have provided fiddle also. link
You can use text-overflow with css and a max-width to control it.
http://fiddle.jshell.net/bqhmkfux/2/
You need to add this class in the css:
.sidebarExternalLink {
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
text-overflow: ellipsis; in combination with overflow: hidden is how you get the three dots ....
The other effect could be achieved with adding a gradient mask using a CSS pseudo element at the bottom of where the text is being displayed.
I've put together an example using a scrollable div with a linear gradient to white for you;
body {
background: white;
}
.wrap {
position: relative;
}
.txt {
height: 200px;
overflow: auto;
}
.txt:after {
position: absolute;
display: block;
bottom: 0;
left: 0;
right: 0;
height: 75px;
background: linear-gradient(transparent, white);
content: '';
}
<div class="wrap">
<div class="txt">
<p>Elit irure consectetur officia laboris nulla sit laborum irure consectetur qui nisi id duis est. Cupidatat est cupidatat consequat quis ad non laboris duis ut laboris adipisicing incididunt. Laborum consectetur tempor ipsum ea quis sit laborum ullamco amet id consectetur id exercitation officia. Est dolor elit laborum nulla officia elit do nisi ex occaecat. Veniam mollit ut proident ut quis incididunt amet sunt ullamco velit. Nulla nostrud cillum ea sint sunt. Id Lorem duis nostrud irure quis et fugiat. Cupidatat duis dolore Lorem incididunt tempor ipsum. Nulla adipisicing nisi enim ea do deserunt officia ut labore excepteur aliqua.</p>
<p>Elit irure consectetur officia laboris nulla sit laborum irure consectetur qui nisi id duis est. Cupidatat est cupidatat consequat quis ad non laboris duis ut laboris adipisicing incididunt. Laborum consectetur tempor ipsum ea quis sit laborum ullamco amet id consectetur id exercitation officia. Est dolor elit laborum nulla officia elit do nisi ex occaecat. Veniam mollit ut proident ut quis incididunt amet sunt ullamco velit. Nulla nostrud cillum ea sint sunt. Id Lorem duis nostrud irure quis et fugiat. Cupidatat duis dolore Lorem incididunt tempor ipsum. Nulla adipisicing nisi enim ea do deserunt officia ut labore excepteur aliqua.</p>
<p>Elit irure consectetur officia laboris nulla sit laborum irure consectetur qui nisi id duis est. Cupidatat est cupidatat consequat quis ad non laboris duis ut laboris adipisicing incididunt. Laborum consectetur tempor ipsum ea quis sit laborum ullamco amet id consectetur id exercitation officia. Est dolor elit laborum nulla officia elit do nisi ex occaecat. Veniam mollit ut proident ut quis incididunt amet sunt ullamco velit. Nulla nostrud cillum ea sint sunt. Id Lorem duis nostrud irure quis et fugiat. Cupidatat duis dolore Lorem incididunt tempor ipsum. Nulla adipisicing nisi enim ea do deserunt officia ut labore excepteur aliqua.</p>
</div>
</div>
Hope that helps you out!
This can be achieved by using overflow: hidden; and text-overflow: ellipsis;. The following changes are required:
Add overflow: hidden; to .meta, this tells it to cut off any content that goes outside its bounderies
Add text-overflow: ellipsis; to .meta, this will ensure that the cut off text is replaced with ellipsis
Add margin-right: -32px; to .meta this will offset the amount of padding set on .items li to ensure that the text is cut off at the end of the red line
.column {
float: left;
width: 252px;
padding-left: 1px;
padding-bottom: 34px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul,
ol {
list-style-type: none;
}
.items li {
border-bottom: 1px solid red;
padding: 7px 16px 4px;
white-space: nowrap;
}
.items li.item--highlighted {
background: #f0ce78;
}
.items li .item__title {
font-size: 14px;
font-weight: normal;
text-transform: none;
font-family: "Roboto", sans-serif;
}
.items li .item__meta__separator {
display: inline-block;
margin: 0 5px;
}
.items li .red {
color: #ed1b2e;
}
.items li .info-bubble.info-bubble-bottom.info-bubble-bottom-left {
left: 70px;
}
.meta {
color: #9D9D9D;
font-size: 11px;
margin-right: -32px;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="salesInvoice4Columns" class="column column-4" style="width:px;">
<ol class="items">
<li id="saleInvoiceLink0">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">622790_150510_05101756067567567567565758DI</a> <span class="item__meta__separator">|</span>
27.08 09:16
</div>
</li>
<li id="saleInvoiceLink1">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">201523443434343434072QU</a> <span class="item__meta__separator">|</span>
26.08 15:48
</div>
</li>
</ol>
</div>
want all the text which is after red bottom line replaced with ... or
fade out.
Other answers already describe how to display an ellipsis.
I shall try to demonstrate how you can do a fadeout (the second part of your question). You can add an ::after pseudo-element to your li, and provide it a gradient background. Provide position: relative to the li and position:absolute to the pseudo-element.
Something like this:
.items li { position: relative; }
.items li::after {
content: '';
display: inline-block; position: absolute;
top: 0; left: 100%; height: 100%; width: 100%;
background: -webkit-linear-gradient(right, #fff, rgba(255,255,255,0.5));
}
Example:
.column {
float: left; width: 252px;
padding-left: 1px; padding-bottom: 34px;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
ul, ol { list-style-type: none; }
.items li {
border-bottom: 1px solid red; padding: 7px 16px 4px;
white-space: nowrap;
position: relative;
}
.items li.item--highlighted { background: #f0ce78; }
.items li .item__title {
font-size: 14px; font-weight: normal; font-family: "Roboto", sans-serif;
text-transform: none;
}
.items li .item__meta__separator { display: inline-block; margin: 0 5px; }
.items li .red { color: #ed1b2e; }
.items li .info-bubble.info-bubble-bottom.info-bubble-bottom-left { left: 70px; }
.meta { color: #9D9D9D; font-size: 11px; }
.items li::after {
content: '';
display: inline-block; position: absolute;
top: 0; left: 100%; height: 100%; width: 100%;
background: -webkit-linear-gradient(right, #fff, rgba(255,255,255,0.5));
}
<div id="salesInvoice4Columns" class="column column-4" style="width:px;">
<ol class="items">
<li id="saleInvoiceLink0">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">622790_150510_05101756067567567567565758DI</a> <span class="item__meta__separator">|</span>
27.08 09:16
</div>
</li>
<li id="saleInvoiceLink1">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">201523443434343434072QU</a> <span class="item__meta__separator">|</span>
26.08 15:48
</div>
</li>
</ol>
</div>
But, in order to display the date-time stamp properly, you will have to re-imagine your layout a little bit.
You can try this (using ellipsis)
CSS
.items li {
border-bottom: 1px solid red;
padding: 7px 0px 4px 16px;
}
.meta {
color: #9D9D9D;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
DEMO HERE