ul li с птичкой

[Xoma55]

Добрый день

вот кусок кода

 

html

 

  <ul>
            <li><a href="landscapes.php?t_dir=Olga">ОЛЬГА</a></li>
            <li><a href="landscapes.php?t_dir=Julia">ЮЛИЯ</a></li>
            <li><a href="landscapes.php?t_dir=Rimma">РИММА</a></li>

  </ul>

 

css

 

ul {
    margin: 20px;
    padding: 0;
    list-style-image:  url(../images/list_icon.png);
}

ul li {
    margin: 0 0 15px 0;
    padding: 0 0;
}

 

Существует ли способ ставить только одну птичку в выбраной строчке li?

Все что я нашел - это стремная переделка input с радиокнопкой.

Может кто помочь пожалуйста?

[Great Rash]

Совсем не понятно, что вам нужно сделать.

[Xoma55]

Совсем не понятно, что вам нужно сделать.

Спасибо что откликнулись..

Попробую объяснить. Нужен список из ссылок. Слева от каждой строчки должна выводится картинка (птичка например) при выборе пользователем именно этой ссылки. Input примерно подходит, за исключением того, что при использовании <a href=... выбора значка радиокнопки не происходит (только по нажатию самого значка). Вот пример:

 

        <div id="show">

            <h1>Стилизация элементов checkbox и radio button на CSS3</h1>

            <input type="radio" id="r1" name="rr" />

            <label for="r1"><span></span>Radio Button 1</label>

            <p>

            <input type="radio" id="r2" name="rr" />

            <label for="r2"><span></span><a href="#">ОЛЬГА /a></label>

        </div>

Так что выход, как я понимаю, все же использовать li + css

 

К сожалению точнее описать не могу (не хватает пока знаний)

[Great Rash]

Если пользователь переходит по ссылке, то страница перезагружается, соответственно пользователь не увидит, что у него какая-то ссылка отметилась "птичкой", потому что у него загрузится другая страница.

Если я правильно понимаю, то вам надо подсвечивать текущую страницу в меню, так? Для этого нужно добавить ссылке например класс .active, и уже ему присваивать необходимые стили.

[amelice]

Возможно так?
http://jsfiddle.net/fvJdv/

offtop: понравилось название темы )

[Xoma55]

Возможно так?

http://jsfiddle.net/fvJdv/

offtop: понравилось название темы )

Даа.. Незря я решил запостить свой вопрос на этот ресурс )  Отличное решение! Вы подняли мне настроение на весь день! Спасибо.

[amelice]

Даа.. Незря я решил запостить свой вопрос на этот ресурс )  Отличное решение! Вы подняли мне настроение на весь день! Спасибо.

Позитивно!   Рада, что помогла.

[Aleksandr.L]

Возможно так?

http://jsfiddle.net/fvJdv/

offtop: понравилось название темы )

 

Оригинально. Мне понравилась идея.

[Xoma55]

Решил продолжить тему, потому как есть проблемка. В предложенном уважаемой amelice решении все замечательно, но есть один момент.. Как и описано в справочнике псевдокласса :target "происходит переход к элементу, атрибут id которого задан как.. ". На практике же страничка сдвигается в браузере прямо на эту ссылку, т.е. позиционирует её в левый верхний угол. При навигации по этому списку страница "скачет" по экрану. Есть ли способ от этого избавиться?

[amelice]

Да, к сожалению это работает когда на странице нет скролла. Если есть скролл, то при переходе по ссылке браузер пытается проскролить к указанному id.
Еще в таком варианте к урлу добавляется #ID, и нажатие на кнопку "Назад" возвращает предыдущему #ID, если был переход до этого.

[Sensei]

Есть ли способ от этого избавиться?

 

Сделать с помощью js. Например, так http://jsfiddle.net/fvJdv/1/

[Xoma55]

 

Есть ли способ от этого избавиться?

 

Сделать с помощью js. Например, так http://jsfiddle.net/fvJdv/1/

Пасиб Sensei! Я сделал на том, что мне ближе - на php. Не думал, что такую простую задачу нельзя решить с помощью html+css.

 

 <ul>

          <?php

          $menu=array(

                     0=>array(0 => '/landscapes.php?t_dir=Olga', 1=> 'ОЛЬГА'),

                     1=>array(0 => '/landscapes.php?t_dir=Julia', 1=> 'ЮЛИЯ'),

                     2=>array(0 => '/landscapes.php?t_dir=Rimma', 1=> 'РИММА')

                     );

          foreach ($menu as $item):

          ?>

           <li><a href="<?=$item[0]?>" <?=$_SERVER['REQUEST_URI'] == $item[0] ? 'class="select"':'class="empty"'?>><?=$item[1]?></a></li>

          <?endforeach;?>

        </ul>