I was going to have my 6 steps in a process breadcrump, i was also going to use a UL LI to create this (horizontal). I was also going to use border-bottom: solit 2px #CECECE; to create an used path.
How can I make the border bottom blue and only half way across my LI item?
What have you got so far?
Also, be more specific about how the bottom line is supposed to appear.
cheers,
gary
This is what I'm after and
This is what I'm after and below is what I have but the current border bottom will be the fill length
<ul> <li class="current">Home</li> <li>Step 1</li> <li>Step 2</li> </ul>
li{ float: left; display-style: none; border-bottom: solid 2px #CECECE; } .current{ float: left; display-style: none; border-bottom: solid 2px #444; }
here is the code workout
Dear Kiwi,
It was a fun doing this workout. Here is the Progress Bar Tabs Live Example.
HTML code
<ul class="reset maketabs progress"> <li class="item"><a href="#">Search</a></li> <li class="item"><a href="#">Create Itineary</a></li> <li class="item active"><a href="#">Traveller Details</a></li> <li class="item"><a href="#">Seat Select</a></li> <li class="item"><a href="#">Purchase Tickets</a></li> <li class="item"><a href="#">Booking Confirm</a></li> </ul>
CSS Code
.maketabs .item { float: left; display: inline } .maketabs .item a { display: block; float: left } .progress { float: left; width: 100%; overflow: hidden; padding-bottom: 5px } .progress a { padding: 10px 20px } .progress .item { position: relative; border-bottom: 2px solid #CCC } .progress .active:before { border-bottom: 2px solid #36F; display: block; content: ""; width: 1000px; right: 0; top: 35px; position: absolute; z-index: 2; margin-right: 50% } .progress .active:after { display: block; content: ""; height: 10px; width: 10px; background: #36F; border-radius: 10px; position: absolute; left: 50%; top: 30px }
Elements used:
1. Normal CSS
2. Pseudo Elements
Note:
Just swap the active class.
Browser Support:
- FF
- Chrome
- IE 8 +
- Safari
- Opera
made some changes
.progress { float: left; width: 100%; overflow: hidden; padding-bottom: 5px } .progress a { padding: 10px 20px; color:#979797; font-weight:bold } .progress a:visited {color:#3386a8} .progress .active a {color:black} .progress .item { position: relative; border-bottom: 2px solid #d7d7d7 } .progress .active:before { border-bottom: 2px solid #3386a8; display: block; content: ""; width: 1000px; right: 0; top: 35px; position: absolute; z-index: 2; margin-right: 50% } .progress .active:after { display: block; content: ""; height: 10px; width: 10px; background:#3386a8; border-radius: 10px; position: absolute; left: 50%; top: 30px }
Wow, what I can't work out is
Wow, what I can't work out is what part makes the dot in the active tab?
pseudo element & content CSS property
The 'content' property generates a blank space or a object, which is positioned in that particular spot. read more about content property here
http://www.w3schools.com/cssref/pr_gen_content.asp
Read the detailed tutorial for this here Progress bar tabs