Created
May 4, 2011 20:59
-
-
Save fling/956023 to your computer and use it in GitHub Desktop.
Page Control CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <meta name="viewport" content="width=724, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black" /> | |
| <title>Page Control</title> | |
| <style> | |
| .indicator { | |
| width: 100%; | |
| text-align: center; | |
| position: relative; | |
| top: 0; | |
| } | |
| .indicator > span { | |
| text-indent:-9999em; | |
| width: 4px; height: 4px; | |
| -webkit-border-radius:4px; | |
| background: #b2b4b4; | |
| overflow:hidden; | |
| margin-right: 16px; | |
| display: none; | |
| } | |
| .indicator > span.active { | |
| background: #757676; | |
| } | |
| .indicator > span:last-child { | |
| margin:0; | |
| } | |
| .pg1 #id1, | |
| .pg2 #id1, | |
| .pg2 #id2, | |
| .pg3 #id1, | |
| .pg3 #id2, | |
| .pg3 #id3, | |
| .pg4 #id1, | |
| .pg4 #id2, | |
| .pg4 #id3, | |
| .pg4 #id4, | |
| .pg5 #id1, | |
| .pg5 #id2, | |
| .pg5 #id3, | |
| .pg5 #id4, | |
| .pg5 #id5, | |
| .pg6 #id1, | |
| .pg6 #id2, | |
| .pg6 #id3, | |
| .pg6 #id4, | |
| .pg6 #id5, | |
| .pg6 #id6, | |
| .pg7 #id1, | |
| .pg7 #id2, | |
| .pg7 #id3, | |
| .pg7 #id4, | |
| .pg7 #id5, | |
| .pg7 #id6, | |
| .pg7 #id7, | |
| .pg8 #id1, | |
| .pg8 #id2, | |
| .pg8 #id3, | |
| .pg8 #id4, | |
| .pg8 #id5, | |
| .pg8 #id6, | |
| .pg8 #id7, | |
| .pg8 #id8, | |
| .pg9 #id1, | |
| .pg9 #id2, | |
| .pg9 #id3, | |
| .pg9 #id4, | |
| .pg9 #id5, | |
| .pg9 #id6, | |
| .pg9 #id7, | |
| .pg9 #id8, | |
| .pg9 #id9, | |
| .pg10 #id1, | |
| .pg10 #id2, | |
| .pg10 #id3, | |
| .pg10 #id4, | |
| .pg10 #id5, | |
| .pg10 #id6, | |
| .pg10 #id7, | |
| .pg10 #id8, | |
| .pg10 #id9, | |
| .pg10 #id10, | |
| .pg11 #id1, | |
| .pg11 #id2, | |
| .pg11 #id3, | |
| .pg11 #id4, | |
| .pg11 #id5, | |
| .pg11 #id6, | |
| .pg11 #id7, | |
| .pg11 #id8, | |
| .pg11 #id9, | |
| .pg11 #id10, | |
| .pg11 #id11, | |
| .pg12 #id1, | |
| .pg12 #id2, | |
| .pg12 #id3, | |
| .pg12 #id4, | |
| .pg12 #id5, | |
| .pg12 #id6, | |
| .pg12 #id7, | |
| .pg12 #id8, | |
| .pg12 #id9, | |
| .pg12 #id10, | |
| .pg12 #id11, | |
| .pg12 #id12, | |
| .pg13 #id1, | |
| .pg13 #id2, | |
| .pg13 #id3, | |
| .pg13 #id4, | |
| .pg13 #id5, | |
| .pg13 #id6, | |
| .pg13 #id7, | |
| .pg13 #id8, | |
| .pg13 #id9, | |
| .pg13 #id10, | |
| .pg13 #id11, | |
| .pg13 #id12, | |
| .pg13 #id13, | |
| .pg14 #id1, | |
| .pg14 #id2, | |
| .pg14 #id3, | |
| .pg14 #id4, | |
| .pg14 #id5, | |
| .pg14 #id6, | |
| .pg14 #id7, | |
| .pg14 #id8, | |
| .pg14 #id9, | |
| .pg14 #id10, | |
| .pg14 #id11, | |
| .pg14 #id12, | |
| .pg14 #id13, | |
| .pg14 #id14, | |
| .pg15 #id1, | |
| .pg15 #id2, | |
| .pg15 #id3, | |
| .pg15 #id4, | |
| .pg15 #id5, | |
| .pg15 #id6, | |
| .pg15 #id7, | |
| .pg15 #id8, | |
| .pg15 #id9, | |
| .pg15 #id10, | |
| .pg15 #id11, | |
| .pg15 #id12, | |
| .pg15 #id13, | |
| .pg15 #id14, | |
| .pg15 #id15, | |
| .pg16 #id1, | |
| .pg16 #id2, | |
| .pg16 #id3, | |
| .pg16 #id4, | |
| .pg16 #id5, | |
| .pg16 #id6, | |
| .pg16 #id7, | |
| .pg16 #id8, | |
| .pg16 #id9, | |
| .pg16 #id10, | |
| .pg16 #id11, | |
| .pg16 #id12, | |
| .pg16 #id13, | |
| .pg16 #id14, | |
| .pg16 #id15, | |
| .pg16 #id16, | |
| .pg17 #id1, | |
| .pg17 #id2, | |
| .pg17 #id3, | |
| .pg17 #id4, | |
| .pg17 #id5, | |
| .pg17 #id6, | |
| .pg17 #id7, | |
| .pg17 #id8, | |
| .pg17 #id9, | |
| .pg17 #id10, | |
| .pg17 #id11, | |
| .pg17 #id12, | |
| .pg17 #id13, | |
| .pg17 #id14, | |
| .pg17 #id15, | |
| .pg17 #id16, | |
| .pg17 #id17, | |
| .pg18 #id1, | |
| .pg18 #id2, | |
| .pg18 #id3, | |
| .pg18 #id4, | |
| .pg18 #id5, | |
| .pg18 #id6, | |
| .pg18 #id7, | |
| .pg18 #id8, | |
| .pg18 #id9, | |
| .pg18 #id10, | |
| .pg18 #id11, | |
| .pg18 #id12, | |
| .pg18 #id13, | |
| .pg18 #id14, | |
| .pg18 #id15, | |
| .pg18 #id16, | |
| .pg18 #id17, | |
| .pg18 #id18, | |
| .pg19 #id1, | |
| .pg19 #id2, | |
| .pg19 #id3, | |
| .pg19 #id4, | |
| .pg19 #id5, | |
| .pg19 #id6, | |
| .pg19 #id7, | |
| .pg19 #id8, | |
| .pg19 #id9, | |
| .pg19 #id10, | |
| .pg19 #id11, | |
| .pg19 #id12, | |
| .pg19 #id13, | |
| .pg19 #id14, | |
| .pg19 #id15, | |
| .pg19 #id16, | |
| .pg19 #id17, | |
| .pg19 #id18, | |
| .pg19 #id19, | |
| .pg20 #id1, | |
| .pg20 #id2, | |
| .pg20 #id3, | |
| .pg20 #id4, | |
| .pg20 #id5, | |
| .pg20 #id6, | |
| .pg20 #id7, | |
| .pg20 #id8, | |
| .pg20 #id9, | |
| .pg20 #id10, | |
| .pg20 #id11, | |
| .pg20 #id12, | |
| .pg20 #id13, | |
| .pg20 #id14, | |
| .pg20 #id15, | |
| .pg20 #id16, | |
| .pg20 #id17, | |
| .pg20 #id18, | |
| .pg20 #id19, | |
| .pg20 #id20, | |
| .pg21 #id1, | |
| .pg21 #id2, | |
| .pg21 #id3, | |
| .pg21 #id4, | |
| .pg21 #id5, | |
| .pg21 #id6, | |
| .pg21 #id7, | |
| .pg21 #id8, | |
| .pg21 #id9, | |
| .pg21 #id10, | |
| .pg21 #id11, | |
| .pg21 #id12, | |
| .pg21 #id13, | |
| .pg21 #id14, | |
| .pg21 #id15, | |
| .pg21 #id16, | |
| .pg21 #id17, | |
| .pg21 #id18, | |
| .pg21 #id19, | |
| .pg21 #id20, | |
| .pg21 #id21, | |
| .pg22 #id1, | |
| .pg22 #id2, | |
| .pg22 #id3, | |
| .pg22 #id4, | |
| .pg22 #id5, | |
| .pg22 #id6, | |
| .pg22 #id7, | |
| .pg22 #id8, | |
| .pg22 #id9, | |
| .pg22 #id10, | |
| .pg22 #id11, | |
| .pg22 #id12, | |
| .pg22 #id13, | |
| .pg22 #id14, | |
| .pg22 #id15, | |
| .pg22 #id16, | |
| .pg22 #id17, | |
| .pg22 #id18, | |
| .pg22 #id19, | |
| .pg22 #id20, | |
| .pg22 #id21, | |
| .pg22 #id22, | |
| .pg23 #id1, | |
| .pg23 #id2, | |
| .pg23 #id3, | |
| .pg23 #id4, | |
| .pg23 #id5, | |
| .pg23 #id6, | |
| .pg23 #id7, | |
| .pg23 #id8, | |
| .pg23 #id9, | |
| .pg23 #id10, | |
| .pg23 #id11, | |
| .pg23 #id12, | |
| .pg23 #id13, | |
| .pg23 #id14, | |
| .pg23 #id15, | |
| .pg23 #id16, | |
| .pg23 #id17, | |
| .pg23 #id18, | |
| .pg23 #id19, | |
| .pg23 #id20, | |
| .pg23 #id21, | |
| .pg23 #id22, | |
| .pg23 #id23, | |
| .pg24 #id1, | |
| .pg24 #id2, | |
| .pg24 #id3, | |
| .pg24 #id4, | |
| .pg24 #id5, | |
| .pg24 #id6, | |
| .pg24 #id7, | |
| .pg24 #id8, | |
| .pg24 #id9, | |
| .pg24 #id10, | |
| .pg24 #id11, | |
| .pg24 #id12, | |
| .pg24 #id13, | |
| .pg24 #id14, | |
| .pg24 #id15, | |
| .pg24 #id16, | |
| .pg24 #id17, | |
| .pg24 #id18, | |
| .pg24 #id19, | |
| .pg24 #id20, | |
| .pg24 #id21, | |
| .pg24 #id22, | |
| .pg24 #id23, | |
| .pg24 #id24, | |
| .pg25 #id1, | |
| .pg25 #id2, | |
| .pg25 #id3, | |
| .pg25 #id4, | |
| .pg25 #id5, | |
| .pg25 #id6, | |
| .pg25 #id7, | |
| .pg25 #id8, | |
| .pg25 #id9, | |
| .pg25 #id10, | |
| .pg25 #id11, | |
| .pg25 #id12, | |
| .pg25 #id13, | |
| .pg25 #id14, | |
| .pg25 #id15, | |
| .pg25 #id16, | |
| .pg25 #id17, | |
| .pg25 #id18, | |
| .pg25 #id19, | |
| .pg25 #id20, | |
| .pg25 #id21, | |
| .pg25 #id22, | |
| .pg25 #id23, | |
| .pg25 #id24, | |
| .pg25 #id25, | |
| .pg26 #id1, | |
| .pg26 #id2, | |
| .pg26 #id3, | |
| .pg26 #id4, | |
| .pg26 #id5, | |
| .pg26 #id6, | |
| .pg26 #id7, | |
| .pg26 #id8, | |
| .pg26 #id9, | |
| .pg26 #id10, | |
| .pg26 #id11, | |
| .pg26 #id12, | |
| .pg26 #id13, | |
| .pg26 #id14, | |
| .pg26 #id15, | |
| .pg26 #id16, | |
| .pg26 #id17, | |
| .pg26 #id18, | |
| .pg26 #id19, | |
| .pg26 #id20, | |
| .pg26 #id21, | |
| .pg26 #id22, | |
| .pg26 #id23, | |
| .pg26 #id24, | |
| .pg26 #id25, | |
| .pg26 #id26, | |
| .pg27 #id1, | |
| .pg27 #id2, | |
| .pg27 #id3, | |
| .pg27 #id4, | |
| .pg27 #id5, | |
| .pg27 #id6, | |
| .pg27 #id7, | |
| .pg27 #id8, | |
| .pg27 #id9, | |
| .pg27 #id10, | |
| .pg27 #id11, | |
| .pg27 #id12, | |
| .pg27 #id13, | |
| .pg27 #id14, | |
| .pg27 #id15, | |
| .pg27 #id16, | |
| .pg27 #id17, | |
| .pg27 #id18, | |
| .pg27 #id19, | |
| .pg27 #id20, | |
| .pg27 #id21, | |
| .pg27 #id22, | |
| .pg27 #id23, | |
| .pg27 #id24, | |
| .pg27 #id25, | |
| .pg27 #id26, | |
| .pg27 #id27, | |
| .pg28 #id1, | |
| .pg28 #id2, | |
| .pg28 #id3, | |
| .pg28 #id4, | |
| .pg28 #id5, | |
| .pg28 #id6, | |
| .pg28 #id7, | |
| .pg28 #id8, | |
| .pg28 #id9, | |
| .pg28 #id10, | |
| .pg28 #id11, | |
| .pg28 #id12, | |
| .pg28 #id13, | |
| .pg28 #id14, | |
| .pg28 #id15, | |
| .pg28 #id16, | |
| .pg28 #id17, | |
| .pg28 #id18, | |
| .pg28 #id19, | |
| .pg28 #id20, | |
| .pg28 #id21, | |
| .pg28 #id22, | |
| .pg28 #id23, | |
| .pg28 #id24, | |
| .pg28 #id25, | |
| .pg28 #id26, | |
| .pg28 #id27, | |
| .pg28 #id28, | |
| .pg29 #id1, | |
| .pg29 #id2, | |
| .pg29 #id3, | |
| .pg29 #id4, | |
| .pg29 #id5, | |
| .pg29 #id6, | |
| .pg29 #id7, | |
| .pg29 #id8, | |
| .pg29 #id9, | |
| .pg29 #id10, | |
| .pg29 #id11, | |
| .pg29 #id12, | |
| .pg29 #id13, | |
| .pg29 #id14, | |
| .pg29 #id15, | |
| .pg29 #id16, | |
| .pg29 #id17, | |
| .pg29 #id18, | |
| .pg29 #id19, | |
| .pg29 #id20, | |
| .pg29 #id21, | |
| .pg29 #id22, | |
| .pg29 #id23, | |
| .pg29 #id24, | |
| .pg29 #id25, | |
| .pg29 #id26, | |
| .pg29 #id27, | |
| .pg29 #id28, | |
| .pg29 #id29, | |
| .pg30 #id1, | |
| .pg30 #id2, | |
| .pg30 #id3, | |
| .pg30 #id4, | |
| .pg30 #id5, | |
| .pg30 #id6, | |
| .pg30 #id7, | |
| .pg30 #id8, | |
| .pg30 #id9, | |
| .pg30 #id10, | |
| .pg30 #id11, | |
| .pg30 #id12, | |
| .pg30 #id13, | |
| .pg30 #id14, | |
| .pg30 #id15, | |
| .pg30 #id16, | |
| .pg30 #id17, | |
| .pg30 #id18, | |
| .pg30 #id19, | |
| .pg30 #id20, | |
| .pg30 #id21, | |
| .pg30 #id22, | |
| .pg30 #id23, | |
| .pg30 #id24, | |
| .pg30 #id25, | |
| .pg30 #id26, | |
| .pg30 #id27, | |
| .pg30 #id28, | |
| .pg30 #id29, | |
| .pg30 #id30 | |
| { | |
| display: inline-block; | |
| } | |
| </style> | |
| </head> | |
| <body class="pg12"> | |
| <article> | |
| Content Goes Here... | |
| </article> | |
| <footer> | |
| <div class="indicator"> | |
| <span id="id1" class="active"></span><span id="id2" class=""></span><span id="id3" class=""></span><span id="id4" class=""></span><span id="id5" class=""></span><span id="id6" class=""></span><span id="id7" class=""></span><span id="id8" class=""></span><span id="id9" class=""></span><span id="id10" class=""></span><span id="id11" class=""></span><span id="id12" class=""></span><span id="id13" class=""></span><span id="id14" class=""></span><span id="id15" class=""></span><span id="id16" class=""></span><span id="id17" class=""></span><span id="id18" class=""></span><span id="id19" class=""></span><span id="id20" class=""></span><span id="id21" class=""></span><span id="id22" class=""></span><span id="id23" class=""></span><span id="id24" class=""></span><span id="id25" class=""></span><span id="id26" class=""></span><span id="id27" class=""></span><span id="id28" class=""></span><span id="id29" class=""></span><span id="id30" class=""></span> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Try .indicator span { display: inline-block; }