Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 26.02.2010, 20:16   #1
Winlook
Пользователь
 
Регистрация: 14.11.2009
Сообщений: 56
По умолчанию Боковое меню как вконтакте.

Понадобилось вот реализовать на сайте такое же боковое меню, как на vkontakte.ru

При наведении на ссылку, налаживается цвет

Код:
#nav li#myprofile a.edit:hover {
 background: #EAEEF2;
 color:#36638E;
 border-left:0px;
}

#nav li a:hover,
#nav li#myprofile a:hover {
  background: #DAE1E8;
  color:#36638E;
  border-top: 1px solid #CAD1D9;
  text-decoration:none;
}

А сама ссылка имеет вид

Код:
<li id="myprofile" class="clearFix">

<li><a href="/audio.php">Мои Аудиозаписи</a></li>


Но дело в том, что у меня почему-то не работает. В CSS я чайник, собственно

Вот на всякий случай сбрасываю css, в который я пытаюсь внедрить сию возможность, а также вариант ссылки, который используется в данный момент

Надеюсь на вашу помощь))

Вариант ссылки
Код:
<li><a href=options.php?optionsech=1 accesskey=2>Мои Настройки</a></li>

CSS

Цитата:
.Red a,.Red a:link,.Red a:hover,.Red a:active,.Red a:visited{color:white}

body {
margin: 0;
padding: 0;
background: #FFFFFF url(images/img1.jpg) repeat-x;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
color: #6B6B6B;




}

h1, h2, h3, h5, h6 { /*Маргин аш1 изменен*/
margin: 0;
}

h1 {

letter-spacing: 0px;
font-size: 11px;
font-weight: normal;

}

h1 em {

font-style: normal;
}

h3, h2 {
height: 25px;
background: #0077A7 url(images/img3.gif) repeat-x left bottom;
padding: 11px 0 0 20px;
text-transform: lowercase;
font-size: 11px;
color: #FFFFFF;
}

p, ol, ul {
line-height: 180%;
}

ul {
margin-left: 0;
padding-left: 0;
list-style-position: inside;
}

a {
color: #6B6B6B;
border:none;
}

a:hover {
color: #838B8B

}








a:hover {
text-decoration: none;
}

.image {
float: left;
margin: 0 20px 0 0;
}

.bg1 {
padding: 0 20px 20px 20px;
border-top: 1px solid #FFFFFF;
background: #FFFFFF url(images/img4.gif) repeat-x;
}

.bg2 {
padding: 20px;
border-top: 1px solid #CBE1EF;
background: #FFFFFF url(images/img4.gif) repeat-x;
}

/* Header */

#header {
width: 900px;
height: 160px;
margin: 0 auto;
}

#header * {
margin: 0;
padding: 0;
text-transform: none; /*Регистр меню*/
color: #FFFFFF;
}

#header h1 {
float: left;
padding: 70px 0 0 10px;
font-size: 33px;
}

#header h2 {
float: left;
padding: 91px 0 0 10px;
font-size: 11px;
font-weight: normal;
}

#header ul {
float: right;
margin: 0;
padding: 93px 0 0 0;
list-style: none;
}

#header li {
display: inline;
}

#header a {
display: block;
float: left;
height: 25px;
margin: 0 0 0 8px;
padding: 12px 12px 0 12px; /*ширина меню, по умолчанию 1*/
background: #ABBA47 url(images/img2.gif) repeat-x;
text-decoration: none;
font-weight: bold;
}

/* Content */

#content {
width: 892px;
margin: 0 auto;
}

#colOne {
float: left;
width: 186px;
}

#colOne ul {
padding-left: 0;
list-style: none none outside;
}

#colOne li {
padding: 5px 0;
background: url(images/img6.gif) repeat-x;
}

#colOne li.first {
background: none;
}

#colTwo {
float: right;
width: 686px;
}

/* Footer */

