I found this lovely style for numbered lists but I would like to know if it can be improved to center the numbers with the content of each list item. Thanks!
http://codeitdown.com/ordered-list-css-styles/
ol.print-list {
list-style-type: none;
list-style-type: decimal !ie; /*IE 7- hack*/
margin: 0;
margin-left: 4em;
padding: 0;
counter-reset: li-counter;
}
ol.print-list > li{
position: relative;
margin-bottom: 20px;
padding-left: 0.5em;
min-height: 3em;
}
ol.print-list > li:before {
position: absolute;
top: 0;
left: -1.33em;
width: 1.2em;
height: 1.2em;
font-size: 2.5em;
line-height: 1.2;
text-align: center;
color: #f5f5f5;
border: 1px solid #c5c5c5;
border-radius: 50%;
background-color: #4CAF50;
content: counter(li-counter);
counter-increment: li-counter;
}
<ol class="print-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
https://jsfiddle.net/mx3m3avv/
you just had to add a line-height to:
ol.print-list > li{
position: relative;
margin-bottom: 20px;
padding-left: 0.5em;
min-height: 3em;
line-height: 3em;
}
jsfiddle
Related
I don't necessarily know how to describe my problem. Just after creating the list, a dash appears after the last <li> tag (see photo in the attachment). How can i remove that line? Can you help me please?
Photo desribing my problem
Code bellow:
CSS:
#app_ulist ul {
padding-left: 30px;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
list-style-type: none;
position: relative;
}
#app_ulist>ul>li:before {
content: "\2713";
}
#app_ulist>ul:after, #app_ulist>ul:before {
content: " ";
display: table;
}
#app_ulist>ul>li:before {
color: #fff;
display: block;
font-family: fontello;
font-size: 12px;
font-weight: 400;
left: -29px;
line-height: 20px;
margin-top: -1px;
position: absolute;
text-align: center;
width: 20px;
text-indent: 1px;
}
#app_ulist>ul>li {
margin-bottom: 10px;
padding-top: 0;
position: relative;
}
#app_ulist> ul > li::before {
background-color: #698e9e;
}
HTML:
<div id="app_ulist" class="mt-5">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
You need to remove the margin-top: -1px from #app_ulist>ul>li:before.
#app_ulist>ul>li:before {
color: #fff;
display: block;
font-family: fontello;
font-size: 12px;
font-weight: 400;
left: -29px;
line-height: 20px;
position: absolute;
text-align: center;
width: 20px;
text-indent: 1px;
}
I'm very new into coding and I wanted to add a progress bar on my website. But when I want to make the step1 "active", it's the step2 that gets active (and when I make the step 2 active, it's the step 3 that gets active and so on)
<div id="fh5co-work">
<div class="row">
<div class="col-md-8">
<div class="root">
<div class="container">
<ul class="progressbar">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
</ul>
</div>
</div>
Here's the css code in the bootstrap.css:
.container{
width: 140%;
position: absolute;
z-index: 1;
}
.progressbar li{
float: left;
width: 20%;
position: relative;
text-align: center;
}
.progressbar li:before{
content:"1";
width: 30px;
height: 30px;
border: 2px solid #bebebe;
display: block;
margin: 0 auto 10px auto;
border-radius: 50%;
line-height: 27px;
background: white;
color: #bebebe;
text-align: center;
font-weight: bold;
}
.progressbar{
counter-reset: step;
}
.progressbar li:before{
content:counter(step);
counter-increment: step;
width: 30px;
height: 30px;
border: 2px solid #bebebe;
display: block;
margin: 0 auto 10px auto;
border-radius: 50%;
line-height: 27px;
background: white;
color: #bebebe;
text-align: center;
font-weight: bold;
}
.progressbar li:after{
content: '';
position: absolute;
width:100%;
height: 3px;
background: #37606f;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after{
content: none;
}
.progressbar li.active + li:after{
background: #37606f;
}
.progressbar li.active + li:before{
border-color: #37606f;
background: #37606f;
color: white
}
What can I do to make it work?
When I changed the style definition .progressbar li.active + li:before in css to .progressbar li.active:before, the problem went away.
.container{
width: 140%;
position: absolute;
z-index: 1;
}
.progressbar li{
float: left;
width: 20%;
position: relative;
text-align: center;
}
.progressbar li:before{
content:"1";
width: 30px;
height: 30px;
border: 2px solid #bebebe;
display: block;
margin: 0 auto 10px auto;
border-radius: 50%;
line-height: 27px;
background: white;
color: #bebebe;
text-align: center;
font-weight: bold;
}
.progressbar{
counter-reset: step;
}
.progressbar li:before{
content:counter(step);
counter-increment: step;
width: 30px;
height: 30px;
border: 2px solid #bebebe;
display: block;
margin: 0 auto 10px auto;
border-radius: 50%;
line-height: 27px;
background: white;
color: #bebebe;
text-align: center;
font-weight: bold;
}
.progressbar li:after{
content: '';
position: absolute;
width:100%;
height: 3px;
background: #37606f;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after{
content: none;
}
.progressbar li.active + li:after{
background: #37606f;
}
.progressbar li.active:before{
border-color: #37606f;
background: #37606f;
color: white
}
<div id="fh5co-work">
<div class="row">
<div class="col-md-8">
<div class="root">
<div class="container">
<ul class="progressbar">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I need to center sidebar vertically without using position: absolute or position: fixed, and also not using any css3 features, like flexbox and grid. I also may only use div, ul, and li elements. How can I do this?
Also, how can I position the footer at the bottom of the page with the same limitations?
This is my current solution using position: fixed: https://jsfiddle.net/gx82v4uo/
.vertical-menu {
position: fixed;
top: 50%;
transform: translateY(-50%);
right: 0px;
}
.vertical-menu ul {
padding: 0;
margin: 0;
text-align: center;
background: #2b3b75;
}
.vertical-menu li {
display: block;
color: #fff;
width: 100px;
height: 50px;
line-height: 50px;
font-size: 15px;
font-weight: bold;
}
You can do this using a table.
Here is how I might accomplish it (click the 'Full page' link to see how the sidebar is vertically centered regardless of screen height):
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #ccc;
font-family: Arial;
height: 100%;
}
table {
height: 100%;
width: 100%;
border-collapse: collapse;
}
.minimum-height {
height: 0;
}
#main {
width: 100%;
}
.header ul {
padding: 0;
margin: 0;
text-align: center;
background: #2b3b75;
}
.header li {
display: inline-block;
color: #fff;
width: 100px;
height: 50px;
line-height: 50px;
font-size: 15px;
font-weight: bold;
}
.header li:hover {
background: #3d53a3;
}
.vertical-menu ul {
padding: 0;
margin: 0;
text-align: center;
background: #2b3b75;
}
.vertical-menu li {
display: block;
color: #fff;
width: 100px;
height: 50px;
line-height: 50px;
font-size: 15px;
font-weight: bold;
}
.vertical-menu li:hover {
background: #3d53a3;
}
.footer {
margin-bottom: 0px;
}
.footer ul {
padding: 0;
margin: 0;
text-align: center;
background: #424242;
}
.footer li {
display: inline-block;
color: #fff;
width: 100px;
height: 50px;
line-height: 50px;
font-size: 15px;
font-weight: bold;
}
.footer li:hover {
background: #646464;
}
<table>
<tr class="minimum-height">
<td colspan="2">
<div class="header">
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
<li>ITEM 5</li>
</ul>
</div>
</td>
</tr>
<tr>
<td id="main"></td>
<td>
<div class="vertical-menu">
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
<li>ITEM 5</li>
</ul>
</div>
</td>
</tr>
<tr class="minimum-height">
<td colspan="2">
<div class="footer">
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
<li>ITEM 5</li>
</ul>
</div>
</td>
</tr>
</table>
This is the best I can do to help you. You need to change your styling like
<style>
body {
margin: 0;
padding: 0;
background: #ccc;
font-family: Arial;
}
.header ul {
padding: 0;
margin: 0;
text-align: center;
background: #2b3b75;
}
.header li {
display: inline-block;
color: #fff;
width: 100px;
height: 50px;
line-height: 50px;
font-size: 15px;
font-weight: bold;
}
.header li:hover {
background: #3d53a3;
}
.vertical-menu {
padding: 11.2% 0;
overflow: hidden;
}
.vertical-menu ul {
padding: 0;
margin: 0;
text-align: center;
background: #2b3b75;
width: fit-content;
float: right;
}
.vertical-menu li {
display: block;
color: #fff;
width: 100px;
height: 50px;
line-height: 50px;
font-size: 15px;
font-weight: bold;
}
.vertical-menu li:hover {
background: #3d53a3;
}
.footer {
}
.footer ul {
padding: 0;
margin: 0;
text-align: center;
background: #424242;
}
.footer li {
display: inline-block;
color: #fff;
width: 100px;
height: 50px;
line-height: 50px;
font-size: 15px;
font-weight: bold;
}
.footer li:hover {
background: #646464;
}
</style>
And now you need to change the .vertical-menu padding according to the multiple device sizes if you need. You can do so using media query.
So I try to change li's vertical position but when I do the nav bar height is affected as well. What is the way to actually do that without affecting nav bar's height?
Here's the code:
body {
margin: 0px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
padding-left: 5px;
padding-top: 10px;
background-color: #333;
overflow: hidden;
}
li {
float: left;
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
What is your goal here? To have the content centered or...?
It may be better to use flexbox here rather than set the padding-left: 850px; on your ul (also on your ul you could've used display: block; margin: 0 auto; to center it.) If you'd like, you can give your ul a defined height and use align-items to specify how it should be aligned vertically.
body {
margin: 0;
}
nav {
background-color: #333;
display: flex;
justify-content: center;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
height: 50px;
align-items: center;
}
li {
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<body>
<nav>
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
</nav>
</body>
You can add position: relative; and a value for bottom or top- in my snippet bottom: 4px;:
This reserves the space originally taken by the element (without position: relative;), but moves the element according to the top/bottom/left/right settings, without affecting other elements.
body {
margin: 0px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
padding-left: 5px;
padding-top: 10px;
background-color: #333;
overflow: hidden;
}
li {
float: left;
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
position: relative;
bottom: 4px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
I have a navigation bar with CSS & HTML but a little problem.
I want to make all the area of the text (Homepage f.e.) darker, not only the text.
CSS:
#navi {
background: #008cba url(http://img3.wikia.nocookie.net/__cb20101125042233/habbo/en/images/7/7f/Frank.gif) no- repeat;
background-position: 1272px -14px;
margin-left: -8px;
margin-right: -8px;
height: 43px;
}
a {
text-decoration: none;
color: white;
font-size: 16px;
}
ul {
list-style-type: none;
margin-top: -8px;
padding: 10px;
padding-left: 5px;
margin-left: -15px;
}
li {
display: inline;
margin-left: 15px;
font-size: 14px;
}
li:hover {
background-color: black;
}
How i can make the complety area of the text darker?
-> http://i.imgur.com/exd9eNR.png
Thanks in advance.
Refine your css a little bit, add height to li element, change it to inline-block and add line-height to a :)
* {
margin: 0px;
}
#navi {
background: #008cba url(http://img3.wikia.nocookie.net/__cb20101125042233/habbo/en/images/7/7f/Frank.gif) no-repeat;
background-position: 1272px -14px;
height: 43px;
}
a {
text-decoration: none;
color: white;
font-size: 16px;
line-height: 43px;
padding: 0px 10px;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
li {
display: inline-block;
margin-left: 15px;
font-size: 14px;
height: 43px;
}
li:hover {
background-color: black;
}
<div id="navi">
<ul>
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
<li>Home
</li>
</ul>
</div>