Форум поддержки пользователей ZeroParking

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Форум поддержки пользователей ZeroParking » Архив тем » Меню, вертикальное расположение :)


Меню, вертикальное расположение :)

Сообщений 1 страница 24 из 24

1

Как сделать что бы эти ссылки были расположены так-с:

http://s46.radikal.ru/i114/0910/a2/4814f509213b.jpg

Кто поможет - тому плюсик  http://forumupload.ru/uploads/0002/25/06/8547-5.gif

0

2

Изучить CSS или взять код таблицы стилей с того форума

0

3

Эм... Я понимаю не в тему, но где можно научиться делать свой стиль (простите за тупость = =")

0

4

.Sue
Вот Генератор Стилей; здесь создай свой стиль.
Вот коды СSS для регулирование.

0

5

Как мне помнится, в своём стиле меняете свои настройки на эти:

Код:
/* D2 Page navigation
-------------------------------------------------------------*/

/* D2.1 */
#pun-pagelinks {
  position: absolute;
  top: -15px;
  left: 0;
  margin: 0;
  border: none;
  padding: 0;
  width: 100%;
  }

/* D2.2 */
#pun-pagelinks .container {
  background: transparent;
  border: none;
  padding: 0}

/* D2.3 */
#pun-pagelinks .container li {
  display: inline
  }

/* D2.4 */
#pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover {
  height: 2em;
  line-height: 2em;
  padding: 0;
  font-size: 1.2em;
  margin-left: -9999px;
  display: block;
  float:left;
  width: 100%;
  }

/* D2.5 */
#pun-pagelinks a:active, #pun-pagelinks a:focus {
  position:relative;
  margin: 0;
  }

#pun-pagelinks li a span {
  display:block;
  margin: 0 1em
  }

/* D3 Forum navigation
-------------------------------------------------------------*/

/* D3.1 */
#pun-navlinks {
  border: none;
  margin-bottom: 130px;
}

#pun-navlinks .container {
  border: none;
  margin: 0;
  }

/* D3.2 */
#pun-navlinks .container {
  padding-top: 20px;
  padding-right: 120px;
  height: 20px;
  font-weight: bold;
  text-align: right;
}

/* D.3 */
#pun-navlinks .container {
  padding-top: 50px;
  padding-bottom: 0px;
  height: 130px;
  font-family: comic sans ms;
}

.container #pun-navlinks li {
  display: inline;
  margin: 0.1%;
  padding: 3px 4px 4px 4px;
  border-left: 1px solid #fff;
}

/* D3.4 */
#pun-navlinks li a {
  font-size: 1.1em;
  }

/* D4 User links
-------------------------------------------------------------*/

/* D4.1 */
#pun-ulinks  {
  margin-top: 0;
  }

/* D4.2 */
#pun-ulinks .container {
  border-top: none;
  padding: 0.7em 1em;
  }

/* D4.3 */
#pun-ulinks li, #pun-ulinks li a {
  display: inline;
  border-left-style: solid;
  border-left-width: 0px;
  white-space: nowrap;
  }

/* D4.4 */
#pun-ulinks li a {
  padding: 0 0.3em 0 0.6em
  }

/* D4.5 */
#pun-ulinks li.item1, #pun-ulinks li.item1 a {
  border-left-style: none;
  border-left-width: 0;
  padding-left: 0
  }

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

+1

6

Ви
СПС! )))

0

7

.Sue
На сколько я знаю есть так же скрипт.))

0

8

Меламори Блимм
Наврятли... это скорее всего самый обыденный Css если начинаеться с тега <style> ))


ДА и вообще!) Есть несколько различных способов,  как можно добиться этого эффекта...http://s46.radikal.ru/i114/0910/a2/4814f509213b.jpg
И для этого потребуються минимальные знания Css и совсем чуть-чуть HTML.

Для всех вариантов по началу надо просто убрать меню  но незабыть сделать резервные ссылки на них, и желательно оставить Администратирование.
Поехали:
1- это просто в таблицу поставить картинки с названием типа Форум Участники Правила Поиск Профиль Сообщения Администрирование Выход  (Ну понятно что для каждой части меню своя картинка.) Потом к каждой картинке прикрепить ссылку, и все... Вариант довольно не сложный.
2- это сделать MAP-карту... (Уже для тех кто разбираеться.)




Вот блин... пока это все писал забыл какой третий вариант придумал.... http://forumupload.ru/uploads/0002/25/06/8547-5.gif

0

9

AlikaRD
Честно не знаю, как это называется, посмотрите...

Код:
Блок панели навигации(хтмл-низ)

