<MyRusakov.ru />

Создание и раскрутка сайта от А до Я

Создание и раскрутка сайта от А до Я

Видеокурс "Создание и Раскрутка сайта от А до Я" - это 246 видеоуроков общей продолжительностью более 50-ти часов по теме создания, размещения в Интернете и раскрутке сайта.

В уроке рассмотрены следующие необходимые любому профессиональному Web-мастеру языки: HTML, CSS, JavaScript, PHP, SQL (с использованием MySQL) и XML.

Помимо этого в Видеокурсе рассматривается самая популярная система управления контентом - Joomla.

Также в Видеокурсе "Создание и Раскрутка сайта от А до Я" показывается весь процесс создания реального сайта - MyRusakov.ru. Затем демонстрируется его размещение в Интернете, а также последующая раскрутка. Всё это записывается, и Вам остаётся лишь просто повторить, чтобы стать владельцем своего собственного сайта!

И, наконец, почти к каждому уроку идут упражнения, которые позволяют закрепить полученные знания из урока уже на практике.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

Замена фона у пункта меню
19.12.2011 19:32:53 Замена фона у пункта меню Сообщение #1
sarcodin

sarcodin

Эксперт

Эксперт

Дата регистрации:
30.09.2011 00:53:49

Сообщений: 128

Как сделать чтобы у пункта меню при наведение на него менялся фон вдоль, а не только фон надписи, как у вас наводишь на пункт меню и у него фон меняется.
Профиль Ответить
19.12.2011 19:34:30 Замена фона у пункта меню Сообщение #2
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Для этого содержимое этого пункта должно быть блочным элементом. Это может быть обычная ссылка со свойством display: block;
Профиль Ответить
07.01.2012 16:32:55 Замена фона у пункта меню Сообщение #3
Быдлокодер

Быдлокодер

Освоившийся

Освоившийся

Дата регистрации:
23.12.2011 16:14:57

Сообщений: 20

Тоже кое-что хочу заменить. Вот код <!--[if IE 6]>
<script type="text/javascript">
ie6Hover = function() {
var hEls = document.getElementById("men".getElementsByTagName("LI";
for (var i=0, len=hEls.length; i<len; i++) {
hEls[i].onmouseover=function() { this.className+=" ie6hover"; }
hEls[i].onmouseout=function() { this.className=this.className.replace(" ie6hover", ""; }
}
}
if (window.attachEvent && navigator.userAgent.indexOf("Opera"==-1) window.attachEvent("onload", ie6Hover);

</script>
<![endif]-->

<style type="text/css">

#men, #men ul{
list-style:none;
margin:0;
padding:0;
background-color: #444444;
font:12px/28px Verdana, Arial, Helvetica, sans-serif;
}
#men{
height:28px;
width:121px;
border:1px solid #000;
}
#men li{
float:left;
position:relative;
}
#men li:hover, #men li.ie6hover{
background-color: #333;
}
#men a{
display:block;
width:80px;
color:#fff;
padding:0 20px;
text-align:center;
text-decoration:none;
border-right:1px solid #000;
}
#men a:hover{
background-color:#ccc;
color:#000;
}
#men ul{
border:1px solid #000;
border-top:0;
border-bottom:0;
visibility:hidden;
width:118px;
position:absolute;
top:28px;
left:0;
}
#men ul a{
border:0;
border-bottom:1px solid #000;
width:78px;
}
#men li:hover ul, #men li.ie6hover ul{visibility:visible;}

#men li:hover li ul, #men li.ie6hover li ul{
border-top:1px solid #000;
top:-1px;
left:118px;
visibility:hidden;
}
#men li:hover li:hover ul, #men li.ie6hover li.ie6hover ul{
visibility:visible;
}



</style>

</head>
<body>

<ul id="men">

<li><a href="#"><b>Это нечто</b></a>
<ul>
<li><a href="#">Часть1</a></li>
<li><a href="#">Часть2</a>
<ul>
<li><a href="#">чего-то</a></li>
<li><a href="#">Му-ха-ха</a></li>

<li><a href="#">Фрагмент</a></li>
</ul>
</li>
<li><a href="#">Часть3</a></li>
</ul>
</li>

</ul>

</body>
</html>

Как-бы мне поменять стили "Это нечто", привязать индивидуальное оформление именно этому блоку? Сейчас, когда этот пункт активен, у него фон #333, шрифт как везде и т.д. Я могу добавить туда тег <b> (<li><a href="#"><b>Это нечто</b></a> и к нему привязать какие-либо стили, но тогда они распространяются только на текст, а мне нужно на весь блок. Хочу изменить фон, рамку, шрифт, его цвет и размер. И так же хочу, чтобы когда "Это нечто" активно, там так же работали другие стили. Как бы это сделать?
Профиль Ответить
07.01.2012 19:26:53 Замена фона у пункта меню Сообщение #4
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Очень просто. Добавьте атрибут id к нужному блоку. И для этого id задавайте персональные стили. А чтобы при наведении менялись стили, делайте примерно так:
#name_id:hover {
color: #f0f;
}
Профиль Ответить
07.01.2012 22:31:52 Замена фона у пункта меню Сообщение #5
Быдлокодер

Быдлокодер

Освоившийся

Освоившийся

Дата регистрации:
23.12.2011 16:14:57

Сообщений: 20

