[help] Помогите с кнопками страничек

Тема в разделе "Веб-дизайн", создана пользователем rafic, 26 мар 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Приветствую. Я прошу помочь мне в следующем вопросе.

    Имеется php вывод страничек в скрипте:
    PHP:
    <a href="?page=', $i ,'">', $i + 1, '</a>
    мне нужно оформить номер каждой странички в таком стиле, как показано в приложении. При наведении кнопочка с номером странички должна менять фон, а border оставаться не изменным (1pixel и цветом #000) и при этом номера страничек должны отображаться по середине страницы сайта.
     

    Вложения:

  2. BlackPawn

    BlackPawn Постоялец

    Регистр.:
    19 мар 2009
    Сообщения:
    75
    Симпатии:
    27
    Это вставляешь в <header> или в css файл, ширина #page должна быть указана:
    HTML:
    
    <style>
    	#page{ border-top:1px solid #999999; width:70px; margin:0 auto 0 auto}
    	#page a{ display:block; float:left; width:20px; height:20px; border:1px solid #CCCCFF; color:#336666; text-align:center; margin-left:1px; text-decoration:none;}
    	#page a:hover {background:#CCCCCC;}
    </style>
    
    Это - в код страницы:
    HTML:
    
    <div id="page">
    	<a href="#">1</a>
    	<a href="#">2</a>
    	<a href="#">3</a>
    </div>
    
     
  3. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Все равно странички находятся слева из-за параметра float:left; если его брать то странички будут по средине, но одна под другой, то есть в столбик. Как мне выровнять странички по центру ?:bc:
     

    Вложения:

  4. Псевдоним

    Псевдоним

    Регистр.:
    23 фев 2009
    Сообщения:
    300
    Симпатии:
    68
    Покажи исходник. А то я не совсем тебя понял.
     
  5. ne0zx

    ne0zx

    Регистр.:
    1 ноя 2008
    Сообщения:
    212
    Симпатии:
    74
    text-align:center мб?
    вот как у меня:
    HTML:
    				for($i=1;$i<=$num_pages;$i++) {
    				  if ($i-1 == $page){
    					echo "[".(abs($i*$per_page)-$per_page+1)." - ".abs($i*$per_page)."]  ";
    				  } 
    				  else {
    					echo '[<a href="index.php?page='.$i.'">'.(abs($i*$per_page)-$per_page+1)." - ".abs($i*$per_page)."</a>]  "; 
    				  }
    				} 
     
  6. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Вот кусок который выводит список страничек. Сорри я не силен в пхп, по этому если чета не грамотно написал можете исправить:)
    PHP:
    // Вывод списка страниц
    if ( $pages )
    {
       echo 
    '<span style="color:#000;" >Страницы:</span>'PHP_EOL;
       
       for ( 
    $i 0$i $pages; ++ $i )
            
          echo 
    '<span id="page" ><a href="?page='$i ,'">'$i 1'</a></span>'PHP_EOL;
    }
    echo 
    '<br>';
    $curpage2=$cur_page+1;
    echo
    '<span style="color:#000;">Текущая страница&nbsp;</span>';
    echo 
    '<span class="strlink" style="color:#ffba00;"><b>';
    echo
    "$curpage2";
    echo
    '</b></span>';
    а вот CSS код со второго поста
    PHP:
    <style>
        
    #page{ border-top:1px solid #999999; width:70px; margin:0 auto 0 auto}
        #page a{ display:block; float:left; width:20px; height:20px; border:1px solid #CCCCFF; color:#336666; text-align:center; margin-left:1px; text-decoration:none;}
        #page a:hover {background:#CCCCCC;}
    </style>
     
  7. BlackPawn

    BlackPawn Постоялец

    Регистр.:
    19 мар 2009
    Сообщения:
    75
    Симпатии:
    27
    Написала же тебе работающий пример. Зачем было менять <div> на <span>? Конечно, теперь страницы будет не по центру. Почитай в чем между ними разница на http://htmlbook.ru/.

    <div id="page"> нужно вынести за пределы цикла.

    В стили нужно скриптом вставлять ширину блока страниц
    PHP:
    #page{ border-top:1px solid #999999; width:<? echo $pages*23; ?>px; margin:0 auto 0 auto}
     
  8. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    пхп код в css... хм что-то новенькое... не когда не слышал. Можете показать пример такой комбинации на моем примере?
     

    Вложения:

    • index.rar
      Размер файла:
      1,3 КБ
      Просмотров:
      2
  9. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Уважаемые, может кто нить все таки сможет мне помочь?
     
  10. NoN

    NoN Постоялец

    Регистр.:
    25 ноя 2008
    Сообщения:
    79
    Симпатии:
    33
    сделай такуб конструкцию, но ссылки должны идти в одрну строку. или как было вышенаписанно в код перед навигацией вставь
    <style>#page{ border-top:1px solid #999999; width:<? echo $pages*23; ?>px; margin:0 auto 0 auto}</style>
    где $pages кол-во страниц.

    Код:
    <style>
    
    	#page a{width:20px; height:20px; border:1px solid #CCCCFF; color:#336666; text-align:center; margin-left:1px; text-decoration:none; padding:0 5px;}
    	#page a:hover {background:#CCCCCC;}
    </style>
    <center>
    <div id="page">
    	<a href="#">1</a><a href="#">2</a><a href="#">3</a>
    </div>
    </center>
    
     
Статус темы:
Закрыта.