Кот

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

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

Вы здесь » Кот » Фишки и примочки » CSS - навигации

CSS - навигации

Страница: 1 2 3 4  

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

1

  • Автор: разноцветная птица;
  • здесь может быть ваша реклама за 10$
  • разноцветная птица;
  • Зарегистрирован: 2012-06-02
  • Приглашений: 0
  • Сообщений: 628
  • Уважение: +43
  • Позитив: +21
  • Пол: Женский
  • Возраст: 26 [1998-03-11]
  • Провел на форуме:
    4 дня 2 часа
  • Последний визит:
    2013-01-16 18:08:23

CSS - навигации можно вставлять куда угодно, однако они написаны на html, и соответственно, не будут восприниматься в сообщениях на форуме, т.к. в них используется BB - код.
Каждая CSS - навигация делится на два кода: тот, что нужно вставить во второе окно стиля (style_cs.css - цвета)и код, который является навигацией: его нужна ставить туда, где вы хотите навигацию видеть. Чтобы вы случайно не удалили пункты с навигацией в css - окне, следует перед самим кодом прописать его назначение:

/* css - навигация */

Удачи!

+1

2

  • Автор: разноцветная птица;
  • здесь может быть ваша реклама за 10$
  • разноцветная птица;
  • Зарегистрирован: 2012-06-02
  • Приглашений: 0
  • Сообщений: 628
  • Уважение: +43
  • Позитив: +21
  • Пол: Женский
  • Возраст: 26 [1998-03-11]
  • Провел на форуме:
    4 дня 2 часа
  • Последний визит:
    2013-01-16 18:08:23

http://savepic.su/1854592.png
источник: Aroma of Desire

css