Так ведь нужный блок родительский для всех остальных. Вот, выделил нужный блок, которому необходимо придать индивидуальные стили. Если сунуть id='name_id' в <li>, остальные блоки наследуют его стиль.
<ul id="men">

<li><a href="#"><b>Это нечто</b></a>
<ul>
<li><a href="#">Часть1</a></li>
<li><a href="#">Часть2</a>
<ul>
<li><a href="#">чего-то</a></li>
<li><a href="#">Му-ха-ха</a></li>

<li><a href="#">Фрагмент</a></li>
</ul>
</li>
<li><a href="#">Часть3</a></li>
</ul>
</li>

</ul>

Раньше пользовался этим меню http://www.cssplay.co.uk/menus/dd_valid.html
Как видите, DEMOS фиолетовый, а будучи активным - синий. Причём вложенные в него файлы серые, при наведении мыши становятся бирюзовые что ли.. При этом если в подпункте меню вложены подпункты следующих уровней, то он (напр. HOVER/CLICK)зелёный. С цветами тут можно делать вообще что угодно. С ie6 тут борются без джаваскрипта, одним css + условные комментарии, как следствие файл css тяжёлый и сложный. Весь код можно увидеть здесь http://www.cssplay.co.uk/menus/css/dropdown.txt
сss:
http://www.cssplay.co.uk/menus/css/dropdown.css
http://www.cssplay.co.uk/menus/css/dropdown_ie.css
Собственно, пытаюсь перевести сайт на php. Меню выводится нормально, но корректно отобразить все условные комментарии мне не удалось и как следствие в ie меню не работает. Если бы получилась вырезать из css всё, что относится к ie, прикрутил бы джаваскрипт и радовался, но я там не смог разобраться.
Вот, ищу альтернативу с теми же возможностями.
Профиль Ответить
07.01.2012 22:58:35 Замена фона у пункта меню Сообщение #6
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Для дочерних элементов переопределяйте стиль с помощью контекстных селекторов.
Профиль Ответить
08.01.2012 10:27:12 Замена фона у пункта меню Сообщение #7
Быдлокодер

Быдлокодер

Освоившийся

Освоившийся

Дата регистрации:
23.12.2011 16:14:57

Сообщений: 20

Пробовал, но я в них запутался %)
К тому же фон дочерних блоков полупрозрачный и по-этому сквозь него проступает фон родителя...
Профиль Ответить
08.01.2012 22:39:27 Замена фона у пункта меню Сообщение #8
Быдлокодер

Быдлокодер

Освоившийся

Освоившийся

Дата регистрации:
23.12.2011 16:14:57

Сообщений: 20

Собственно требуется получить что-то типа этого, но без условных комментариев ie в списке.
Профиль Ответить
08.01.2012 23:19:26 Замена фона у пункта меню Сообщение #9
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Я напишу статью про выпадающее меню в пятницу, но уже дорабатывать его Вам придётся самостоятельно.
Профиль Ответить
10.01.2012 14:00:48 Замена фона у пункта меню Сообщение #10
Быдлокодер

Быдлокодер

Освоившийся

Освоившийся

Дата регистрации:
23.12.2011 16:14:57

Сообщений: 20

Спасибо, но я до пятницы не дотерпел: http://menu.nextmail.ru/new%201.html
Проблема, как ч писал выше, в том, что даже если дочерним элементам задать свой фон, если он полупрозрачный, сквозь него таки проступает фон родителя. Проблема решена заданием фона заданной ширины-высоты div, в кот. меню:
.menu_v {width:324px; height:22px; background:#7B0C00; position:relative;} А уж дальше даём стили всему остальному.
Статей "как писать элемантарное выпадающее меню" пруд пруди (от, http://seodon.ru/primery/html-css/navigation/vypadayushchee-gorizontalnoe-menu.php), даже видеокурсы коротенькие встречаются, но все они не дают универсального алгоритма создания меню, а только описывают частный примитивный случай. А в меню - простор для фантазии, каких их только не бывает. Можно посмотреть на том же http://www.cssplay.co.uk
Вот если б "сперва делаем список", потом "убираем маркеры и подчёркивания", "сдвигаем куда вам угодно и на какую ширину требуется подпункты", "добавляем какие вам угодно стили к оформлению", "оформляем стили активных тегов", "последний штрих - прячем вложенное, чтобы оно выскакивало только при наведении мышкой". И табличку типа этого: http://phpcss.ru/v_menu.php приложить.
.menu_v свойство дива
.menu_v ul свойство списка внутри дива
.menu_v ul li свойство каждой строки списка внутри дива (МЕНЮ1)
.menu_v ul li a свойство ссылок внутри строки списка который внутри списка который внутри дива (МЕНЮ1)
.menu_v ul li ul свойство списка который является строкой внутри списка который внутри дива
.menu_v ul li ul li и т.д. и т.п. строка МЕНЮ2
.menu_v ul li ul li a и т.д. и т.п. ссылка МЕНЮ2
.menu_v ul li ul li ul и т.д. и т.п.
.menu_v ul li ul li ul li и т.д. и т.п. строка МЕНЮ3
.menu_v ul li ul li ul li a и т.д. и т.п. ссылка МЕНЮ3

В принципе на том сайте правильный подход "главное - это и это, а стили сами придумаете, не маленькие" Плюс рассказать о засадах с увеличивающейся шириной при добавлении рамок, др. распространённых проблемах.
Профиль Ответить