<style>
#pun-navlinks, #pun-navlinks .container { 
margin : -65px 6px 0 0;
float : right; 
}
#pun-navlinks .container {
background: transparent url(фоновая картинка); 
border: 2px double #988448;
padding : 0.3em 0.3em 0.3em 0.5em; 
}
#pun-navlinks.section {border-style: none; } 
#pun-navlinks li { 
display : block;
}
#pun-navlinks a {color : #FFFF00;}
#pun-navlinks a:hover {color : #7CFC00;}
</style>
Код:
Блок панели пользоват. ссылок
<style>
#pun-ulinks, #pun-ulinks .container { 
margin : -55px 0 0 6px;
float : left; 
}
#pun-ulinks .container {
background: transparent url(Фоновая картинка); 
border: 4px outset #988448;
}
#pun-ulinks.section {border-style: none; }
#pun-ulinks li, #pun-ulinks li a { 
padding : 0 0.3em 0 0;
display : block;
border-style: none;
}
#pun-ulinks a {color : #FFFF00;}
#pun-ulinks a:hover {color : #7CFC00;}
</style>

+1

10

Меламори Блимм написал(а):

<style>
#pun-navlinks, #pun-navlinks .container {
margin : -65px 6px 0 0;
float : right;
}
#pun-navlinks .container {
background: transparent url(фоновая картинка);
border: 2px double #988448;
padding : 0.3em 0.3em 0.3em 0.5em;
}
#pun-navlinks.section {border-style: none; }
#pun-navlinks li {
display : block;
}
#pun-navlinks a {color : #FFFF00;}
#pun-navlinks a:hover {color : #7CFC00;}
</style>

Если скрипты выглядят таким образом

<style>
Бла-бла-бла-бла.
..........................
..........................
..........................
..........................
..........................
</style>
То это Css http://forumupload.ru/uploads/0002/25/06/8547-2.gif

0

11

Я вот сделала меню. Всё отлично, только появилась проблемка http://s61.radikal.ru/i174/1001/7f/5958985beacc.png
Как фон меню влево до конца подвинуть, и сделать его полупрозрачным.

0

12

Mikki
Как ты это делала?
Если через то, что я дала, то находишь вот такой пункт:
margin : -65px 6px 0 0;
верхний отступ
правый отступ.

0

13

Удалите, не туда написала

Отредактировано Tsunadetb (2010-01-02 17:14:43)

0

14

Меламори Блимм
Да через Ваше, но если менять эти параметры то меню двигается по шапке, а не фон внутри него.

Отредактировано Mikki (2010-01-02 17:18:02)

0

15

http://forumupload.ru/uploads/0002/25/06/8550-2.gif
Я ПОНЯЛА!!!

0

16

Mikki
Значит вам надо просто картинку сделать больше! Из-за чего еще такое могло произойти я не знаю... http://forumupload.ru/uploads/0002/25/06/8547-3.gif
Измените размер картинки! http://forumupload.ru/uploads/0002/25/06/8547-2.gif

0

17

как мне совместить шапку с навигацией и с 1
а то получается фигня Оо"

0

18

Юки Кимоно
В таком случае нужно баннер смещать вверх или вниз, ну или в сторону, как вам угодно в общем, а само меню подгонять выше. И вставляйте ее в html-верх что бы она была в шапке.

0

19

http://forumupload.ru/uploads/0002/25/06/8547-2.gif

0

20

Спасибо! Как двигать вправо-влево тоже разобралась ^_____^...

Отредактировано Ташка (2010-08-18 04:13:07)

0

21

Ви написал(а):

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

А вот для меня это проблема..
Я не могу поднять выше ссылки навигации и при этом не "поднимать" сам форум..
http://revival.anihub.ru/

0

22

Alisa San написал(а):

Я не могу поднять выше ссылки навигации и при этом не "поднимать" сам форум..

Попробуйте найти в первом окне стиля и поменять выделенные цветом части

/* D3 Forum navigation
-------------------------------------------------------------*/

/* D3.1 */
#pun-navlinks {
  position:absolute;
  border: none;
  left: 50%;
  top: 167px;
  margin-left:300px;

  z-index:1000;
}

#pun-navlinks .container {
  border: none;
  margin: 0;
  }

/* D3.2 */
#pun-navlinks .container {
  padding-top: 20px;
  padding-right: 30px;
  height: 20px;
  font-weight: normal;
  text-align: right;
}

/* D.3 */
#pun-navlinks .container {
  padding-top: 50px;
  padding-bottom: 50px;
  height: 50px;
  font-family: ;
}

.container #pun-navlinks li {
  display: inline;
  margin: 0.1%;
  padding: 3px 4px 4px 4px;
  border-left: 1px solid #fff;
}

/* D3.4 */
#pun-navlinks li a {
  font-size: 1.1em;
  }

/* D4 User links
-------------------------------------------------------------*/

/* D4.1 */
#pun-ulinks  {
  margin-top: 200px;
  }

/* D4.2 */
#pun-ulinks .container {
  border-top: none;
  padding: 0.7em 1em;
  }

+1

23

Если не сложно, можно компактным кодом? А то я уже путаться начинаю, где что %)

0

24

Меламори Блимм
Cпасибо огромное! .)
Наконец - то получилось.

0


Вы здесь » Форум поддержки пользователей ZeroParking » Архив тем » Меню, вертикальное расположение :)


Рейтинг форумов | Создать форум бесплатно