Код:
a.menu1:link, a.menu1:visited, a.menu1:active{
background-color: #e8dfc8;
font:normal 7pt Georgia;
color: #554855;
line-height: 14pt;
text-decoration: none;
text-transform:lowercase; 
border-bottom:2px solid  #b0b9c9;
border-top :5px solid  #c6d9c3;
text-align: center;
display:block;
width:70px;}
a.menu1:hover {
background-color:#dbcab3;
color:  #554855 ;
border-bottom:2px solid  #c6d9c3;
border-top:5px solid  #e8dfc8;}


a.menu2:link, a.menu2:visited, a.menu2:active{text-decoration: none;

background-color: #e8dfc8;
font:normal 7pt arial;
color: #554855;
line-height: 14pt;
text-transform:lowercase; 
text-align: center;
display:block;
width:70px;
border-bottom :2px solid  #c6d9c3;
border-top:5px solid  #b0b9c9;
}
a.menu2:hover {
background-color:#dbcab3;
color:  #554855 ;
width:70px;
border-top:5px solid  #c6d9c3;
border-bottom :2px solid  #e8dfc8;}

html

Код:
<table cellspacing="0"> 
<tr> 
<td> <a class="menu1" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td>
</tr></table>

0

3

  • Автор: разноцветная птица;
  • здесь может быть ваша реклама за 10$
  • разноцветная птица;
  • Зарегистрирован: 2012-06-02
  • Приглашений: 0
  • Сообщений: 628
  • Уважение: +43
  • Позитив: +21
  • Пол: Женский
  • Возраст: 26 [1998-03-11]
  • Провел на форуме:
    4 дня 2 часа
  • Последний визит:
    2013-01-16 18:08:23

http://savepic.su/1891459.png
источник: Aroma of Desire

css

Код:
.urbangreymenu{
width: 190px; /*width of menu*/
}


.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0;
}

.urbangreymenu ul li{
padding-bottom: 2px; 
}

.urbangreymenu ul li a{
font-family: verdana;
font-size: 12px;
font-weight: normal;
line-height: 10px;
margin: 0px;
padding-left: 0px;
text-decoration: none ;
text-transform: uppercase;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px;
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{color: white;background: black;
}

html

Код:
<div class="urbangreymenu">
<ul class="submenu"> 
<li><a href="#">menu</a></li> 
<li><a href="#">menu</a></li> 
<li><a href="#">menu</a></li> 
<li><a href="#">menu</a></li> 
<li><a href="#">menu</a></li> 
<li><a href="#">menu</a></li> 
<li><a href="#">menu</a></li> 
<li><a href="#">menu</a></li> 
</ul> 
</div>

0

4

  • Автор: разноцветная птица;
  • здесь может быть ваша реклама за 10$
  • разноцветная птица;
  • Зарегистрирован: 2012-06-02
  • Приглашений: 0
  • Сообщений: 628
  • Уважение: +43
  • Позитив: +21
  • Пол: Женский
  • Возраст: 26 [1998-03-11]
  • Провел на форуме:
    4 дня 2 часа
  • Последний визит:
    2013-01-16 18:08:23

http://savepic.su/1873027.png
источник: Aroma of Desire

css

Код:
a.men:link, a.men:visited, a.men:active{text-decoration: none;
background-color: #000000;
font-family: tahoma, arial;
font-size: 6pt;
color: #ffffff;
height:2px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
display:block;
width:130px;
border-bottom:2px solid  #e9e9e9;
margin: 20px;
padding: 2px 2px 2px 2px;
line-height: 300%;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
a.men:hover {
background-color:#E9E9E9;
color:#59ccdd;
border-bottom:2px solid  #000000;

}

html

Код:
<a class="men" href="#">menu</a> 
<a class="men" href="#">menu</a>
<a class="men" href="#">menu</a>
<a class="men" href="#">menu</a> 
<a class="men" href="#">menu</a> 
<a class="men" href="#">menu</a>

0

5

  • Автор: разноцветная птица;
  • здесь может быть ваша реклама за 10$
  • разноцветная птица;
  • Зарегистрирован: 2012-06-02
  • Приглашений: 0
  • Сообщений: 628
  • Уважение: +43
  • Позитив: +21
  • Пол: Женский
  • Возраст: 26 [1998-03-11]
  • Провел на форуме:
    4 дня 2 часа
  • Последний визит:
    2013-01-16 18:08:23

http://savepic.su/1850499.png
источник: Aroma of Desire

css

Код:
.urbangreymenu{width:400px;}
.urbangreymenu ul{list-style-type: none;margin:5 px ;padding: 0;margin-bottom: 0;}
.urbangreymenu ul li{padding-bottom:0px; }
.urbangreymenu ul li a{
font-family:times new roman ;
font-size: 40px;
font-weight: bold;
line-height: 30px;
margin: 0px;
padding-left: 5px;
text-decoration: none ;
text-transform: lowercase;
color: #ffffff;
background: #222222;
display:inline-block;;
width:120 px;
font-style: italic;
letter-spacing: -5px;
padding: 5px 0;
line-height: 17px;
padding-left: 8px;
text-decoration: none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
.urbangreymenu ul li a:hover{color:#ffffff;background:#444444;}

html

Код:
<div class="urbangreymenu">
<ul class="submenu"> 
<li><a href="#">menu</a><a href="#">menu</a><a href="#">menu</a>  </li>  
<li><a href="#">menu</a><a href="#">menu</a><a href="#">menu</a>  </li> 
<li><a href="#">menu</a><a href="#">menu</a><a href="#">menu</a>  </li> 
<li><a href="#">menu</a><a href="#">menu</a><a href="#">menu</a>  </li> 
<li><a href="#">menu</a><a href="#">menu</a><a href="#">menu</a>  </li> 
<li><a href="#">menu</a><a href="#">menu</a><a href="#">menu</a>  </li> 
<li><a href="#">menu</a><a href="#">menu</a><a href="#">menu</a>  </li> 
</ul> 
</div>

0

6

  • Автор: разноцветная птица;
  • здесь может быть ваша реклама за 10$
  • разноцветная птица;
  • Зарегистрирован: 2012-06-02
  • Приглашений: 0
  • Сообщений: 628
  • Уважение: +43
  • Позитив: +21
  • Пол: Женский
  • Возраст: 26 [1998-03-11]
  • Провел на форуме:
    4 дня 2 часа
  • Последний визит:
    2013-01-16 18:08:23

http://savepic.su/1891458.png
источник: Aroma of Desire

css

Код:
<style type="text/css"> 
a.menu2:link, a.menu2:visited, a.menu2:active{text-decoration: none;
background-color: #242424;
text-align: center;width:70px;display: block;
color: #CF1A45;font-family: garamond;font-size: 20pt;font-style: italic;font-weight: normal;
letter-spacing: -1px;padding:3px;
-webkit-border-radius:3px;-moz-border-radius:3px;
text-transform: lowercase;}
a.menu2:hover {background-color: #000000;color: #871f37;}
.menu3{background-color: #242424; -webkit-border-radius:10px;-moz-border-radius:10px;
padding-left:20px;padding-right:20px;padding-top:5px;padding-bottom:5px;}
.menu3:hover{background-color: #000000;}
</style>

html

Код:
<table cellspacing="0" class="menu3"> 
<tr> 
<td> <a class="menu2" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td> 
</tr></table>

0

7

  • Автор: разноцветная птица;
  • здесь может быть ваша реклама за 10$
  • разноцветная птица;
  • Зарегистрирован: 2012-06-02
  • Приглашений: 0
  • Сообщений: 628
  • Уважение: +43
  • Позитив: +21
  • Пол: Женский
  • Возраст: 26 [1998-03-11]
  • Провел на форуме:
    4 дня 2 часа
  • Последний визит:
    2013-01-16 18:08:23

http://savepic.su/1875074.png
источник: Aroma of Desire

css

Код:
<style type="text/css"> 
a.menu2:link, a.menu2:visited, a.menu2:active{
background-color:#414141;
color:#3e0a54;
width:120px;
font-family: garamond;
font-size: 30pt;
font-style: italic;
font-weight: normal;
display: block;
text-align: center;
text-decoration: none;
letter-spacing: -1px;
padding:3px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
text-transform: lowercase;
border-left:60px dotted #2f2f2f;
padding: 0px 0px -50px 0px;
}
a.menu2:hover {background-color: #444444;color: #7a13a3;}
</style>

html

Код:
<a class="menu2" href="#">menu</a>
<a class="menu2" href="#">menu</a>
<a class="menu2" href="#">menu</a> 
<a class="menu2" href="#">menu</a>

0

8

  • Автор: разноцветная птица;
  • здесь может быть ваша реклама за 10$
  • разноцветная птица;
  • Зарегистрирован: 2012-06-02
  • Приглашений: 0
  • Сообщений: 628
  • Уважение: +43
  • Позитив: +21
  • Пол: Женский
  • Возраст: 26 [1998-03-11]
  • Провел на форуме:
    4 дня 2 часа
  • Последний визит:
    2013-01-16 18:08:23

http://savepic.ru/2917417.png
Источник: The Violet Maniac
css

Код:
a.tvm, a.tvm:active, a.tvm:link, a.tvm:visited {
color : #dbd9d8;
background : #ff5400;
font-size : 17px;
text-decoration : none;
font-family: georgia;
line-height: 30px;
font-weight: normal;
text-transform: lowercase;
border: 0px;
text-align : center;
margin : 2px;
padding : 5px;
-moz-border-radius:10%;
letter-spacing: -2px;
font-style:italic;
}

a.tvm:hover {
color : #ff5400;
background : #dbd9d8;
font-size : 17px;
text-decoration : none;
font-family: georgia;
line-height: 30px;
font-weight: normal;
text-transform: lowercase;
border: 0px;
text-align : center;
margin : 2px;
padding : 5px;
-moz-border-radius:10%;
letter-spacing: -2px;
font-style:italic;
	}

html

Код:
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">the</a>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">violet</a>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">maniac</a>

0

9

  • Автор: разноцветная птица;
  • здесь может быть ваша реклама за 10$
  • разноцветная птица;
  • Зарегистрирован: 2012-06-02
  • Приглашений: 0
  • Сообщений: 628
  • Уважение: +43
  • Позитив: +21
  • Пол: Женский
  • Возраст: 26 [1998-03-11]
  • Провел на форуме:
    4 дня 2 часа
  • Последний визит:
    2013-01-16 18:08:23

http://savepic.net/1747303.png
Источник: The Violet Maniac
css

Код:
a.tvm, a.tvm:active, a.tvm:link, a.tvm:visited {
color : #ffffff;
background : #000000;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
}

a.tvm:hover {
color : #000000;
background : #e8000b;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
	}






a.tvm2, a.tvm2:active, a.tvm2:link, a.tvm2:visited {
color : #ffffff;
background : #000000;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
}

a.tvm2:hover {
color : #000000;
background : #ffff08;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
	}






a.tvm3, a.tvm3:active, a.tvm3:link, a.tvm3:visited {
color : #ffffff;
background : #000000;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
}

a.tvm3:hover {
color : #000000;
background : #ff00ff;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
	}

html

Код:
<table><tr><td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">index</a></td>
<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm2" target="">index</a></td>

<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm3" target="">index</a></td>


</tr>





<tr><td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm3" target="">index</a></td>
<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">index</a></td>

<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm2" target="">index</a></td>


</tr>


<tr><td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm2" target="">index</a></td>
<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm3" target="">index</a></td>

<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">index</a></td>


</tr>




</table>

0

10

  • Автор: разноцветная птица;
  • здесь может быть ваша реклама за 10$
  • разноцветная птица;
  • Зарегистрирован: 2012-06-02
  • Приглашений: 0
  • Сообщений: 628
  • Уважение: +43
  • Позитив: +21
  • Пол: Женский
  • Возраст: 26 [1998-03-11]
  • Провел на форуме:
    4 дня 2 часа
  • Последний визит:
    2013-01-16 18:08:23

http://savepic.net/1707367.png
Источник: The Violet Maniac
css

Код:
A.navi:link, A.navi:active, A.navi:visited {background:#000000;font-family: small fonts;padding:10px;font-size: 7px;text-align:left;line-height: 7px;letter-spacing: 2px;color:#ffffff;text-transform: uppercase;display:block;width:160px;margin:1px;font-style:normal;}

A.navi:hover {background-image:url('http://s45.radikal.ru/i109/1008/c9/99903e342ce1.jpg');font-family: small fonts;padding:10px;font-size: 7px;text-align:right;line-height: 7px;letter-spacing: 2px;color:#f0f0f0;text-transform: uppercase;display:block;width:160px;margin:1px; text-decoration: none; font-style:normal;font-weight:normal;}

html

Код:
<a href="#" class="navi" target="frame">home page</a>
<a href="#" class="navi" target="frame">links</a>
<a href="#" class="navi" target="frame">contact</a>
<a href="#" class="navi" target="frame">content</a>
<a href="#" class="navi" target="frame">chat-box</a>

0

Страница: 1 2 3 4  

Вы здесь » Кот » Фишки и примочки » CSS - навигации

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