What I want to achieve is make a tag text to start new line under it own text not under numbers
ul.myul {
counter-reset: li;
}
ul.myul li {
counter-increment: li;
list-style: none;
margin-bottom: 10px;
}
ul.myul li a::before {
content: "0" counter(li);
font-size: 22px;
font-family: 'poppinsbold';
color: red;
margin-right: 10px;
}
<div style="width:400px">
<ul class="myul">
<li><a>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</a></li>
<li><a>lorem ipsum lorem</a></li>
</ul>
</div>
This is what I want actually, it should goes to new line after red line, not behind the redline:
ul.myul {
counter-reset: li;
}
ul.myul li {
counter-increment: li;
list-style: none;
margin-bottom: 10px;
}
ul.myul li a::before {
content: "0" counter(li);
font-size: 22px;
font-family: 'poppinsbold';
color: red;
margin-right: 10px;
}
.myul::after {
content: "";
width: 2px;
height: 100%;
background: red;
position: absolute;
top: 0;
left: 78px;
}
<div style="width:400px">
<ul class="myul">
<li><a>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</a></li>
<li><a>lorem ipsum lorem</a></li>
</ul>
</div>
#CBroe had already mentioned it correctly in the comment. The ul CSS property list-style-position: outside; is the right way to go here.
ul.myul {
counter-reset: li;
}
ul.myul li {
counter-increment: li;
list-style: none;
margin-bottom: 10px;
padding-left: 50px;
list-style-position: outside;
position: relative;
}
ul.myul li::before {
content: "0" counter(li) ".";
font-size: 22px;
font-family: 'poppinsbold';
color: red;
left: 0;
position: absolute;
top: 0;
}
.myul::after {
content: "";
width: 2px;
height: 100%;
background: red;
position: absolute;
top: 0;
left: 86px;
}
<div style="width:400px">
<ul class="myul">
<li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
<li><a>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</a></li>
<li><a>lorem ipsum lorem</a></li>
</ul>
</div>
Related
Hi I have some text in quoutes (I used png files as quoutes).
The problem is with the line breaking when you shrink down the window size. I am trying to avoid breaking line with image only, like this :
It should only break line with at least some text to the left, like this:
How can I achieve this? Any help would be much appreciated.
.testimonials {
padding: 80px 0;
padding: 60px 0;
position: relative;
}
.testimonials::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.testimonials .testimonial-item {
text-align: center;
color: #fff;
}
.testimonials .testimonial-item .testimonial-img {
width: 100px;
border-radius: 50%;
border: 2px solid #fff;
margin: 0 auto;
}
.testimonials .testimonial-item h3 {
font-size: 30px;
font-weight: bold;
margin: 10px 0 5px 0;
color: black;
}
.testimonials .testimonial-item h4 {
font-size: 20px;
color: red;
margin: 0 0 15px 0;
}
.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
color: rgba(255, 255, 255, 0.6);
font-size: 26px;
}
.testimonials .testimonial-item .quote-icon-left {
display: inline-block;
left: -2px;
position: relative;
top: 5px;
}
.testimonials .testimonial-item .quote-icon-right {
display: inline-block;
right: -2px;
position: relative;
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 0 auto 15px auto;
color: black;
}
#media (min-width: 1024px) {
.testimonials {
background-attachment: fixed;
}
}
#media (min-width: 992px) {
.testimonials .testimonial-item p {
width: 80%;
}
}
<div class="testimonials">
<div class="testimonial-item">
<h3>John</h3>
<h4>Master</h4>
<p>
<img src="https://www.pngall.com/wp-content/uploads/12/Quotes-Mark-Symbol-PNG-Image.png" class="bi bi-quote quote-icon-left" style="max-width:26px;"/>
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
<img src="https://www.pngall.com/wp-content/uploads/12/Quotes-Mark-Symbol-PNG-Image.png" class="bi bi-quote quote-icon-right" style="max-width:26px;"/>
</p>
</div>
</div>
I just figured out an asnwer based on post : Keep <img> always at the end of text line
<div class="testimonials">
<div class="testimonial-item">
<h3>John</h3>
<h4>Master</h4>
<p>
<img src="https://www.pngall.com/wp-content/uploads/12/Quotes-Mark-Symbol-PNG-Image.png" class="bi bi-quote quote-icon-left" style="max-width:26px;"/>
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem
<span style="white-space:nowrap;">ipsum
<img src="https://www.pngall.com/wp-content/uploads/12/Quotes-Mark-Symbol-PNG-Image.png" class="bi bi-quote quote-icon-right" style="max-width:26px;"/>
</span>
</p>
</div>
</div>
We have to combine last word with the image in the <span></span> element. Then give it a white-space:nowrap styling.
I'm trying to make the list take up all the blue space, but I don't want to add another item.
I could just give the items the right amount of padding to make it fit perfectly, but I feel like that's not the right way. So I thought there must be a way to do this with flexbox.
See plunker and snippet:
html,
body {
margin: 0px;
height: 100%;
}
main {
display: flex;
}
#art1 {
flex: 2;
margin-right: 20px;
background: red;
display: flex;
}
#art2 {
background: blue;
flex: 1;
}
#art1>img,
#art1>p {
flex: 1;
}
article {}
#media (max-width: 800px) {
main {
flex-direction: column;
}
#art1 {
margin: 0;
}
}
.activiteiten {
background: yellow;
list-style-type: none;
margin: 0;
padding: 0;
}
.activiteiten>li {
background: white;
border: 1px solid green;
padding: 10px;
}
<main>
<article id="art1">
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
<img src="http://via.placeholder.com/150x250" alt="">
</article>
<article id="art2">
<ul class="activiteiten">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</article>
</main>
Make your ul a flexbox too:
height: 100%;
margin: 0; // reset the margin
display: flex;
flex-direction: column; // list vertically
justify-content: space-around; // spread the li vertically
and add flex: 1 to the lis
See demo below:
html,
body {
margin: 0px;
height: 100%;
}
main {
display: flex;
}
#art1 {
flex: 2;
margin-right: 20px;
background: red;
display: flex;
}
#art2 {
background: blue;
flex: 1;
}
#art1>img,
#art1>p{
flex: 1;
}
article {}
article ul {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
}
article ul li {
flex: 1;
}
#media (max-width: 800px) {
main {
flex-direction: column;
}
#art1 {
margin: 0;
}
}
.activiteiten {
background: yellow;
list-style-type: none;
margin: 0;
padding: 0;
}
.activiteiten>li{
background: white;
border: 1px solid green;
padding: 10px;
}
<main>
<article id="art1">
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
<img src="http://via.placeholder.com/150x250" alt="">
</article>
<article id="art2">
<ul class="activiteiten">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</article>
</main>
HTML:
<ul>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
</ul>
CSS:
li::before {
content: "– " " ";
}
li {
list-style: outside none none;
padding: 0 0 0 10px;
text-indent: -10px;
}
I would like to add an extra space after the - of each li. I tried:
content: "- "
but it doesnt work. How can I add this.
thanks
thomas
You can moderate the space by adding padding-right to it.
Like this
li::before {
content: "+";
padding-right: 10px;
}
li {
list-style: outside none none;
padding: 0 0 0 10px;
text-indent: -10px;
}
<ul>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
</ul>
you could use \00a0 (unicode) in css content
content: "–\00a0\00a0\";
try: https://jsfiddle.net/Lh6ro16g/
Place :before with position: absolute and increase / decrease padding-left on <li> to set indent as much as you want. This method will allow you to have text aligned vertically even if it goes in multiple lines.
li::before {
position: absolute;
content: "–";
top: 1px;
left: 0;
}
li {
list-style: outside none none;
padding-left: 20px;
position: relative;
}
<ul>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
<li>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</li>
</ul>
you can increase / decrease space using padding-right on li as much as you want.
<ul>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
enter</ul>
li:before {
content: "-";
padding-right: 20px;
}
li{
list-style:outside none;
}
I want to insert in my HTML newsletter a link "Read more ... " that expand/hide my news inside of my email with more info (more text). How can I do this to work on Microsoft Outlook.
I know how to do that on a web page using CSS (code mentioned below) but on an email this doesn't work.
HTML:
<p class="read-more-wrap">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.
<span class="read-more-target">hidden lorem ipsum hidden lorem ipsum hidden lorem ipsum hidden lorem ipsum hidden lorem ipsum.</span>
</p>
<label for="post-1" class="read-more-trigger"></label>
CSS:
.read-more-state {
display: none;
}
.read-more-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
.read-more-state ~ .read-more-trigger:before {
content: 'Show more';
}
.read-more-state:checked ~ .read-more-trigger:before {
content: 'Show less';
}
.read-more-trigger {
cursor: pointer;
display: inline-block;
padding: 0 .5em;
color: #666;
font-size: .9em;
line-height: 2;
border: 1px solid #ddd;
border-radius: .25em;
}
Here is the easiest solution I could think of:
CSS:
#mycheckbox:checked ~ .moretext {
display: block;
}
.moretext{
display: none;
}
#mycheckbox{
display: none;
}
.showmore{
cursor: pointer;
}
HTML:
<input type="checkbox" id="mycheckbox" />
<label for="mycheckbox" class="showmore">Toggle more</label>
<div class="moretext" >Some more text</div>
Demo: https://jsfiddle.net/behxbd0t/
I'm having a Youtube video iframe cover the whole window (100% width and height) and i have the rest of the elements scroll over the video.
Everything works fine on Chrome and Firefox but IE doesn't seem to respond to z-index.
I've created a jsFiddle here http://jsfiddle.net/RickyStam/42tLS/ where you can see the problem.
HTML
<div class="page-container">
<div>
<div class="header">
<img src="Images/logo.png" />
<div class="menu-container">
<ul>
<li>solutions</li>
<li>about us</li>
<li>contact</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="video-container">
<iframe class="video-player" src="//www.youtube.com/embed/7x8BCbo45qA?autoplay=0&showinfo=0&controls=0" wmode="Opaque" frameborder="0" allowfullscreen></iframe>
<div class="video-container-text">
<h1 class="regularfonts">LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</h1>
<p>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</p>
</div>
</div>
</div>
<div style="width: 100%; height: 685px; z-index: 12"></div>
<div class="aboutus-container">
<h1>ABOUT US</h1>
<p>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUMLOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</p>
<p>
LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM<br />
LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM
</p>
<p>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</p>
</div>
</div>
CSS
.page-container {
width: 100%;
}
.header {
background: black;
height: 80px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 11;
}
.video-container {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
text-align: center;
}
.video-player {
width: 100%;
height: 100%;
}
.video-container-text {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
background-image: url('../Images/check_black.png');
padding-top: 200px;
box-sizing: border-box;
}
.video-container-text h1 {
font-size: 18px;
padding: 20px 30px;
background-image: url('../Images/check_black.png');
border-left: 2px solid #cf0103;
border-right: 2px solid #cf0103;
display: inline-block;
}
.aboutus-container {
height: 270px;
background: #292929;
text-align: center;
position: relative;
z-index: 10;
}
.aboutus-container h1 {
font-size: 25px;
display: inline-block;
margin-top: 45px;
margin-bottom: 20px;
}
Any help will be much appreciated!
I manage to find the answer i had to add to the src of iframe &wmode=opaque
Here is the complete iframe :
<iframe class="video-player" src="//www.youtube.com/embed/7x8BCbo45qA?autoplay=0&showinfo=0&controls=0&wmode=opaque" wmode="Opaque" frameborder="0" allowfullscreen></iframe>