Перейти к содержимому


Фотография
- - - - -

Создание бокового меню


  • Закрытая тема Тема закрыта
Сообщений в теме: 5

#1 Оффлайн   jekonya

    Пользователь


  • Пользователи
  • Репутация
    0
    • Cообщений: 15
    • Форум:3.2.3

Отправлено 10 Июнь 2012 - 09:30

Здравствуйте. В общем хочу создать простенькое боковое меню, ипользуя хук для создание дополнительных блоков. В общем меню сделал на HTML+CSS. Ставлю его в блок, оно отображается, все хорошо. Но на всем форуме ссылки подстраиваются под этот css. К посу прикрепил изображение.

Сам код меню

<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="menu.css">
  <title>hover</title>
</head>
<body>
  <ul class="menu">
   <li><a href="ссылка.html">Генератор ников</a></li>
  <li><a href="ссылка.html">[B]контакте</a></li>
<li><a href="ссылка.html">You Tube</a></li>
   <li><a href="ссылка.html">Галерея</a></li>
   <li><a href="ссылка.html">>UCP</a></li>
  <li><a href="ссылка.html">Vip</a></li>

</body>
</html>

CSS
ul {
	width: 250px; /* Ширина меню */
	list-style: none; /* Для списка убираем маркеры */
	margin: 0; /* Нет отступов вокруг */
	padding: 0; /* Убираем поля вокруг текста */
	font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
	font-size: 13pt; /* Размер названий в пункте меню */
   }
  
   li a {
	display: block; /* Ссылка как блочный элемент */
	padding: 5px; /* Поля вокруг надписи */
	text-decoration: none; /* Подчеркивание у ссылок убираем */
	color: #666; /* Цвет текста */
	border: 2px solid #ccc;/* Рамка вокруг пунктов меню */
	background-color: #e5e5e5; /* Цвет фона */
	border-bottom: none; /* Границу снизу не проводим */
   }
   li a:hover {
	color: #ffe; /* Цвет текста активного пункта */
	background-color: #3a3a3a; /* Цвет фона активного пункта */
   }

   .brd {
	border-bottom: 2px solid #ccc; /* Линия снизу */
   }

Прикрепленные файлы


  • 0

Заработок и обучение заработку

#2 Оффлайн   KuroKy

    Постоялец


  • Пользователи
  • Репутация
    139
    • Cообщений: 312
    • Форум:3.3.х
    • Город:Киев

Отправлено 10 Июнь 2012 - 11:18

уууу, конечно все будет криво, задайте уникальные классы ссылкам.
  • 0

#3 Оффлайн   jekonya

    Пользователь


  • Пользователи
  • Репутация
    0
    • Cообщений: 15
    • Форум:3.2.3

Отправлено 10 Июнь 2012 - 11:34

Эм... А как это сделать? Подскажите пожалуйста. А то меню делал по уроку кажется...
  • 0

#4 Оффлайн   KuroKy

    Постоялец


  • Пользователи
  • Репутация
    139
    • Cообщений: 312
    • Форум:3.3.х
    • Город:Киев

Отправлено 10 Июнь 2012 - 11:51

Вот такой код сделайте в блоке:
  <ul class="vertmenu">
   <li><a href="ссылка.html">Генератор ников</a></li>
   <li><a href="ссылка.html">[B]контакте</a></li>
   <li><a href="ссылка.html">You Tube</a></li>
   <li><a href="ссылка.html">Галерея</a></li>
   <li><a href="ссылка.html">>UCP</a></li>
   <li><a href="ссылка.html">Vip</a></li>
  </ul>

А вот этот css закиньте в IPBStyles.css

.vertmenu ul {
		width: 250px; /* Ширина меню */
		list-style: none; /* Для списка убираем маркеры */
		margin: 0; /* Нет отступов вокруг */
		padding: 0; /* Убираем поля вокруг текста */
		font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
		font-size: 13pt; /* Размер названий в пункте меню */
   }
  
.vertmenu a {
		display: block; /* Ссылка как блочный элемент */
		padding: 5px; /* Поля вокруг надписи */
		text-decoration: none; /* Подчеркивание у ссылок убираем */
		color: #666; /* Цвет текста */
		border: 2px solid #ccc;/* Рамка вокруг пунктов меню */
		background-color: #e5e5e5; /* Цвет фона */
		border-bottom: none; /* Границу снизу не проводим */
   }
.vertmenu a:hover {
		color: #ffe; /* Цвет текста активного пункта */
		background-color: #3a3a3a; /* Цвет фона активного пункта */
   }


После этого все у вас встанет отлично
  • 1

#5 Оффлайн   jekonya

    Пользователь


  • Пользователи
  • Репутация
    0
    • Cообщений: 15
    • Форум:3.2.3

Отправлено 10 Июнь 2012 - 11:56

Спасибо, снова помогли =) Можно закрывать +)
  • 0

#6 Оффлайн   KuroKy

    Постоялец


  • Пользователи
  • Репутация
    139
    • Cообщений: 312
    • Форум:3.3.х
    • Город:Киев

Отправлено 10 Июнь 2012 - 12:16

Автоматически сформированное сообщение.

Тема закрыта Администратором форума IpbZona.ru

Причина: Проблема решена

Если вы не согласны с закрытием темы, то можете обратиться к администратору.

С наилучшими пожеланиями
IpbZona.ru Поддержка форума IPB
  • 0