Fri, 2013-07-05 07:18
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?
Fri, 2013-07-05 13:45
#1
What have you got so far?
Also, be more specific about how the bottom line is supposed to appear.
cheers,
gary
Fri, 2013-07-05 20:14
#2
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; }
Sat, 2013-07-06 05:45
#3
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
Sat, 2013-07-06 06:01
#4
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 }
Sat, 2013-07-06 20:50
#5
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?
Sun, 2013-07-07 06:29
#6
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