Сдвинуть переключатель

[Удален]
765

Здравствуйте

Столкнулся с проблемой: переключатель страниц на сайте немного залез на блоки, как его можно передвинуть методом тыка?

Css:

/* Навигация */
.pages-container{height:30px; margin-top:15px;}
.page-nav{position:relative;background:url('../images/maintitle.png') 30% 50% repeat-x #1F120C;color:#fff;float:left;padding:4px;padding-right:76px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}
.page-nav .nav_ext{display:none !important}
.page-nav .pnextprev{position:absolute;top:4px;right:4px}
.page-nav .pages-links a, .page-nav .pages-links span{display:inline-block;color:#000;background: #c5c5c5;width:32px;height:18px;line-height:17px;text-align:center;font-weight:bold;text-shadow:0px 1px 0px #c2c2c2;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px}
.page-nav .pages-links a:hover{color:#000;box-shadow:0px 0px 3px #c2c2c2;-moz-box-shadow:0px 0px 3px #c2c2c2;-webkit-box-shadow:0px 0px 3px #c2c2c2;-moz-transition:all 0.2s ease;-webkit-transition:all 0.2s ease;transition:all 0.2s ease}
.page-nav .pages-links a:active{color:#000;box-shadow:0px 0px 2px #000 inset;-moz-box-shadow:0px 0px 2px #000 inset;-webkit-box-shadow:0px 0px 2px #000 inset}
.page-nav .pages-links span{color:#fff;text-shadow:none;box-shadow:0px 0px 3px #fff;-moz-box-shadow:0px 0px 3px #fff;-webkit-box-shadow:0px 0px 3px #fff}
.page-nav .pnextprev span span, .page-nav .pnextprev a span{display:block;float:left;width:22px;height:18px;background:url('../images/pages-icons.png') no-repeat;font-size:0px;opacity:0.7}
.page-nav .pnextprev span span{opacity:0.2 !important}
.page-nav .pnextprev a:hover span{opacity:1.0}
.page-nav .pnextprev span.pprev{background-position:-22px 0px}
.page-nav .pnextprev a:hover span.pprev{background-position:-22px -18px}
.page-nav .pnextprev span.pnext{background-position:-44px 0px}
.page-nav .pnextprev a:hover span.pnext{background-position:-44px -18px}
.page-nav .pnextprev span.pgonum{background-position:0px 0px}
.page-nav .pnextprev a:hover span.pgonum{background-position:0px -18px}

Шаблон:

<div style="clear:both;">
<div class="pages-container">
<div class="page-nav">
<div class="pages-links">{pages}</div>
<div class="pnextprev">
[prev-link]<span class="pprev tipsy-top" title="Назад">Назад</span>[/prev-link]
[next-link]<span class="pnext tipsy-top" title="Вперёд">Вперед</span>[/next-link]
</div>
</div>
</div>
</div>

Как я понял редактировать нужно эту строчку:

.pages-container{height:30px; margin-top:15px;}

Только вот что именно ей задать, чтобы можно было двигать влево-вправо, вверх-вниз?

fa2m
На сайте с 07.09.2011
Offline
23
#1
Как я понял редактировать нужно эту строчку:
.pages-container{height:30px; margin-top:15px;}
Только вот что именно ей задать, чтобы можно было двигать влево-вправо, вверх-вниз?

Для меня непонятен вопрос. Куда вам именно его нужно сдвинуть? В какую сторону?

Встречи в Днепре /ru/forum/736064 (/ru/forum/736064) Беклинк за копейку. Удобный сервис анализа обратных ссылок. (http://backlink.page-weight.ru/)
[Удален]
#2
fa2m:
Для меня непонятен вопрос. Куда вам именно его нужно сдвинуть? В какую сторону?

Вправо и вниз

fa2m
На сайте с 07.09.2011
Offline
23
#3
Xnokie1:
Вправо и вниз

Метод тыка

Ну попробуйте добавить margin-top:25px; margin-left: 10px, если сдвиг будет, то поиграйтесь с этими цифрами, точные я сказать не могу, не видя ваш сайт

--------------------

Примечание:

margin-top: 25px, имеется ввиду не добавить, а исправить ваше margin-top:15px (комментарий на случай, если вы вообще не знакомы с CSS)

[Удален]
#4
fa2m:
Метод тыка
Ну попробуйте добавить margin-top:25px; margin-left: 10px, если сдвиг будет, то поиграйтесь с этими цифрами, точные я сказать не могу, не видя ваш сайт

Добавил, .pages-container{height:30px; margin-top: 25px; margin-left: 5px}

margin-left: 5px сработал

а вот margin-top: 25px вниз не опускает

fa2m
На сайте с 07.09.2011
Offline
23
#5

Сайт в сети? Вы можете его показать? Угадывать не хочется, так топик на страницы три растянуть можно :)

[Удален]
#6
fa2m:
Сайт в сети? Вы можете его показать? Угадывать не хочется, так топик на страницы три растянуть можно :)

Вот, на примере этого шаблона site.ru

Сам переключатель изначально стоял нормально, залез он на блоки, после того как был сделан вид кратких новостей в 2е колонки, путем -

<div style="width:49%; float: left; margin-left: 5px; margin-bottom: -7px;";>
vlad00777
На сайте с 24.12.2009
Offline
119
#7

.page-nav {

position: relative;

background: url('../images/maintitle.png') 30% 50% repeat-x #1F120C;

color: white;

float: left;

padding: 4px;

padding-right: 76px;

border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

margin-left: 145px;

margin-top: 20px;

}

Как-то так.

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
fa2m
На сайте с 07.09.2011
Offline
23
#8

Ну вот этот margin-bottom: -7px и создал эту проблему, его нельзя удалить?

vlad00777
На сайте с 24.12.2009
Offline
119
#9

.pages-container {

height: 30px;

margin-top: 25px;

margin-left: 5px;

}

Оставьте как и был т.е уберите полностью все параметры так:

.pages-container {}

---------- Добавлено 04.08.2012 в 16:36 ----------

fa2m:
Ну вот этот margin-bottom: -7px и создал эту проблему, его нельзя удалить?

Не то смотрите.

И еще как вариант:

.pages-container {

display:inline-block;

height: 30px;

margin-top: 25px;

margin-left: 5px;

}

[Удален]
#10
vlad00777:
.page-nav {
position: relative;
background: url('../images/maintitle.png') 30% 50% repeat-x #1F120C;
color: white;
float: left;
padding: 4px;
padding-right: 76px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin-left: 145px;
margin-top: 20px;
}
Как-то так.

Помогло!

Всем спасибо!

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий