|
Меню.
|
|
| ad |
| Группа: Удаленные
| Code <div align="center"><div width="762" height="35" style=" width:762px; height:35px; background-image: url('http://artdesigns.ucoz.com/_tbkp2/menyyy.png'); color: #FFFFFF; margin-bottom:4px;"><a href="http://artdesigns.ucoz.com/"><img src="http://artdesigns.ucoz.com/img/adlo.png" onmouseover="this.src='http://artdesigns.ucoz.com/img/adlo2.png'" onmouseout="this.src='http://artdesigns.ucoz.com/img/adlo.png'" border="0" alt="lol" style="float:left;margin-left:1px;" /></a><img src="http://artdesigns.ucoz.com/img/storlo.png" onmouseover="this.src='http://artdesigns.ucoz.com/img/storlo2.png'" onmouseout="this.src='http://artdesigns.ucoz.com/img/storlo.png'" border="0" alt="" style="float:left;margin-left:1px;" /><img src="http://artdesigns.ucoz.com/img/vidlo.png" onmouseover="this.src='http://artdesigns.ucoz.com/img/vidlo2.png'" onmouseout="this.src='http://artdesigns.ucoz.com/img/vidlo.png'" border="0" alt="" style="float:left;margin-left:1px;" /><img src="http://artdesigns.ucoz.com/img/muslo.png" onmouseover="this.src='http://artdesigns.ucoz.com/img/muslo2.png'" onmouseout="this.src='http://artdesigns.ucoz.com/img/muslo.png'" border="0" alt="" style="float:left;margin-left:1px;" /><img src="http://artdesigns.ucoz.com/img/imglo.png" onmouseover="this.src='http://artdesigns.ucoz.com/img/imglo2.png'" onmouseout="this.src='http://artdesigns.ucoz.com/img/imglo.png'" border="0" alt="" style="float:left;margin-left:1px;" /><img src="http://artdesigns.ucoz.com/img/photlo.png" onmouseover="this.src='http://artdesigns.ucoz.com/img/photlo2.png'" onmouseout="this.src='http://artdesigns.ucoz.com/img/photlo.png'" border="0" alt="" style="float:left;margin-left:1px;" /><a href="http://artdesigns.ucoz.com/blog/"><img src="http://artdesigns.ucoz.com/img/bloglo.png" onmouseover="this.src='http://artdesigns.ucoz.com/img/bloglo2.png'" onmouseout="this.src='http://artdesigns.ucoz.com/img/bloglo.png'" border="0" alt="" style="float:left;margin-left:1px;" /></a><img src="http://artdesigns.ucoz.com/img/advlo.png" onmouseover="this.src='http://artdesigns.ucoz.com/img/advlo2.png'" onmouseout="this.src='http://artdesigns.ucoz.com/img/advlo.png'" border="0" alt="" style="float:left;margin-left:1px;" /></div> Помогите мне сделать такое же меню, но чтобы небыло такого длинного кода, а чтобы было на CSS. | | |
|
| Aleko |
|  Watching you Группа: Администраторы Пользователь №: 2 Сообщений: 1621 Получено оценок: 167
| Code onmouseover="this.src='http://artdesigns.ucoz.com/img/advlo2.png'" onmouseout="this.src='http://artdesigns.ucoz.com/img/advlo.png'"
Вот это везде можно заметить с помощью hover. Как сделать чтобы ховер пахал везде я уже писал в одной из тем.
| | |
|
| ad |
| Группа: Удаленные
| Ну скажем так: Code #ad1 a {
background: url(/img/adlo.png);
height: 96px;
width: 30px;
}
#ad1 a:hover {
background: url(/img/adlo2.png);
height: 96px;
width: 30px;
} Но чему это присвоить чтобы вышло точно такое же ровное, длинное, оцентрированное меню ? Диву у меня не получалось, а в li как-то тупо тож выходит. | | |
|
| Aleko |
| Watching you Группа: Администраторы Пользователь №: 2 Сообщений: 1621 Получено оценок: 167
| Я тут выкладывал скрипт пугливого меню. Посмотри как оно сверстано.
| | |
|
| ad |
| Группа: Удаленные
| Сам посмотри! Code <style> #124 {list-style:none;margin:0;padding:0;} #124 a {font:11px Arial;font-weight:bold;color:#fff;text-decoration:none;display:block;margin-top:4px;padding-top:3px;} #124 li {float:left;display:block;width:100px;height:30px;margin:0px;background:#000;text-align:center;cursor:pointer;background: url('http://artdesigns.ucoz.com/img/bloglo2.png');} #124 li:hover {background: url('http://artdesigns.ucoz.com/img/storlo2.png');} #125 li {float:left;display:block;width:100px;height:30px;margin:0px;background:#000;text-align:center;cursor:pointer;background: url('http://artdesigns.ucoz.com/img/muslo2.png');} #126 li {float:left;display:block;width:100px;height:30px;margin:0px;background:#000;text-align:center;cursor:pointer;background: url('http://artdesigns.ucoz.com/img/vidlo2.png');} #127 li {float:left;display:block;width:100px;height:30px;margin:0px;background:#000;text-align:center;cursor:pointer;background: url('http://artdesigns.ucoz.com/img/storlo2.png');} </style> <li id="124"><a href='#'>yhfdh</a></li> <li id="125"><a href='#'>fhfh</a></li> <li id="126"><a href='#'>hfh</a></li> <li id="127"><a href='#'>hh</a></li> Ничо не выходит. Ваще не отображается! | | |
|
| ad |
| Группа: Удаленные
| Прошу, помогите! Неполучается у меня! Меню не показывается.  | | |
|
| UnderShot |
| Группа: Модераторы Пользователь №: 45 Сообщений: 923 Получено оценок: 85
| Лично я так пишу менюшки:
HTML
Code <div id='nav'> <ul> <li id='item1'><a href='#'></a></li> <li id='item2'><a href='#'></a></li> <li id='item3'><a href='#'></a></li> <li id='item4'><a href='#'></a></li> </ul> </div>
CSS
Code
<style type='text/css'>
ul{list-style:none}
#nav{width:100%;height:50px;background:gray;line-height:50px}
#nav li{float:left}
#item1{width:80px;height:50px;background:url(img/blabla.gif)no-repeat;}
#item1:hover{width:80px;height:50px;background:url(img/blabla-hover.gif)no-repeat;}
</style>
И так далее...
| | |
|
| UnderShot |
| Группа: Модераторы Пользователь №: 45 Сообщений: 923 Получено оценок: 85
| p.s и у меня все работает
| | |
|
| ad |
| Группа: Удаленные
| У меня почему-то первый пункт меню отступает вправо пикселей на 30 гдет  | | |
|
| UnderShot |
| Группа: Модераторы Пользователь №: 45 Сообщений: 923 Получено оценок: 85
| ad, в самое начало: Code *{padding:0;margin:0}
| | |
|
| ad |
| Группа: Удаленные
| Спасибо, попробую дальше сделать. | | |
|
| UnderShot |
| Группа: Модераторы Пользователь №: 45 Сообщений: 923 Получено оценок: 85
| ad, пожалуйста эм... « + » - плюсег в репу)
Сообщение отредактировал UnderShot - Суббота, 24.10.2009, 14:32 | | |
|
| ad |
| Группа: Удаленные
| Оу, точно!  | | |
|
| ad |
| Группа: Удаленные
| У меня в IE6 Не отображаются пункты меню  | | |
|
| ad |
| Группа: Удаленные
| Ну так че, помогите, оно не пашет в IE. | | |
|
| vladko95 |
| Группа: Проверенные Пользователь №: 51 Сообщений: 121 Получено оценок: 6
| ad, поставь пробел перед no-repeat | | |
|
| SinuS |
|  говорун Группа: Модераторы Пользователь №: 179 Сообщений: 195 Получено оценок: 15
| ad, читай, дружище...
| | |
|
| ad |
| Группа: Удаленные
| А в IE6 робит hover ваще ? А то у меня нет vladko95, Спасибо! Хотябы показались пункты. | | |
|
| SinuS |
| говорун Группа: Модераторы Пользователь №: 179 Сообщений: 195 Получено оценок: 15
| Quote (ad) А в IE6 робит hover ваще ? А то у меня нет O_o
Нет, не робит, юзай гугл, там эта тема давным давно на многих сайтах и форумах перетерта.
| | |
|
| ad |
| Группа: Удаленные
| SinuS, Спасибо за инфу, и тебе + поставлю. Бред какой то. Зачем onmouseover включили а hover нет ? Не все майкрософтсы умники  | | |
|
| SinuS |
| говорун Группа: Модераторы Пользователь №: 179 Сообщений: 195 Получено оценок: 15
| ad, забыл уточнить, что в 6 осле псевдокласс hover работает, но только для ссылок.
| | |
|
| ad |
| Группа: Удаленные
| SinuS, Да это я уже понял. | | |
|
| UnderShot |
| Группа: Модераторы Пользователь №: 45 Сообщений: 923 Получено оценок: 85
| Quote (vladko95) ad, поставь пробел перед no-repeat
Пробелы со-о-о-всем не обязательны
ad, насчет hover - это для кого писали?
Сообщение отредактировал UnderShot - Понедельник, 26.10.2009, 11:08 | | |
|
| ad |
| Группа: Удаленные
| Не робит скрипт.  Quote (UnderShot) Пробелы со-о-о-всем не обязательны У меня вчера заработало только после пробелов. | | |
|
| UnderShot |
| Группа: Модераторы Пользователь №: 45 Сообщений: 923 Получено оценок: 85
| ad, даже незнаю... но скрипт рабочий, сам проверял
| | |
|
| ad |
| Группа: Удаленные
| | | |
|
| ad |
| Группа: Удаленные
| Че за прикол ? С самого начала так кстати. Пункты меню не нажимаются если код устроен так: Code <li id="item1"><a href="ссылка"></a></li> но нажимается, если код устроен так: Code <a href="ссылка"><li id="item1"></li></a> Очень странно, в чем дело ? | | |
|
| Aleko |
| Watching you Группа: Администраторы Пользователь №: 2 Сообщений: 1621 Получено оценок: 167
| ad, дело в том что hover работает в ие только для ссылок. Я на форуме уже выкладывал решение.
| | |
|
| SinuS |
| говорун Группа: Модераторы Пользователь №: 179 Сообщений: 195 Получено оценок: 15
| Aleko, Саш, самое интересное, что я ad это уже написал выше ad, нужно быть повнимательнее
| | |
|
|
|
| ad |
| Группа: Удаленные
| Нажатие на ссылку и hover же разные вещи | | |
|
| ad |
| Группа: Удаленные
| Я говорю что у меня не переходит на ссылку если поставить так как нужно код и ссылку, но переходит когда не так стоит код. | | |
|
| UnderShot |
| Группа: Модераторы Пользователь №: 45 Сообщений: 923 Получено оценок: 85
| ad, тогда незнаю
| | |
|
| ad |
| Группа: Удаленные
| Алеко, может ты поможеш ? Я точно знаю что ты знаеш как это решить. | | |
|
| UnderShot |
| Группа: Модераторы Пользователь №: 45 Сообщений: 923 Получено оценок: 85
| ad, так, давай по порядку, что ты хочешь сделать?
| | |
|
| ad |
| Группа: Удаленные
| Мне интересно почему ховер неробит ? Скрипт поставил после боди а стили в хэад, что я не так сделал ? | | |
|
| ad |
| Группа: Удаленные
| Все проблемы с меню решены! Всем спасибо! | | |
|
| ad |
| Группа: Удаленные
| Однако нет! Новая проблеа блин! Вот я навожу на пункт меню и появляется ховер а когда вывожу оттуда курсор то ховер остается. В чем опять дело ? | | |
|
| ad |
| Группа: Удаленные
| Эта проблема и в опере тож. | | |
|
| UnderShot |
| Группа: Модераторы Пользователь №: 45 Сообщений: 923 Получено оценок: 85
| ad, кидай код
| | |
|
| ad |
| Группа: Удаленные
| Code ul {list-style:none;padding:0;margin:0;}
#nav{width:762px;height:35px;background:url(http://artdesigns.ucoz.com/_tbkp2/menyyy.png);}
#nav li{float:left;}
#item1{width:96px;height:30px;background:url(http://artdesigns.ucoz.com/img/adlo.png) no-repeat;cursor:pointer !important;}
#item1:hover{width:96px;height:30px;background:url(http://artdesigns.ucoz.com/img/adlo2.png) no-repeat!important}
#item2{width:96px;height:30px;background:url(http://artdesigns.ucoz.com/img/storlo.png) no-repeat;margin-left:1px;}
#item2:hover{width:96px;height:30px;background:url(http://artdesigns.ucoz.com/img/storlo2.png) no-repeat;margin-left:1px;!important;}
#item3{width:96px;height:30px;background:url(http://artdesigns.ucoz.com/img/vidlo.png) no-repeat;margin-left:1px;}
#item3:hover{width:96px;height:30px;background:url(http://artdesigns.ucoz.com/img/vidlo2.png) no-repeat;margin-left:1px;!important;}
#item4{width:96px;height:30px;background:url(http://artdesigns.ucoz.com/img/muslo.png) no-repeat;margin-left:1px;}
#item4:hover{width:96px;height:30px;background:url(http://artdesigns.ucoz.com/img/muslo2.png) no-repeat;margin-left:1px;!important;}
#item5{width:96px;height:30px;background:url(http://artdesigns.ucoz.com/img/imglo.png) no-repeat;margin-left:1px;}
#item5:hover{width:96px;height:30px;background:url(http://artdesigns.ucoz.com/img/imglo2.png) no-repeat;margin-left:1px;!important;}
#item6{width:96px;height:30px;background:url(http://artdesigns.ucoz.com/img/photlo.png) no-repeat;margin-left:1px;}
#item6:hover{width:96px;height:30px;background:url(http://artdesigns.ucoz.com/img/photlo2.png) no-repeat;margin-left:1px;!important;}
#item7{width:96px;height:30px;background:url(http://artdesigns.ucoz.com/img/bloglo.png) no-repeat;margin-left:1px;}
#item7:hover{width:96px;height:30px;background:url(http://artdesigns.ucoz.com/img/bloglo2.png) no-repeat;margin-left:1px;!important;}
#item8{width:83px;height:30px;background:url(http://artdesigns.ucoz.com/img/advlo.png) no-repeat;margin-left:1px;}
#item8:hover{width:83px;height:30px;background:url(http://artdesigns.ucoz.com/img/advlo2.png) no-repeat;margin-left:1px;!important;} Code <div align="center"> <ul id="nav"> <a href="http://artdesigns.ucoz.com/"><li id="item1"></li></a> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> <li id="item6"></li> <a href="/blog/"><li id="item7"></li></a> <li id="item8"></li> </ul></div> | | |
|
| SinuS |
| говорун Группа: Модераторы Пользователь №: 179 Сообщений: 195 Получено оценок: 15
| ad, сокращай код: объединяй свойства элементов. А то до куя кода...
| | |
|
| ad |
| Группа: Удаленные
| SinuS, Я прошу помощь по поводу того что в мозилле не происходит перехода по ссылке через эту менюшку а ты мне о сокращениях говориш Сокращать потом! Когда проблем небудет, а это единственная проблема у меня сейчас. | | |
|
| SinuS |
| говорун Группа: Модераторы Пользователь №: 179 Сообщений: 195 Получено оценок: 15
| ad, это я просто подметил.
| | |
|
| UnderShot |
| Группа: Модераторы Пользователь №: 45 Сообщений: 923 Получено оценок: 85
| Море ошибок в коде... Попробуй так:
CSS
Code
<style type='text/css'>
ul{list-style:none;padding:0;margin:0;}
#nav{width:762px;height:35px;background:url(/_tbkp2/menyyy.png) no-repeat;margin:auto;}
#nav li{float:left;}
#item{width:96px;height:30px;background-repeat:no-repeat;cursor:pointer;margin-left:1px;}
.a1{background:url(/img/adlo.png);}
.a1:hover{background:url(/img/adlo2.png);}
.a2{background:url(/img/storlo.png);}
.a2:hover{background:url(/img/storlo2.png);}
.a3{background:url(/img/vidlo.png);}
.a3:hover{background:url(/img/vidlo2.png);}
.a4{background:url(/img/muslo.png);}
.a4:hover{background:url(/img/muslo2.png);}
.a5{background:url(/img/imglo.png);}
.a5:hover{background:url(/img/imglo2.png);}
.a6{background:url(/img/photlo.png);}
.a6:hover{background:url(/img/photlo2.png);}
.a7{background:url(/img/bloglo.png);}
.a7:hover{background:url(/img/bloglo2.png);}
.a8{background:url(/img/advlo.png);}
.a8:hover{background:url(/img/advlo2.png);}
</style>
HTML
Code <div id="nav"> <ul> <li id="item" class="a1"><a href="#"></a></li> <li id="item" class="a2"><a href="#"></a></li> <li id="item" class="a3"><a href="#"></a></li> <li id="item" class="a4"><a href="#"></a></li> <li id="item" class="a5"><a href="#"></a></li> <li id="item" class="a6"><a href="#"></a></li> <li id="item" class="a7"><a href="#"></a></li> <li id="item" class="a8"><a href="#"></a></li> </ul></div> Если робит, то плюс в карму)
| | |
|
| UnderShot |
| Группа: Модераторы Пользователь №: 45 Сообщений: 923 Получено оценок: 85
| p.s
Не правильно!
Code margin-left:1px;!important;
Правильно:
Code margin-left:1px !important;
| | |
|
| ad |
| Группа: Удаленные
| Такое меню корявое. Последний пункт вместо того чтобы встать после другого на 1 пиксель - уходит вниз. | | |
|
| DSC |
| Группа: Проверенные Пользователь №: 127 Сообщений: 516 Получено оценок: 41
| ad, раз тебя всё не устраивает, попробуй сам сделать, тем более ты собираешься веб дизайн студию открывать!
| | |
|
| ad |
| Группа: Удаленные
| А я что по твоему ща пытаюсь сделать ? | | |
|
| ad |
| Группа: Удаленные
| Блин и тут также, на ссылку тока так жмется Code <a href="http://artdesigns.ucoz.com/"><li id="item" class="a1"></li></a> но ни как не так: Code <li id="item" class="a1"><a href="http://artdesigns.ucoz.com/"></a></li> Незнаю как это решить. | | |
|
