I have 1 row of 3 divs. The rows on the edges (1,3) are arrow indicators. Edge/Column 1 has an arrow indicating left; edge/column3 has an arrow indicating right. The middle column (2) is scrollable. I want for when the middle column, the edges remain intact.
In the code example. The first column remains while the middle column scroll but the third column (right arrow) disappears.
Please and thank you in advanced.
body {
font-family: sans-serif;
color: #3d85c6;
}
.letter-changer {
animation: example 5s linear 2s infinite alternate;
}
ul.mp-0,
.mp-0 {
margin: 0;
padding: 0;
}
div.lk-shadow{
-webkit-box-shadow: 5px 7px 9px 0px rgba(0, 0, 0, 0.6);
box-shadow: 5px 7px 9px 0px rgba(0, 0, 0, 0.6);
}
div.lk-verb-box {
position: relative;
overflow: hidden;
vertical-align: middle;
width: 300;
min-width: 150px;
white-space: nowrap;
overflow-x: auto;
}
div.lk-verb-border {
margin: 5px;
}
.lk-scroll-arrow {
height: 10px;
width: 10px;
text-align: center;
line-height: 40px;
vertical-align: middle;
}
ul.lk-verb {
list-style: none;
padding: 0%;
word-spacing: 0%;
white-space: nowrap;
overflow-y: hidden;
overflow-x: auto;
display: block;
padding: 5px;
}
li.lk-verb {
display: inline-block;
background-color: white;
color: #3d85c6;
border: solid 1px #3d85c6;
height: 20px;
padding: 5px;
padding-left: 7px;
padding-right: 7px;
border-radius: 5px;
}
li.lk-verb:hover {
background-color: #3d85c6;
color: white;
cursor: pointer;
}
.lk-fl {
float: left;
}
.lk-ele-box {
overflow-x: auto;
}
#keyframes example {
from {
transform: translateX(0);
}
to {
transform: translateX(140px);
}
}
</style>
<script type="text/javascript">
document.addEventListener("keypress", function (e) {
var el = document.getElementById("vbr10");
el.scrollIntoView(true);
});
<div class="lk-shadow" style="padding-right: 5px;">
<div class="lk-scroll-arrow lk-fl" style="display: table-cell;">🢔</div>
<div class="lk-verb-box" >
<ul class="lk-verb mp-0 lk-fl">
<li id="vrb1" class="lk-verb">Element 1</li>
<li id="vrb2" class="lk-verb">Element 1</li>
<li id="vrb3" class="lk-verb">Element 2</li>
<li id="vrb4" class="lk-verb">Element 0</li>
<li id="vrb5" class="lk-verb">Element 3</li>
<li id="vrb6" class="lk-verb">Element 4</li>
<li id="vrb7" class="lk-verb">Element 5</li>
<li id="vrb8" class="lk-verb">Element 6</li>
<li id="vrb9" class="lk-verb">Element 7</li>
<li id="vrb10" class="lk-verb">Element 8</li>
<li id="vrb11" class="lk-verb">Element 9</li>
</ul>
<div class="lk-scroll-arrow lk-fl" style="display: table-cell;">🢖</div>
</div>
</div>
Related
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
CSS align few items on both side with flexbox [duplicate]
(1 answer)
Closed 3 years ago.
I'm implementing navigation bar of github and wanna align two parts at the left and right. Therefore, I used float property, but it didn't work for my code. What is wrong with me?
html {
box-sizing: border-box
}
*,
*:before,
*:after {
box-sizing: inherit;
padding: 0;
margin: 0;
list-style-type: none;
}
body {
font: 16px;
line-height: 1.5;
background-color: black;
}
a {
text-decoration: none;
color: inherit;
}
.navigation {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
background-color: black;
}
.navigation__left {
border: 2px solid red;
float: left;
}
.navigation__right {
border: 2px solid blue;
float: right;
}
.navigation__left,
.navigation__right {
cursor: pointer;
color: white;
padding: 1rem;
}
.navigation__left img {
height: 4vh;
}
.navigation__left__dropdown {
position: absolute;
margin-top: 1rem;
display: none;
color: black;
background-color: white;
padding: 20px;
border-radius: 3%;
}
.navigation__left:hover {
color: gray;
}
.navigation__left:nth-child(even):hover .navigation__left__dropdown {
display: block;
}
.navigation__right:last-child a {
border: 1px solid white;
padding: 0.5vw 1vw 0.5vw 1vw;
border-radius: 3%;
}
input {
height: 3vh;
width: 15vw;
background-color: gray;
border: 0;
border-radius: 3%;
padding: 10px;
}
input::placeholder {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
}
<header>
<nav>
<ul class="navigation">
<li class="navigation__left">
<a href="https://github.com">
<img src="github.png" alt="logo">
</a>
</li>
<li class="navigation__left">
Why Github?
<ul class="navigation__left__dropdown">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</li>
<li class="navigation__left">
Enterprise
</li>
<li class="navigation__left">
Explore
<ul class="navigation__left__dropdown">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</li>
<li class="navigation__left">
Marketplace
</li>
<li class="navigation__left">
Pricing
<ul class="navigation__left__dropdown">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</li>
<li class="navigation__right">
<input type="text" placeholder="Search GitHub">
</li>
<li class="navigation__right">
Sign In
</li>
<li class="navigation__right">
Sign Up
</li>
</ul>
</nav>
</header>
JSFIDDDLE
Flexbox ignores floats.
Instead, use margin to separate the left navigation items from the right navigation items.
A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left.
Auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works.
Using auto margins for main axis alignment
Consider using the adjacent sibling combinator to target the first navigation__right element that follows a navigation__left element, and setting margin-left:auto.
.navigation__left + .navigation__right {
margin-left: auto;
}
Demonstration:
html {
box-sizing: border-box
}
*,
*:before,
*:after {
box-sizing: inherit;
padding: 0;
margin: 0;
list-style-type: none;
}
body {
font: 16px;
line-height: 1.5;
background-color: black;
}
a {
text-decoration: none;
color: inherit;
}
.navigation {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
background-color: black;
}
.navigation__left {
border: 2px solid red;
}
.navigation__left,
.navigation__right {
cursor: pointer;
color: white;
padding: 1rem;
}
.navigation__right {
border: 2px solid blue;
}
.navigation__left+.navigation__right {
margin-left: auto;
}
.navigation__left img {
height: 4vh;
}
.navigation__left__dropdown {
position: absolute;
margin-top: 1rem;
display: none;
color: black;
background-color: white;
padding: 20px;
border-radius: 3%;
}
.navigation__left:hover {
color: gray;
}
.navigation__left:nth-child(even):hover .navigation__left__dropdown {
display: block;
}
.navigation__right:last-child a {
border: 1px solid white;
padding: 0.5vw 1vw 0.5vw 1vw;
border-radius: 3%;
}
input {
height: 3vh;
width: 15vw;
background-color: gray;
border: 0;
border-radius: 3%;
padding: 10px;
}
input::placeholder {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
}
<header>
<nav>
<ul class="navigation">
<li class="navigation__left">
<a href="https://github.com">
<img src="github.png" alt="logo">
</a>
</li>
<li class="navigation__left">
Why Github?
<ul class="navigation__left__dropdown">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</li>
<li class="navigation__left">
Enterprise
</li>
<li class="navigation__left">
Explore
<ul class="navigation__left__dropdown">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</li>
<li class="navigation__left">
Marketplace
</li>
<li class="navigation__left">
Pricing
<ul class="navigation__left__dropdown">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</li>
<li class="navigation__right">
<input type="text" placeholder="Search GitHub">
</li>
<li class="navigation__right">
Sign In
</li>
<li class="navigation__right">
Sign Up
</li>
</ul>
</nav>
</header>
Incidentally, the Github navigation you referenced has a somewhat more complex structure and uses nested flexboxes.
In this case dont use Flex.
html {
box-sizing: border-box
}
*,
*:before,
*:after {
box-sizing: inherit;
padding: 0;
margin: 0;
list-style-type: none;
}
body {
font: 16px;
line-height: 1.5;
background-color: black;
}
a {
text-decoration: none;
color: inherit;
}
.navigation {
width: 100%;
background-color: black;
}
.navigation__left {
border: 2px solid red;
float: left;
}
.navigation__right {
border: 2px solid blue;
float: right;
}
.navigation__left,
.navigation__right {
cursor: pointer;
color: white;
padding: 1rem;
}
.navigation__left img {
height: 4vh;
}
.navigation__left__dropdown {
position: absolute;
margin-top: 1rem;
display: none;
color: black;
background-color: white;
padding: 20px;
border-radius: 3%;
}
.navigation__left:hover {
color: gray;
}
.navigation__left:nth-child(even):hover .navigation__left__dropdown {
display: block;
}
.navigation__right:last-child a {
border: 1px solid white;
padding: 0.5vw 1vw 0.5vw 1vw;
border-radius: 3%;
}
input {
height: 3vh;
width: 15vw;
background-color: gray;
border: 0;
border-radius: 3%;
padding: 10px;
}
input::placeholder {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
}
<header>
<nav>
<ul class="navigation">
<li class="navigation__left">
<a href="https://github.com">
<img src="github.png" alt="logo">
</a>
</li>
<li class="navigation__left">
Why Github?
<ul class="navigation__left__dropdown">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</li>
<li class="navigation__left">
Enterprise
</li>
<li class="navigation__left">
Explore
<ul class="navigation__left__dropdown">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</li>
<li class="navigation__left">
Marketplace
</li>
<li class="navigation__left">
Pricing
<ul class="navigation__left__dropdown">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</li>
<li class="navigation__right">
<input type="text" placeholder="Search GitHub">
</li>
<li class="navigation__right">
Sign In
</li>
<li class="navigation__right">
Sign Up
</li>
</ul>
</nav>
</header>
You can set display:flex to inline-block
html {
box-sizing: border-box
}
*,
*:before,
*:after {
box-sizing: inherit;
padding: 0;
margin: 0;
list-style-type: none;
}
body {
font: 16px;
line-height: 1.5;
background-color: black;
}
a {
text-decoration: none;
color: inherit;
}
.navigation {
display: inline-block;
flex-direction: row;
align-items: center;
width: 100%;
background-color: black;
}
.navigation__left {
border: 2px solid red;
float: left;
}
.navigation__right {
border: 2px solid blue;
float: right;
}
.navigation__left,
.navigation__right {
cursor: pointer;
color: white;
padding: 1rem;
}
.navigation__left img {
height: 4vh;
}
.navigation__left__dropdown {
position: absolute;
margin-top: 1rem;
display: none;
color: black;
background-color: white;
padding: 20px;
border-radius: 3%;
}
.navigation__left:hover {
color: gray;
}
.navigation__left:nth-child(even):hover .navigation__left__dropdown {
display: block;
}
.navigation__right:last-child a {
border: 1px solid white;
padding: 0.5vw 1vw 0.5vw 1vw;
border-radius: 3%;
}
input {
height: 3vh;
width: 15vw;
background-color: gray;
border: 0;
border-radius: 3%;
padding: 10px;
}
input::placeholder {
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
}
<header>
<nav>
<ul class="navigation">
<li class="navigation__left">
<a href="https://github.com">
<img src="github.png" alt="logo">
</a>
</li>
<li class="navigation__left">
Why Github?
<ul class="navigation__left__dropdown">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</li>
<li class="navigation__left">
Enterprise
</li>
<li class="navigation__left">
Explore
<ul class="navigation__left__dropdown">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</li>
<li class="navigation__left">
Marketplace
</li>
<li class="navigation__left">
Pricing
<ul class="navigation__left__dropdown">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</li>
<li class="navigation__right">
<input type="text" placeholder="Search GitHub">
</li>
<li class="navigation__right">
Sign In
</li>
<li class="navigation__right">
Sign Up
</li>
</ul>
</nav>
</header>
Remove the display:flex property
.navigation {
flex-direction: row;
align-items: center;
width: 100%;
background-color: black;
}
I have two lists sitting side-by-side. In the full code there will be the ability to select one of the list items from the MainList which will show the relevant list items from the SubList. What I would like is for the border-right of the MainList to overlap the border-left of the SubList to make it look like the SubList items are being shown as a result of the selection in the MainList.
ul {
list-style: none;
}
.BigContainer {
border: 2px solid #d50f67;
border-radius: 5px;
margin: 10px 0;
padding: 5px;
overflow: auto;
}
.MainListContainer {
width: 50%;
float: left;
}
.MainListItem {
border-bottom: 1px solid #ddd;
border-right: 1px solid white;
padding: 5px;
z-index: 2;
}
.MainListItem:last-of-type {
border: none;
}
.SubListContainer {
width: 45%;
float: left;
border: 1px solid #ddd;
border-radius: 5px;
}
.SubListItem {
padding: 5px;
z-index: 1;
}
<div class="BigContainer">
<div class="MainListContainer">
<ul class="MainList">
<li class="MainListItem">List Option A</li>
<li class="MainListItem">List Option B</li>
<li class="MainListItem">List Option C</li>
</ul>
</div>
<div class="SubListContainer">
<ul class="SubList">
<li class="SubListItem">Sub-Option 1</li>
<li class="SubListItem">Sub-Option 2</li>
<li class="SubListItem">Sub-Option 3</li>
<li class="SubListItem">Sub-Option 4</li>
<li class="SubListItem">Sub-Option 5</li>
</ul>
</div>
</div>
So, the border-right of the MainList would be white/transparent to basically erase a portion of the SubList border. I appreciate that, at the moment, making this happen would remove more of the SubList border than desired, but I will code the selection process properly to ensure only the selected item has the relevant border styling applied.
Add selected class to the selected item, then add
.selected:after{
content:"";
position: absolute;
right:-2px;
top:0;
width: 1px;
height: 100%;
background-color: white;
}
This will be placed right where you want it to. Note that MainListItem needs to have a position: relative; for the position to work.
.selected:after{
content:"";
position: absolute;
right:-2px;
top:0;
width: 1px;
height: 100%;
background-color: white;
}
ul {
list-style: none;
}
.BigContainer {
border: 2px solid #d50f67;
border-radius: 5px;
margin: 10px 0;
padding: 5px;
overflow: auto;
}
.MainListContainer {
width: 50%;
float: left;
}
.MainListItem {
border-bottom: 1px solid #ddd;
border-right: 1px solid white;
padding: 5px;
z-index: 2;
position: relative;
}
.MainListItem:last-of-type {
border: none;
}
.SubListContainer {
width: 45%;
float: left;
border: 1px solid #ddd;
border-radius: 5px;
}
.SubListItem {
padding: 5px;
z-index: 1;
}
<div class="BigContainer">
<div class="MainListContainer">
<ul class="MainList">
<li class="MainListItem">List Option A</li>
<li class="MainListItem selected">List Option B</li>
<li class="MainListItem">List Option C</li>
</ul>
</div>
<div class="SubListContainer">
<ul class="SubList">
<li class="SubListItem">Sub-Option 1</li>
<li class="SubListItem">Sub-Option 2</li>
<li class="SubListItem">Sub-Option 3</li>
<li class="SubListItem">Sub-Option 4</li>
<li class="SubListItem">Sub-Option 5</li>
</ul>
</div>
</div>
I want to build a cascade menu where at a certain <li> a new menu is opened. Here is the HTML code:
<div className='ux-dropdown-menu-container'>
<ul className='ux-dropdown-menu'>
<li className='ux-dropdown-menu-item'><a href='#'>Menu Item 1</a></li>
<li className='ux-dropdown-menu-item'><a href='#'>Menu Item 2</a></li>
<li className='ux-dropdown-menu-item'><a href='#'>Submenu</a></li>
<li className='ux-dropdown-menu-item'>
<div className='ux-dropdown-menu-container'>
<ul className='ux-dropdown-menu'>
<li className='ux-dropdown-menu-item'><a href='#'>SubMenu Item 1</a></li>
<li className='ux-dropdown-menu-item'><a href='#'>SubMenu Item 2</a></li>
<li className='ux-dropdown-menu-item'><a href='#'>SubMenu Item 3</a></li>
<li className='ux-dropdown-menu-item'>
</li>
</ul>
</div>
</li>
<li className='ux-dropdown-menu-item'><a href='#'>Menu Item 3</a></li>
</ul>
</div>
And my CSS classes:
.ux-dropdown-menu-container {
position: absolute;
display: block;
background-color: $ux-color-boxed-background;
border: solid;
border-color: $ux-color-border;
border-width: 1px;
border-radius: 4px;
box-shadow: 0px 2px 2px 0px $ux-color-border;
top: 105%;
text-align: left;
min-width: 100px;
}
.ux-dropdown-menu {
margin: 0px 0px 0px 0px;
list-style-type: none;
padding: 5px 5px 5px 5px; // top right botton left
z-index: 1;
}
.ux-dropdown-menu-item
{
white-space: nowrap;
position: relative;
}
.ux-dropdown-menu-item a {
display: inline-block;
text-decoration: none;
padding: 5px 5px 5px 5px;
color: $ux-color-text;
}
.ux-dropdown-menu-item:hover {
background-color: $ux-color-hover;
}
.ux-dropdown-menu-item:active {
background-color: $ux-color-click-background;
}
Even having a position: relative at my <li>, the new <div> for the submenu is not positioning there. Here is the result:
I expected the submenu to appear right at the side of the Submenu item.
I am now looking to:
(A) position the submenu right next to the Submenu item
(B) consider right or left opening, in case the menu is composed and the right side of the screen, where it then needs to open the menu to the left. I do not plan to use jQuery
body{
margin: 0; padding: 0;
}
.ux-dropdown-menu-container {
float: left;
}
.ux-dropdown-menu-containerItem {
position: absolute;
display: none;
background-color: $ux-color-boxed-background;
border: solid;
border-color: $ux-color-border;
border-width: 1px;
border-radius: 4px;
box-shadow: 0px 2px 2px 0px $ux-color-border;
top: 0;
text-align: left;
min-width: 100px;
left: 100%;
}
.ux-dropdown-menu-item:hover .ux-dropdown-menu-containerItem {
display: block;
}
.ux-dropdown-menu {
margin: 0px 0px 0px 0px;
list-style-type: none;
padding: 5px 5px 5px 5px; // top right botton left
z-index: 1;
}
.ux-dropdown-menu-item
{
white-space: nowrap;
position: relative;
border: 1px solid #ccc;
list-style: none;
}
.ux-dropdown-menu-item a {
display: inline-block;
text-decoration: none;
padding: 5px 5px 5px 5px;
color: $ux-color-text;
}
.ux-dropdown-menu-item:hover {
background-color: $ux-color-hover;
}
.ux-dropdown-menu-item:active {
background-color: $ux-color-click-background;
}
<div class="ux-dropdown-menu-container">
<ul class="ux-dropdown-menu">
<li class="ux-dropdown-menu-item">Menu Item 1</li>
<li class="ux-dropdown-menu-item">Menu Item 2</li>
<li class="ux-dropdown-menu-item">
Submenu
<div class="ux-dropdown-menu-containerItem">
<ul class="ux-dropdown-menu">
<li class="ux-dropdown-menu-item">SubMenu Item 1</li>
<li class="ux-dropdown-menu-item">SubMenu Item 2</li>
<li class="ux-dropdown-menu-item">SubMenu Item 3</li>
</ul>
</div>
</li>
<li class="ux-dropdown-menu-item">Menu Item 3</li>
</ul>
</div>
I have the following code:
.menu{
border: solid red;
border-width: 1px 1px 0px 1px;
background-color:black;
color:white;
width: 60px;
}
.dropdown{
position:absolute;
background-color: grey;
width:100px;
}
.dropdown ul{
list-style:none;
padding:10px;
margin: 0;
}
.zoom{
zoom:300%;
}
<div class="menu zoom">
Click me
<div class="dropdown">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
How can I place my dropdown menu to the same x position as the parent, without removing the border? I already tried 'box-sizing: border-box', but somehow it doesn't work.
Set position: relative on parent element and on child set position left to same negative value as left border width of parent element.
.menu {
border: solid red;
border-width: 1px 1px 0px 1px;
background-color: black;
color: white;
width: 60px;
position: relative;
}
.dropdown {
position: absolute;
background-color: grey;
width: 100px;
left: -1px;
}
.dropdown ul {
list-style: none;
padding: 10px;
margin: 0;
}
.zoom {
zoom: 300%;
}
<div class="menu zoom">
Click me
<div class="dropdown">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
Keeping the parent as positon:relative and giving the child position:absolte with top:100%; and left:-1px ( where -1 is taken because the width of border is 1 from left)
Here is the working snippet:
.menu {
border: solid red;
border-width: 1px 1px 0px 1px;
background-color: black;
color: white;
width: 60px;
position: relative;
}
.dropdown {
position: absolute;
background-color: grey;
width: 100px;
left: -1px;
top:100%
}
.dropdown ul {
list-style: none;
padding: 10px;
margin: 0;
}
.zoom {
zoom: 300%;
}
<div class="menu zoom">
Click me
<div class="dropdown">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
I'm working on a step indicator which I implemented as a list:
<ol>
<li>Step 1</li>
<li class="active">Step 2</li>
<li>Step 3</li>
</ol>
Each list element has a rounded edge to it's right in order to indicate progress, so I have the following CSS:
li{
display: block; background-color: white; width: 33%; border: 1px solid #ddd; text-indent: 40px;
float: left;
margin: 0 0 0 -20px;
border-radius: 0 15px 15px 0;
}
My problem is that later elements are shadowing the earlier, thus the rounded edge are hidden. I've tried to set a decreasing z-index for each element, but it doesn't work (besides I couldn't use this solution anyway). I acheive the desired presentation by changing to float:right but that renders the list items in descending order...
Check this jsfiddle for details: http://jsfiddle.net/fMRbr/
You can use the :before
li{
display: inline-block;
width: 33%;
margin: 0 0 0 -20px;
border: 1px solid #ddd;
border-radius: 0 15px 15px 0;
background-color: white;
text-indent: 40px;
position: relative;
}
li.active{
background-color: red;
}
li:before{
content: '';
width: 15px;
height: 19px;
display: inline-block;
background: #fff;
border: 1px solid #ddd;
border-width: 0 1px 1px 0;
border-radius: 0 15px 15px 0;
position: absolute;
top: 0;
left: -3px;
}
li.afteractive:before {
content: '';
width: 15px;
height: 19px;
display: inline-block;
background: #f00;
border: 0;
border-radius: 0 15px 15px 0;
position: absolute;
top: 0;
left: -3px;
}
<ol>
<li class="active">Step 1</li>
<li class="afteractive">Step 2</li>
<li>Step 3</li>
</ol>
<br /><br />
<ol>
<li>Step 1</li>
<li class="active">Step 2</li>
<li class="afteractive">Step 3</li>
</ol>
<br /><br />
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li class="active">Step 3</li>
</ol>
Instead of using border-radius and negative margin values, have you considered a Tbackground image at the top right of each <li> which looks like this:
The active (red) <li> would have a similar background but colored red. The result should look something like this:
Add a span tag to your li's with display: inline-block so they automatically grow to the right width:
html
<ol>
<li><span>Step 1</span></li>
<li class="active"><span>Step 2</span></li>
<li><span>Step 3</span></li>
</ol>
css
li {
display: block;
float: left;
width: 33%;
margin: 0 0 0 -20px;
background-color: white;
text-indent: 40px;
}
li.active {
}
li.active span {
background-color: red;
}
li span {
display: inline-block;
border: 1px solid #ddd;
border-radius: 0 15px 15px 0;
padding-right: 10px;
}
See a jsfiddle of this solution here:
http://jsfiddle.net/c4urself/HYQSJ/