Account Creation Improvement Project/Testing content/HTML code for progress-bar (1)
Jump to navigation
Jump to search
Preview[edit]
Code[edit]
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style> #signuptopbox li{ float:left; list-style:none; font-family:sans-serif; } #signuptopbox li{ color:#3ca7d4; background:#c2e1f9; line-height:2.8em; margin-right:.25em; padding-right:.5em; } #signuptopbox li.pr-active, #signuptopbox li.pr-active div{ color:#67ca36; background:#d4f9c2; border-color:#fff #fff #fff #67ca36; } #signuptopbox li div{ width:0; height:0; border-color:#fff #fff #fff #3CA7D4; border-style:solid; border-width:1.4em .3em 1.4em 1.4em; float:left; } #signuptopbox li span.pr-number{ display:block; width: 1.8em; line-height: 1.8em; background:#3ca7d4; color:#c2e1f9; text-align:center; margin:.5em; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; border-radius:50%; font-weight:600; float:left; } #signuptopbox li.pr-active span.pr-number{ background:#67ca36; color:#d4f9c2; } #signuptopbox li span{float:left;} #signuptopbox li.pr-spacer{padding:0} </style> </head> <body> <ul id="signuptopbox"> <li class="s1 pr-active"><span class="pr-number">1</span><span>This is the first step</span></li> <li class="pr-spacer pr-active"><div/></li> <li class="s2"><span class="pr-number">2</span><span>This is the second step</span></li> <li class="pr-spacer"><div/></li> <li class="s3"><span class="pr-number">3</span><span>This is the final step</span></li> <li class="pr-spacer"><div/></li> </ul> </body> </html>
CSS (to common.css)[edit]
#signuptopbox li{ float:left; list-style:none; font-family:sans-serif; } #signuptopbox li{ color:#3ca7d4; background:#c2e1f9; line-height:2.8em; margin-right:.25em; padding-right:.5em; } #signuptopbox li.pr-active, #signuptopbox li.pr-active div{ color:#67ca36; background:#d4f9c2; border-color:#fff #fff #fff #67ca36; } #signuptopbox li div{ width:0; height:0; border-color:#fff #fff #fff #3CA7D4; border-style:solid; border-width:1.4em .3em 1.4em 1.4em; float:left; } #signuptopbox li span.pr-number{ display:block; width: 1.8em; line-height: 1.8em; background:#3ca7d4; color:#c2e1f9; text-align:center; margin:.5em; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; border-radius:50%; font-weight:600; float:left; } #signuptopbox li.pr-active span.pr-number{ background:#67ca36; color:#d4f9c2; } #signuptopbox li span{float:left;} #signuptopbox li.pr-spacer{padding:0}
HTML (to wikicode)[edit]
<ul id="signuptopbox"> <li class="s1 pr-active"><span class="pr-number">1</span><span>This is the first step</span></li> <li class="pr-spacer pr-active"><div/></li> <li class="s2"><span class="pr-number">2</span><span>This is the second step</span></li> <li class="pr-spacer"><div/></li> <li class="s3"><span class="pr-number">3</span><span>This is the final step</span></li> <li class="pr-spacer"><div/></li> </ul>