Help with CSS for a horizontal list

[boxfish]

Tweet

Hi, I'm taking part in the current a4u competition and trying get get my site ready to go but struggling with some css.

You can see the problem on this page: http://www.buywhitegold.co.uk/shop/c/ladies-rings/

The pagination list is going vertical rather than horizontal.

I can usually mess around with code to get it to do what I want but on this occasion can't seem to crack it.

Can someone please give me some guidance, or even better a step - by - step guide on how to get it in a more traditional left to right format.

Thanks
Ian

[jramroop]

Hi,

try adding this to your CSS file:

.pagination a { float: left; }
.pagination span { float: left; }

Let me know if it works

James

[boxfish]

Thanks James, that's nearly there.

The three dots which were between 7...34 now seem to be at the other side of the page though.

(Also I would like it right aligned if possible)

Thanks for your help buddy,
Ian

[jramroop]

Hi,

Change

<div class="pagination">

to

<div id="pagination">

CSS:

#pagination { display: block; text-align: right; }
#pagination a { display: inline; }

I cannot test it so not sure it'll work as you want it.

[boxfish]

Thanks for that, I don't think I can do it though.

There seems to be a module to control the "pagination" class, so it's not as easy as changing it to an id.

Nevermind, it will have to suffice as is for the time being.

Thanks for helping though James

<?php

class DFRPagination{
/*
Script Name: *Digg Style Paginator Class
Script URI: Digg Style Pagination Class
Description: Class in PHP that allows to use a pagination like a digg or sabrosus style.
Script Version: 0.4
Author: Victor De la Rocha
Author URI: Mis Algoritmos
*/
/*Default values*/
var $total_pages = -1;//items
var $limit = null;
var $target = "";
var $page = 1;
var $adjacents = 2;
var $showCounter = false;
var $className = "pagination";
var $parameterName = "page";
var $urlF = false;//urlFriendly

/*Buttons next and previous*/
var $nextT = "Next";
var $nextI = "&#187;"; //►
var $prevT = "Previous";
var $prevI = "&#171;"; //◄

/*****/
var $calculate = false;

#Total items
function items($value){$this->total_pages = (int) $value;}

#how many items to show per page
function limit($value){$this->limit = (int) $value;}

#Page to sent the page value
function target($value){$this->target = $value;}

#Current page
function currentPage($value){$this->page = (int) $value;}

#How many adjacent pages should be shown on each side of the current page?
function adjacents($value){$this->adjacents = (int) $value;}

#show counter?
function showCounter($value=""){$this->showCounter=($value===true)?true:false;}

#to change the class name of the pagination div
function changeClass($value=""){$this->className=$value;}

function nextLabel($value){$this->nextT = $value;}
function nextIcon($value){$this->nextI = $value;}
function prevLabel($value){$this->prevT = $value;}
function prevIcon($value){$this->prevI = $value;}

#to change the class name of the pagination div
function parameterName($value=""){$this->parameterName=$value;}

#to change urlFriendly
function urlFriendly($value="%"){
if(eregi('^ *$',$value)){
$this->urlF=false;
return false;
}
$this->urlF=$value;
}

var $pagination;

function DFRPagination(){}
function show(){
if(!$this->calculate)
if($this->calculate())
echo "<div class=\"$this->className\">$this->pagination</div>\n";
}
function get_pagenum_link($id){
if(strpos($this->target,'?')===false)
if($this->urlF)
return str_replace($this->urlF,$id,$this->target);
else
return "$this->target?$this->parameterName=$id";
else
return "$this->target&$this->parameterName=$id";
}

function calculate(){
$this->pagination = "";
$this->calculate == true;
$error = false;
if($this->urlF and $this->urlF != '%' and strpos($this->target,$this->urlF)===false){
//Es necesario especificar el comodin para sustituir
echo "Especificaste un wildcard para sustituir, pero no existe en el target<br />";
$error = true;
}elseif($this->urlF and $this->urlF == '%' and strpos($this->target,$this->urlF)===false){
echo "Es necesario especificar en el target el comodin % para sustituir el número de página<br />";
$error = true;
}

if($this->total_pages < 0){
echo "It is necessary to specify the <strong>number of pages</strong> (\$class->items(1000))<br />";
$error = true;
}
if($this->limit == null){
echo "It is necessary to specify the <strong>limit of items</strong> to show per page (\$class->limit(10))<br />";
$error = true;
}
if($error)return false;

$n = trim($this->nextT.' '.$this->nextI);
$p = trim($this->prevI.' '.$this->prevT);

/* Setup vars for query. */
if($this->page)
$start = ($this->page - 1) * $this->limit; //first item to display on this page
else
$start = 0; //if no page var is given, set start to 0

/* Setup page vars for display. */
$prev = $this->page - 1; //previous page is page - 1
$next = $this->page + 1; //next page is page + 1
$lastpage = ceil($this->total_pages/$this->limit); //lastpage is = total pages / items per page, rounded up.
$lpm1 = $lastpage - 1; //last page minus 1

/*
Now we apply our rules and draw the pagination object.
We're actually saving the code to a variable in case we want to draw it more than once.
*/

if($lastpage > 1){
if($this->page){
//anterior button
if($this->page > 1)
$this->pagination .= "<a href=\"".$this->get_pagenum_link($prev)."\" class=\"prev\">$p</a>";
else
$this->pagination .= "<span class=\"disabled\">$p</span>";
}
//pages
if ($lastpage < 7 + ($this->adjacents * 2)){//not enough pages to bother breaking it up
for ($counter = 1; $counter <= $lastpage; $counter++){
if ($counter == $this->page)
$this->pagination .= "<span class=\"current\">$counter</span>";
else
$this->pagination .= "<a href=\"".$this->get_pagenum_link($counter)."\">$counter</a>";
}
}
elseif($lastpage > 5 + ($this->adjacents * 2)){//enough pages to hide some
//close to beginning; only hide later pages
if($this->page < 1 + ($this->adjacents * 2)){
for ($counter = 1; $counter < 4 + ($this->adjacents * 2); $counter++){
if ($counter == $this->page)
$this->pagination .= "<span class=\"current\">$counter</span>";
else
$this->pagination .= "<a href=\"".$this->get_pagenum_link($counter)."\">$counter</a>";
}
$this->pagination .= "...";
$this->pagination .= "<a href=\"".$this->get_pagenum_link($lpm1)."\">$lpm1</a>";
$this->pagination .= "<a href=\"".$this->get_pagenum_link($lastpage)."\">$lastpage</a>";
}
//in middle; hide some front and some back
elseif($lastpage - ($this->adjacents * 2) > $this->page && $this->page > ($this->adjacents * 2)){
$this->pagination .= "<a href=\"".$this->get_pagenum_link(1)."\">1</a>";
$this->pagination .= "<a href=\"".$this->get_pagenum_link(2)."\">2</a>";
$this->pagination .= "...";
for ($counter = $this->page - $this->adjacents; $counter <= $this->page + $this->adjacents; $counter++)
if ($counter == $this->page)
$this->pagination .= "<span class=\"current\">$counter</span>";
else
$this->pagination .= "<a href=\"".$this->get_pagenum_link($counter)."\">$counter</a>";
$this->pagination .= "...";
$this->pagination .= "<a href=\"".$this->get_pagenum_link($lpm1)."\">$lpm1</a>";
$this->pagination .= "<a href=\"".$this->get_pagenum_link($lastpage)."\">$lastpage</a>";
}
//close to end; only hide early pages
else{
$this->pagination .= "<a href=\"".$this->get_pagenum_link(1)."\">1</a>";
$this->pagination .= "<a href=\"".$this->get_pagenum_link(2)."\">2</a>";
$this->pagination .= "...";
for ($counter = $lastpage - (2 + ($this->adjacents * 2)); $counter <= $lastpage; $counter++)
if ($counter == $this->page)
$this->pagination .= "<span class=\"current\">$counter</span>";
else
$this->pagination .= "<a href=\"".$this->get_pagenum_link($counter)."\">$counter</a>";
}
}
if($this->page){
//siguiente button
if ($this->page < $counter - 1)
$this->pagination .= "<a href=\"".$this->get_pagenum_link($next)."\" class=\"next\">$n</a>";
else
$this->pagination .= "<span class=\"disabled\">$n</span>";
if($this->showCounter)$this->pagination .= "<div class=\"pagination_data\">($this->total_pages Pages)</div>";
}
}

return true;
}
}
?>

