Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Шаблоны (TPL) Изменение шаблона топ новостей

Изменение шаблона топ новостей


     07.03.2013    Шаблоны (TPL)    1965

вопрос
Как реализвать вот такой топ новостей? В чем заключается сложность: в том что блок имет верхний и нижний класс (которые отличаются от других и так же несут в себе пункт) и остальные ссылки которые в серединке блока чередуются классами.

<div class="otbl lcol">
                    <div id="navs">
                        <ul>
                      
                            <li class="gid"><a href="#">Angry Birds Star Wars</a></li>
                            <li class="fer"><a href="#">Jetpack Joyride для Android</a></li>
                            <li class="lesb"><a href="#">No gravity</a></li>
                            <li class="fer"><a href="#">Lara Croft: Guardian of Light</a></li>
                            <li class="lesb"><a href="#">Trial Xtreme 2 HD</a></li>
                            <li class="fer"><a href="#">Flick Soccer для Android</a></li>
                            <li class="lesb"><a href="#">Скачать Hills Of Glory: WWII</a></li>
                            <li class="xqa"><a href="#">Drop The Box</a></li>
                      
                        </ul>
                    </div>
                </div>


Зарание спасибо за ответ, можно просто дать ссылку или привести пример подобной реализации.
П.С. (для модераторов поиск не помог! не тут на сайте не гугл с яндексом.)

Ответил: BR0kEN


Комментарии пользователей (9)

BR0kEN
163

235 | 275

BR0kEN - 7 марта 2013 13:24 - Эксперт

Покажите мне человека который что-то понял из описания.

Дима87
17 | 13

Дима87 - 7 марта 2013 13:46 - Юзер

Ок объясню подробнее. Смотрите есть верстка топа новостей, она сверстана так что есть нижний и верхний класс т.е.
<li class="gid">
и
<li class="xqa">

между ними находятся классы
<li class="fer">
и
<li class="lesb">

которые чередуются между собой.
каждый класс несет свою картинку.

т.е.

.gid a {background: url("../images/topc.png") no-repeat; width: 210px; height: 27px;}
.gid a:hover {background: url("../images/topc.png") no-repeat -210px 0px;}
.fer a {background: url("../images/topc.png") no-repeat 0px -27px; width: 210px; height: 27px;}
.fer a:hover {background: url("../images/topc.png") no-repeat -210px -27px; width: 210px; height: 27px;}
.lesb a {background: url("../images/topc.png") no-repeat 0px -54px; width: 210px; height: 27px;}
.lesb a:hover {background: url("../images/topc.png") no-repeat -210px -54px; width: 210px; height: 27px;}
.xqa a {background: url("../images/topc.png") no-repeat 0px -81px; width: 210px; height: 27px;}
.xqa a:hover {background: url("../images/topc.png") no-repeat -210px -81px; width: 210px; height: 27px;}


вопрос как это все превратить в шаблон топа новостей? чередование классов я находил в гугле что нужно копать пхп и там цыкл кажется какой то задавать, а по поводу применения индивидульного первого и последнего класса в данном блоке я нечего не нашел. п.с. возможно сверстано как то не там, подскажите как это все сделать правильно?

Дима87
17 | 13

Дима87 - 7 марта 2013 13:47 - Юзер

как то не так***

nowheremany
192

1659 | 1292

nowheremany - 7 марта 2013 14:04 - Эксперт


Благодарность принимаю тут Связь

Дима87
17 | 13

Дима87 - 7 марта 2013 17:23 - Юзер

как я понял этим способом можно сделать чередование классов в цсс, а как задать что бы первый и последний был другой? и невходил в область odd и even ???

BR0kEN
163

235 | 275

BR0kEN - 7 марта 2013 17:30 - Эксперт


Дима87
17 | 13

Дима87 - 7 марта 2013 19:02 - Юзер

какие элементы можно там использовать кроме <li> и <ul>?

BR0kEN
163

235 | 275

BR0kEN - 7 марта 2013 19:25 - Эксперт

Любые. Отсчет от родителя.

Дима87
17 | 13

Дима87 - 7 марта 2013 23:05 - Юзер

спасибо большое. сделал :)

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы