I'm working on a page with lots of content and I want to make several pages,but insted of links with number I want to do something like this : Is this posible throught CSS ? If not could you please tell me how ..
This should give you an idea of how it works. <html> <head> <style type="text/css"> span.previous, span.next{ padding: 4px; margin: 5px; color: #000; border: 1px solid #000; background: #8DD8D8; } span.current{ padding: 4px; margin: 5px; color: #000; border: 1px solid #000; background: #FFA200; } </style> </head> <body> <span class="previous">26</span><span class="current">27</span><span class="next">28</span> </body> </html> Code (markup):
Thanks but I have one more question , to make a link from the button I wrote this : " <span class="previous"><a href="#">26</a></span> and the number turned to blue,but I want it to stay black..what should I add to accomplish that ?
Try this, it should work just right: <html> <head> <style type="text/css"> span.previous, span.next{ padding: 4px; margin: 5px; color: #000; border: 1px solid #000; background: #8DD8D8; } span.current{ padding: 4px; margin: 5px; color: #000; border: 1px solid #000; background: #FFA200; } a.pagination{ color: #000; text-decoration: none; padding: 0px; margin: 0px; } </style> </head> <body> <span class="previous"><a href="#" class="pagination">26</a></span> <span class="current"><a href="#" class="pagination">27</a></span> <span class="next"><a href="#" class="pagination">28</a></span> </body> </html> Code (markup):