Внешний вид постраничной навигации

[kozax89]

Есть постраничная навигация, можно глянуть например тут:

Для просмотра ссылки Войди или Зарегистрируйся

Хотелось бы придать ей другой вид - чтобы каждая цифра была на отдельной кнопке, думаю надо это как то сделать на div'ах? Подскажите или киньте материал где будет написано как это реализовать, а то с дивами не дружу...

код навигации:

echo "<br><center><div class=\"navigation\">";
// Проверяем нужны ли стрелки назад
if ($page != 1) $pervpage = '<a href=index.php?&page=1><<<</a> | <a href=index.php?&page='. ($page - 1) .'><</a> | ';
// Проверяем нужны ли стрелки вперед
if ($page != $total) $nextpage = ' | <a href=index.php?&page='. ($page + 1) .'>></a> | <a href=index.php?&page=' .$total. '>>>></a>';

// Находим две ближайшие станицы с обоих краев, если они есть
if($page - 5 > 0) $page5left = ' <a href=index.php?&page='. ($page - 5) .'>'. ($page - 5) .'</a> | ';
if($page - 4 > 0) $page4left = ' <a href=index.php?&page='. ($page - 4) .'>'. ($page - 4) .'</a> | ';
if($page - 3 > 0) $page3left = ' <a href=index.php?&page='. ($page - 3) .'>'. ($page - 3) .'</a> | ';
if($page - 2 > 0) $page2left = ' <a href=index.php?&page='. ($page - 2) .'>'. ($page - 2) .'</a> | ';
if($page - 1 > 0) $page1left = ' <a href=index.php?&page='. ($page - 1) .'>'. ($page - 1) .'</a> | ';

if($page + 5 <= $total) $page5right = ' | <a href=index.php?&page='. ($page + 5) .'>'. ($page + 5) .'</a>';
if($page + 4 <= $total) $page4right = ' | <a href=index.php?&page='. ($page + 4) .'>'. ($page + 4) .'</a>';
if($page + 3 <= $total) $page3right = ' | <a href=index.php?&page='. ($page + 3) .'>'. ($page + 3) .'</a>';
if($page + 2 <= $total) $page2right = ' | <a href=index.php?&page='. ($page + 2) .'>'. ($page + 2) .'</a>';
if($page + 1 <= $total) $page1right = ' | <a href=index.php?&page='. ($page + 1) .'>'. ($page + 1) .'</a>';

// Вывод меню если страниц больше одной

if ($total > 1)
{
Error_Reporting(E_ALL & ~E_NOTICE);
echo "<div class=\"navigation\">";
echo $pervpage.$page5left.$page4left.$page3left.$page2left.$page1left.'<b>'.$page.'</b>'.$page1right.$page2right.$page3right.$page4right.$page5right.$nextpage;
echo "</div>";
}
echo "</div></center>"

 

[pitkina]

как вариант, можно обозначить каждую цифру в навигации рамкой

добавить в .css

.navigation2 a{
border:1px solid #c02f02;
margin:2px;
padding:2px;
}

и дополнить вывод через <span>

echo "<div class=\"navigation\">";
echo $pervpage.'<span class="navigation2">'.$page5left.$page4left.$page3left.$page2left.$page1left.'<b>'.$page.'</b>'.$page1right.$page2right.$page3right.$page4right.$page5right.'</span>'.$nextpage;
echo "</div>"; 
}
echo "</div></center><br />"