[jramroop]

Hi,

The problem is not the pagination class itself, but your CSS.

.postarea a, .postarea a:visited, .postcomments a, .postcomments a:visited, #statichomepagetext a, #statichomepagetext a:visited{
color: #3F99B1;
text-decoration: none; display: block;
}

.postarea a:hover, .postcomments a:hover {
color: #F04C91;
text-decoration: underline; display: block;
}

If you remove the "display: block;" and my above css code that should solve the problem but I don't know how this will affect your other links.

James

[pete_coles]

Or you could specifiy width for the link letter element and float:left; although you'll nee to clear the floats afterwards. Either this method or the one above will work fine.

[boxfish]

I think I'm just screwing this up now, it's starting to mess with my product boxes displaying properly.

Mens Wedding Rings | Buy White Gold Jewellery Online - buywhitegold.co.uk

If anyone would like to sort this out for me then feel free to PM me with a price. It may be tomorrow when I get back to you though, out for the day from 10.30am.

Cheers,
Ian

[jonsp]

One way to fix it would be add a cleared line break under the pagination div

<br style="clear: both;height: 0;line-height: 0.0;font-size: 0;" />

Cheers,
Jon

[boxfish]

All sorted now.

I posted it up on the datafeedr support forum and one of the guys gave me some code to add to my css.

Thanks for your help guys.