I have a background clipboard image showing behind the first list item within an <ol>.
I'd like it to apply to all the list items (not just the first one), I could do this by applying the class to every <li> but this feels unnecessary when it should work on the <ol> level.
Above shows the background clipboard image only showing under the first list item. How can I get it to work on every list item?
ol {
list-style: none;
padding: 0;
margin: 0;
counter-reset: orderedlist;
}
ol>li {
counter-increment: orderedlist;
padding-left: 1.4em;
line-height: 1.5;
}
ol>li:before {
content: counter(orderedlist)".";
display: inline-block;
width: 1.52em;
}
.action-item {
background-image: url(https://cdn0.iconfinder.com/data/icons/clipboard-1/100/clipboard-10-512.png);
background-position: 15px 0px;
background-repeat: no-repeat;
background-size: 1.4em;
}
<ol class="action-item">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ol>
You don't need to assign the .action-item class to every <li> element. At the moment you only display the background image once on the <ol> element.
You can change the CSS rule from .action-item to .action-item li or ol.action-item li.
You can use the following solution:
ol {
list-style: none;
padding: 0;
margin: 0;
counter-reset: orderedlist;
}
ol > li {
counter-increment: orderedlist;
padding-left: 1.4em;
line-height: 1.5;
}
ol > li:before {
content: counter(orderedlist);
display: inline-block;
width: 1.52em;
}
.action-item li {
background-image: url(https://cdn0.iconfinder.com/data/icons/clipboard-1/100/clipboard-10-512.png);
background-position: 15px 0px;
background-repeat: no-repeat;
background-size: 1.4em;
}
<ol class="action-item">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5<br>multiline</li>
<li>item 6</li>
</ol>
Is there a way to remove the period after the number?
You set the number with content: counter(orderedlist)"."; There is a trailing period. Just remove the period (".") to only show the numbers.
Use background-repeat and adjust the size slightly:
ol {
list-style: none;
padding: 0;
margin: 0;
counter-reset: orderedlist;
}
ol>li {
counter-increment: orderedlist;
padding-left: 1.4em;
line-height: 1.5;
}
ol>li:before {
content: counter(orderedlist)".";
display: inline-block;
width: 1.52em;
}
.action-item {
background-image: url(https://cdn0.iconfinder.com/data/icons/clipboard-1/100/clipboard-10-512.png);
background-position: 15px 0px;
background-repeat: repeat-y;
background-size: 1.5em;
}
<ol class="action-item">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ol>
Actually your current background-image is not applied on the first li, its on the ol...its look like applied on first visually
Just use the background-image to the li instead if ol using parent class .action-item
ol {
list-style: none;
padding: 0;
margin: 0;
counter-reset: orderedlist;
}
ol>li {
counter-increment: orderedlist;
padding-left: 1.4em;
line-height: 1.5;
}
.action-item>li {
background-image: url(https://cdn0.iconfinder.com/data/icons/clipboard-1/100/clipboard-10-512.png);
background-position: 15px 0px;
background-repeat: no-repeat;
background-size: 1.4em;
}
ol>li:before {
content: counter(orderedlist)".";
display: inline-block;
width: 1.52em;
}
<ol class="action-item">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ol>
Everything ok
just use .action-item li{} in place of .action-item{} like this -
.action-item li{
background-image: url(https://cdn0.iconfinder.com/data/icons/clipboard-1/100/clipboard-10-512.png);
background-position: 15px 0px;
background-repeat: no-repeat;
background-size: 1.4em;
}
Related
I have a list and one of the items of my list will be the active item. When the item has the active class I would like it to be underlined.
The problem I am running into is that because my item has a background color and padding to give it height, my underline is right under the block. I would like a space between the item and its underline like demonstrated below but I need the underline to be controlled via the active class not just slapped under the block the way I have in the example below.
ul {
display: flex;
justify-content: space-between;
}
li {
list-style-type: none;
width: 18%;
background-color: red;
display: flex;
justify-content: center;
padding: 2em 0;
color: white
}
li.active {
border-bottom: 4px solid blue;
}
.underline {
width: 17%;
background-color: blue;
height: 4px;
margin-left: 40px;
}
<h2>What I have</h2>
<ul>
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<h2>What I want</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<div class="underline"></div>
I am open to any suggestions including changing the way I have the list items set up. Thank you in advance!
You can use a pseudo element but here is another idea using outline and clip-path:
ul {
display: flex;
justify-content: space-between;
}
li {
list-style-type: none;
width: 18%;
background-color: red;
display: flex;
justify-content: center;
padding: 2em 0;
color: white
}
li.active {
outline: 4px solid blue; /* the border configuration */
outline-offset: 15px; /* the offset */
clip-path: inset(0 0 -40px); /* a big negative value (at least bigger than the offset) */
}
<h2>What I have</h2>
<ul>
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
you can use pseudo element:
ul {
display: flex;
justify-content: space-between;
}
li {
list-style-type: none;
width: 18%;
background-color: red;
display: flex;
justify-content: center;
padding: 2em 0;
color: white;
margin-bottom: 16px;
}
li.active {
position: relative;
}
li.active:after {
content: "";
position: absolute;
width: 100%;
height: 4px;
background: blue;
bottom: -16px;
left: 0;
}
<h2>What you want:</h2>
<ul>
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
This question already has an answer here:
Break unordered list items across columns with flexbox
(1 answer)
Closed 4 years ago.
I try to make 2 column list and vertical order using flexbox
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
see image for the example
Here's a simple wrapping column layout in flexbox.
Each li element takes up 6em height (5em height + .5em margin * 2), so we set the parent container to 30em height to fit five elements.
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
height: 30em;
}
li {
background: gray;
width: 5em;
height: 5em;
margin: .5em;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
The HTML is straight-forward:
<div class="items">
<div class="item">Heriberto Nickel</div>
<div class="item">Brittaney Haliburton</div>
<div class="item">Maritza Winkler</div>
<div class="item">Carmon Rigg</div>
<div class="item">Alice Marmon</div>
<div class="item">Lyman Steakley</div>
<div class="item">Zenia Correa</div>
</div>
<div class="items">
<div class="item">Heriberto Nickel</div>
<div class="item">Brittaney Haliburton</div>
<div class="item">Maritza Winkler</div>
<div class="item">Carmon Rigg</div>
<div class="item">Alice Marmon</div>
<div class="item">Lyman Steakley</div>
<div class="item">Zenia Correa</div>
</div>
Using floats, the CSS for this would be:
.items {
overflow: hidden; /* simple clearfix */
}
.items .item {
float: left;
width: 25%;
}
.items {
overflow: hidden; /* simple clearfix */
}
.items .item {
float: left;
width: 25%;
}
This gives us four columns that wrap. We can also add a little bit of style to give it a more pleasing look:
.items .item {
float: left;
width: 25%;
box-sizing: border-box;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
.items .item {
float: left;
width: 25%;
box-sizing: border-box;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
Hope this helps.
.list-one {
display: inline-block;
float: left;
list-style-type: none;
}
.list-two {
display: inline-block;
float: left;
list-style-type: none;
}
li {
margin-top: 10px;
}
.line-item {
background-color: grey;
height: 50px;
display: block;
color: #fff;
width: 50px;
padding: 30px 20px 0px 20px;
text-align: center
}
<ul class="list-one">
<li><span class="line-item">1</span></li>
<li><span class="line-item">2</span></li>
<li><span class="line-item">3</span></li>
<li><span class="line-item">4</span></li>
<li><span class="line-item">5</span></li>
</ul>
<ul class="list-two">
<li><span class="line-item">6</span></li>
<li><span class="line-item">7</span></li>
<li><span class="line-item">8</span></li>
<li><span class="line-item">9</span></li>
<li><span class="line-item">10</span></li>
</ul>
This question already has an answer here:
Break unordered list items across columns with flexbox
(1 answer)
Closed 4 years ago.
I try to make 2 column list and vertical order using flexbox
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
see image for the example
Here's a simple wrapping column layout in flexbox.
Each li element takes up 6em height (5em height + .5em margin * 2), so we set the parent container to 30em height to fit five elements.
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
height: 30em;
}
li {
background: gray;
width: 5em;
height: 5em;
margin: .5em;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
The HTML is straight-forward:
<div class="items">
<div class="item">Heriberto Nickel</div>
<div class="item">Brittaney Haliburton</div>
<div class="item">Maritza Winkler</div>
<div class="item">Carmon Rigg</div>
<div class="item">Alice Marmon</div>
<div class="item">Lyman Steakley</div>
<div class="item">Zenia Correa</div>
</div>
<div class="items">
<div class="item">Heriberto Nickel</div>
<div class="item">Brittaney Haliburton</div>
<div class="item">Maritza Winkler</div>
<div class="item">Carmon Rigg</div>
<div class="item">Alice Marmon</div>
<div class="item">Lyman Steakley</div>
<div class="item">Zenia Correa</div>
</div>
Using floats, the CSS for this would be:
.items {
overflow: hidden; /* simple clearfix */
}
.items .item {
float: left;
width: 25%;
}
.items {
overflow: hidden; /* simple clearfix */
}
.items .item {
float: left;
width: 25%;
}
This gives us four columns that wrap. We can also add a little bit of style to give it a more pleasing look:
.items .item {
float: left;
width: 25%;
box-sizing: border-box;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
.items .item {
float: left;
width: 25%;
box-sizing: border-box;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
Hope this helps.
.list-one {
display: inline-block;
float: left;
list-style-type: none;
}
.list-two {
display: inline-block;
float: left;
list-style-type: none;
}
li {
margin-top: 10px;
}
.line-item {
background-color: grey;
height: 50px;
display: block;
color: #fff;
width: 50px;
padding: 30px 20px 0px 20px;
text-align: center
}
<ul class="list-one">
<li><span class="line-item">1</span></li>
<li><span class="line-item">2</span></li>
<li><span class="line-item">3</span></li>
<li><span class="line-item">4</span></li>
<li><span class="line-item">5</span></li>
</ul>
<ul class="list-two">
<li><span class="line-item">6</span></li>
<li><span class="line-item">7</span></li>
<li><span class="line-item">8</span></li>
<li><span class="line-item">9</span></li>
<li><span class="line-item">10</span></li>
</ul>
I have a 'ul' tag that already styles something else. I need to create another 'ul' tag to stylize something else in my HTML page.
This is the first ul style:
ul {
list-style: none;
padding: 0px;
margin: 0px;
font-family: arial;
color:white;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
I need to style another ul where I create a list of items. I want the default CSS settings for the ul tags, but I don't know how to make that work.
Here is the HTML code for the ul list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
What code will make the above ul tag go back to the default CSS settings?
Better assign a class for the first ul and add styles for that CSS class, then other ul in the page will not get affected.
.first-ul {
list-style: none;
padding: 0px;
margin: 0px;
font-family: arial;
color: #000;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul class="first-ul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
You could wrap the two inside of a div and style using accordingly.
simple markup
<div class="somediv">
<ul></ul>
<ul></ul>
</div>
simple css
.somediv ul:first-child {
background: blue
}
.somediv ul:nth-child(2) {
background: red
}
You can use different class names (one common and one different name) to the UL and give as many properties as you wish.
.common{
list-style: none;
padding: 0px;
margin: 0px;
font-family: arial;
color:white;
text-align: center;
}
.red
{
color:red;
}
.green
{
color:green;
}
<ul class="common red">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul class="common green">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div class="first">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="scnd">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
add like this in your stylesheet
.first ul
{
Your style here
}
.scnd ul
{
Your style here
}
iam trying to do a top menu with the width of the background color to 100%.
and keep the content of my menu inside my wrap id which 960px.
Can somebody explain me how to do it.
Demo: http://jsfiddle.net/NnCVv/246/
html:
<div id="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
</ul>
</div>
CSS
*
{
padding: 0px;
margin: 0px;
}
#wrap
{
width: 960px;
margin: 0px auto;
margin: 0px auto;
}
ul
{
background: navy;
overflow: hidden;
}
ul li
{
float: left;
list-style: none;
}
ul li a
{
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}
Try this
<!DOCTYPE html>
<html>
<head>
<style>
*
{
padding: 0px;
margin: 0px;
}
#banner
{
width:100%;
background-color:green;
}
#wrap1
{
background-color:black;
width: 960px;
}
#wrap
{
margin: 0px auto;
margin: 0px auto;
}
ul
{
background: navy;
overflow: hidden;
}
ul li
{
float: left;
list-style: none;
}
ul li a
{
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<div id="banner">
<div id="wrap1">
<ul id="wrap">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
</ul>
</div>
</div>
</body>
</html>