CODEWITHSUNDEEP
css
John Smith
John Smith

Reputation: 99

Pagination CSS elements not in line

My photos left.png, leftdisabled.png, right.png, rightdisabled.png is 55 x 33 and doesn't look the way I want,

It looks something like this:

- _ _ -

ex: " - " = photos; " _ " = the texts page1 page2, etc

and I want to look in line like:

- - - -

I tried in different ways to change the values from CSS but doesn't work, what can I do?

My current CSS

div.pagination a.prev {  border: 0 none; }
div.pagination a:hover.prev {  background: none; border: 0 none; }


div.pagination a.next { border: 0 none; }
div.pagination a:hover.next { background: none; border: 0 none; }


div.pagination { margin: 20px; padding: 3px; text-align: center; font-size: 12px; color: #333;  }
div.pagination a { margin: 2px; padding: 2px 5px 2px 5px; text-decoration: none; border: 1px solid #11540C; color: #11540C;  }
div.pagination a:hover, div.pagination a:active { background: #11540C; border: 1px solid #11540C; color: #fff; }
div.pagination span.current { background: #11540C; margin: 2px; padding: 2px 5px 2px 5px; border: 1px solid #11540C; color: #fff; font-weight:bold; }
div.pagination span.disabled { margin: 2px; padding: 2px 5px 2px 5px; }

And a JSFiddle:

http://fiddle.jshell.net/nG9FV/

Upvotes: 0

Views: 235

Answers (1)

Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

HTML

<div id="pagination" class="pagination">    
    <span class="disabled">
        <img src="http://a.dryicons.com/images/icon_sets/symbolize_icons_set/png/128x128/arrow_left.png" class="numer" />
    </span>
    <span ><a title="Pag 1" id="current"  class="numer" href="?pg=1">1</a></span>
    <span><a title=" Pag 2" class="numer" href="?pg=2">2</a></span>
    <span><a class="next" title="Inainte" href="?pg=2"><img src="http://b.dryicons.com/images/icon_sets/stickers_icon_set/png/128x128/right_arrow.png" class="numer"/></a>
    </span>

</div>

CSS

div.pagination a.prev {
    border: 0 none;
}
div.pagination a:hover.prev {
    background: none;
    border: 0 none;
}
div.pagination a.next {
    border: 0 none;
}
div.pagination a:hover.next {
    background: none;
    border: 0 none;
}
div.pagination {
    margin: 20px;
    padding: 3px;
    text-align: center;
    font-size: 12px;
    color: #333;
}
div.pagination a {
    margin: 2px;
    padding: 2px 5px 2px 5px;
    text-decoration: none;
    border: 1px solid #11540C;
    color: #11540C;
}
div.pagination a:hover, div.pagination a:active {
    background: #11540C;
    border: 1px solid #11540C;
    color: #fff;
}
div.pagination span #current {
    background: #11540C;
    margin: 2px;
    padding: 2px 5px 2px 5px;
    border: 1px solid #11540C;
    color: #fff;
    font-weight:bold;
}
div.pagination span.disabled {
    margin: 2px;
    padding: 2px 5px 2px 5px;
}

span
{
    display:inline-block;
    float:left;
    text-align:center;
}
span .numer
{
    width:90px;
    height:90px;
    font-size:44pt;
}
span .numer img
{
    width:90px;
    height:90px;
    border:1px red solid;
}

Updated Fiddle of your's..!!

Upvotes: 1

Related Questions