#footer {
clear: both;
width: 892px;
margin: 0 auto;
padding: 30px 0;
background: url(images/img7.gif) repeat-x
}

#footer p {
margin: 0;
text-align: center;
text-transform: lowercase;
}
Winlook вне форума Ответить с цитированием
Старый 26.02.2010, 23:04   #2
Magneto
Форумчанин
 
Аватар для Magneto
 
Регистрация: 10.02.2008
Сообщений: 178
По умолчанию

Код:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Меню как в vkontakte.ru</title>
<style type="text/css">
*{
	margin:0px;
	padding:0px;
	border:none;}

body{
	font-size:11px;
	font-family:tahoma, verdana, arial, sans-serif;}

#menu{
	width:120px;
	margin:100px 0 0 200px;}

ul{
	font-size:1em;
	list-style:none;}

li a{
	display:block;
	color:#2b587a;
	text-decoration:none;
	padding:3px 0 3px 6px;
	border-top:1px solid #fff;}

li a:hover{
	color:#36638e;
	background:#dae1e8;
	text-decoration:none;
	border-top:1px solid #cad1d9;}

#line{
	margin-top:3px;
	padding-top:3px;
	border-top:1px solid #ccc;}
</style>
</head>
<body>
<div id="menu">
	<ul>
		<li><a href="#">Моя Страница</a></li>
		<li><a href="#">Мои Друзья</a></li>
		<li><a href="#">Мои Фотографии</a></li>
		<li><a href="#">Мои Видеозаписи</a></li>
		<li><a href="#">Мои Аудиозаписи</a></li>
		<li><a href="#">Мои Сообщения</a></li>
		<li><a href="#">Мои Заметки</a></li>
		<li><a href="#">Мои Группы</a></li>
		<li><a href="#">Мои Встречи</a></li>
		<li><a href="#">Мои Новости</a></li>
		<li><a href="#">Мои Закладки</a></li>
		<li><a href="#">Мои Настройки</a></li>
	<div id="line"></div>
		<li><a href="#">Приложения</a></li>
		<li><a href="#">Вопросы</a></li>
		<li><a href="#">Объявления</a></li>
	</ul>
</div> 
</body>
</html>
Magneto вне форума Ответить с цитированием
Старый 27.02.2010, 00:41   #3
Winlook
Пользователь
 
Регистрация: 14.11.2009
Сообщений: 56
По умолчанию

Спасибо)))
Winlook вне форума Ответить с цитированием
Старый 24.05.2010, 22:40   #4
V-L-A-D
Новичок
Джуниор
 
Регистрация: 24.05.2010
Сообщений: 2
По умолчанию ...

Класс! Только у меня почему-то не пошёл русский язык,вместо русских букв в меню отображается знак: �
Помогите,плииз!
V-L-A-D вне форума Ответить с цитированием
Старый 25.05.2010, 00:23   #5
stenl1
Форумчанин
 
Аватар для stenl1
 
Регистрация: 26.06.2009
Сообщений: 354
По умолчанию

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

Попробуй так
stenl1 вне форума Ответить с цитированием
Старый 25.05.2010, 13:21   #6
V-L-A-D
Новичок
Джуниор
 
Регистрация: 24.05.2010
Сообщений: 2
По умолчанию

Спасибо! Заработало!
V-L-A-D вне форума Ответить с цитированием
Старый 20.07.2010, 22:37   #7
moldwest
Новичок
Джуниор
 
Регистрация: 20.07.2010
Сообщений: 1
По умолчанию

Помогите пожалуйста с этим мену для vldpersonals 2.5.6
moldwest вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
И сново sendMessage =) Как нажать пункт верхнего меню и меню правой кнопки? TwiX Win Api 9 15.10.2009 01:57
вКонтакте. Как заглушить referer? weiss Софт 11 28.06.2009 08:53
Меню с Items в виде набора Bitmap (как меню редактирования в Word'е) chandrasecar Мультимедиа в Delphi 7 14.01.2009 09:20