6 replies [Last post]
kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 13 weeks 2 days ago
Timezone: GMT+12
Joined: 2009-03-07
Posts: 66
Points: 104

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?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 39 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

What have you got so far?

Also, be more specific about how the bottom line is supposed to appear.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 13 weeks 2 days ago
Timezone: GMT+12
Joined: 2009-03-07
Posts: 66
Points: 104

This is what I'm after and

photo.JPG

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;
}

surajnaikin
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 5 years 31 weeks ago
india
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

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
surajnaikin
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 5 years 31 weeks ago
india
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

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 }

kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 13 weeks 2 days ago
Timezone: GMT+12
Joined: 2009-03-07
Posts: 66
Points: 104

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?

surajnaikin
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 5 years 31 weeks ago
india
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

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