[eluser]elaniobro[/eluser]
I got my pagination set up and styled. This is great so far, and plan to make it ajax (no page refresh).
However, after styling and such, I noticed that the right side of the pagination has extra space. While I know I can correct this with a margin-right:-#; I'd rather not use negative integers in my CSS.
Please see my code below to help shed some light:
Controller:
Code:
function index()
{
$this->load->library('pagination');
//LIVE
#$config['base_url'] = 'http://www.example.com/5/index.php/thoughts/index';
//LOCAL
$config['base_url'] = 'http://localhost:8888/www.example.com/com/5/index.php/thoughts/index';
$config['total_rows'] = $this->db->get('thoughts')->num_rows();
$config['per_page'] = 3;
$config['num_links'] = 5;
$config['full_tag_open']= '<div class="pagination">';
$config['full_tag_close']= '</div>';
$config['prev_tag_open'] = '<div class="pagination-left">';
$config['prev_tag_close'] = '</div>';
$config['prev_link'] = '';
$config['next_tag_open'] = '<div class="pagination-right">';
$config['next_tag_close'] = '</div>';
$config['next_link'] = '';
$config['cur_tag_open'] = '<strong class="pagination-current">';
$config['cur_tag_closed'] = '</strong>';
$this->pagination->initialize($config);
$data['records'] = $this->db->order_by('id DESC')->get('thoughts', $config['per_page'], $this->uri->segment(3));
$data['title'] = 'example | Thoughts';
$data['page'] = 'thoughts';
$data['query'] = $this->db->order_by('id DESC')->get('thoughts');
$this->load->view('header', $data);
$this->load->view('campaign');
$this->load->view('thoughts_view', $data);
$this->load->view('footer');
}
CSS:
Code:
/*
PAGINATION
*/
.pagination
{
border:1px solid #f09;
font-size:11px;
text-align:center;
float:right;
right:0px;
width:auto;
position:relative;
}
.pagination a, .pagination-left, .pagination-right, .pagination-current
{
float:left;
height:15px;
width:15px;
text-decoration:none;
border:1px solid #0f0;
}
.pagination a, .pagination-current
{
line-height:16px;
}
.pagination a:link, a:visited
{
background:#444;
color:#fff;
}
.pagination a:hover, .pagination-current
{
background:#fff;
color:#444;
}
.pagination-right a:link,.pagination-right a:visited
{
background-image:url('../../img/pagination/pagination_right_a.gif');
}
.pagination-right a:hover
{
background-image:url('../../img/pagination/pagination_right_b.gif');
}
.pagination-left a:link,.pagination-left a:visited
{
background-image:url('../../img/pagination/pagination_left_a.gif');
}
.pagination-left a:hover
{
background-image:url('../../img/pagination/pagination_left_b.gif');
}
and a screen shot of what is going on (I threw borders so you can see the spacing issue):
