Форум вебмастеров - Webmasters.BY
Новости:
 
*
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?
07 Сентябрь, 2010, 17:45:48




Страниц: 1 ... 3 4 [5]
  Печать  
Автор Тема: Выпадающее меню-как быть с пробелами между вкладками?  (Прочитано 10193 раз)
0 Пользователей и 2 Гостей смотрят эту тему.
Diver
Administrator
Гуру форума
*****

Репутация: 47
Online Online

Сообщений: 2020


Шииикарно!

OS:
Windows XP
Browser:
Firefox 3.5.4


Просмотр профиля
« Ответ #60 : 30 Октябрь, 2009, 10:46:27 »

Я то могу создать, вот только не знаю получится ли у меня туда сходить.  Huh?
Но если кто точно пойдёт, то может сам создать тему и организовать народ для совместного посещения.  Beer
Записан

Форум вебмастеров - Webmasters.BY
« Ответ #60 : 30 Октябрь, 2009, 10:46:27 »

 Записан
Luveyn
Школьник
*

Репутация: 0
Offline Offline

Сообщений: 4

OS:
Windows XP
Browser:
Firefox 3.0.15


Просмотр профиля
« Ответ #61 : 01 Декабрь, 2009, 07:56:24 »

низнала куда впихнуть:
проблема такая- я делаю меню с вкладками и выравниваю его по центру под шапку, но текст съезжается, также как и вкладки. Как мне сделать так чтобы текст был ровно в центре кнопки и вкладки ровно под кнопкой?
картинки- http://s58.radikal.ru/i161/0912/ce/eb6fb67432d9.jpg
http://i067.radikal.ru/0912/7c/b157d1121c00.jpg

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 &nbsp; &nbsp; &nbsp; <style>
 &nbsp;
 &nbsp; &nbsp; &nbsp; &nbsp;#menu{
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;list-style:none;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;padding:0;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;margin:0;
 &nbsp; &nbsp; &nbsp; &nbsp;}
 &nbsp; &nbsp; &nbsp; &nbsp;#menu li{
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;float:left;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height:34px;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;padding:0;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;margin:0;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width:80px;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 144px;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text-align:center;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;background:#0CF;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;position:relative;
 &nbsp; &nbsp; &nbsp; &nbsp;}
 &nbsp; &nbsp; &nbsp; &nbsp;#menu li ul{
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;list-style:none;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;padding:0;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;margin:0;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width:150px;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;display:none;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;position:absolute;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;left:0;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;top:20px;
 &nbsp; &nbsp; &nbsp; &nbsp;}
 &nbsp; &nbsp; &nbsp; &nbsp;#menu li ul li{
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;float:none;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height:20px;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;margin:0;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width:150px;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text-align:center;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;background:#0CF;
 &nbsp; &nbsp; &nbsp; &nbsp;}
 &nbsp; &nbsp; &nbsp; &nbsp;#menu li a{
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;display:block;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width:150px;
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height:20px;
 &nbsp; &nbsp; &nbsp; &nbsp;}
 &nbsp; &nbsp; &nbsp; &nbsp;#menu li:hover ul, #menu li.jshover ul{
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;display:block; &nbsp;
 &nbsp; &nbsp; &nbsp; &nbsp;}
 &nbsp; &nbsp; &nbsp; &nbsp;#menu li:hover, #menu li.jshover{
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;background:#F00 &nbsp;
 &nbsp; &nbsp; &nbsp; &nbsp;}
 &nbsp; </style>
 &nbsp;
 <script>
 jsHover = function() {
 var hEls = document.getElementById("menu").getElementsByTagName("li");
 for (var i=0, len=hEls.length; i<len; i++) {
 hEls[i].onmouseover=function() { this.className+=" jshover"; }
 hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
 }
 }
 if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
 </script>
</head>
<body>
 <ul id="menu">
 <li><a href="index/0-1">ГЛАВНАЯ</a></li>
 <li>
 <a href="#">МОИ СОБАКИ</a>
 <ul>
 <li><a href="index/0-21">Нора</a></li>
 <li><a href="index/0-22">Лина</a></li>
 </ul>
 </li>
 <li>
 <a href="#">ФРИЗБИ</a>
 <ul>
 <li><a href="index/0-23">СЛП</a></li>
 <li><a href="index/0-24">Дог-фризби</a></li>
 <li><a href="index/0-25">Виды игр с дисками</a></li>
 <li><a href="index/0-29">Рейтинг</a></li>
 </ul>
 </li>
 <li><a href="#">ПОСЛУШАНИЕ</a>
 <ul>
 <li>
 <a href="index/0-28">Дрессировка</a></li>
 </ul>
 </li>
 <li><a href="photo">ФОТО</a></li>
 <li>
 <a href="#">ДИСКИ</a>
 <ul>
 <li><a href="/index/0-26">Диски</a></li>
 <li><a href="index/0-27">Кликеры</a></li>
 </ul>
 </li>
 <li><a href="index/0-19">УСЛУГИ</a></li>
 <li><a href="index/0-20">ССЫЛКИ</a></li>
 <li><a href="index/0-3">КОНТАКТЫ</a></li>
 </ul>
</body>
</html>
Записан
Diver
Administrator
Гуру форума
*****

Репутация: 47
Online Online

Сообщений: 2020


Шииикарно!

OS:
Windows XP
Browser:
Firefox 3.5.5


Просмотр профиля
« Ответ #62 : 01 Декабрь, 2009, 11:02:56 »

попробуйте вот так
Код
(html4strict):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 <style>
 
 #menu{
  list-style:none;
  padding:0;
  margin:0 auto;
width:1080px;
 }
 #menu li{
  float:left;
  height:22px;
  padding:0;
  margin:0;
  text-align:center;
  background:#0CF;
  position:relative;
 }
 #menu li ul{
  list-style:none;
  padding:0;
  margin:0;
  width:150px;
  display:none;
  position:absolute;
  left:0;
  top:20px;
 }
 #menu li ul li{
  float:none;
  height:20px;
  margin:0;
  width:150px;
  text-align:center;
  background:#0CF;
 }
 #menu li a{
  display:block;
  width:120px;
  height:20px;
 }
 #menu li:hover ul, #menu li.jshover ul{
  display:block;
 }
 #menu li:hover, #menu li.jshover{
  background:#F00
 }
</style>
 
<script>
jsHover = function() {
var hEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=0, len=hEls.length; i<len; i++) {
hEls[i].onmouseover=function() { this.className+=" jshover"; }
hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
}
}
if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
</script>

</head>
<body>
<ul id="menu">
<li><a href="index/0-1">ГЛАВНАЯ</a></li>
<li>
<a href="#">МОИ СОБАКИ</a>
<ul>
<li><a href="index/0-21">Нора</a></li>
<li><a href="index/0-22">Лина</a></li>
</ul>
</li>
<li>
<a href="#">ФРИЗБИ</a>
<ul>
<li><a href="index/0-23">СЛП</a></li>
<li><a href="index/0-24">Дог-фризби</a></li>
<li><a href="index/0-25">Виды игр с дисками</a></li>
<li><a href="index/0-29">Рейтинг</a></li>
</ul>
</li>
<li><a href="#">ПОСЛУШАНИЕ</a>
<ul>
<li>
<a href="index/0-28">Дрессировка</a></li>
</ul>
</li>
<li><a href="photo">ФОТО</a></li>
<li>
<a href="#">ДИСКИ</a>
<ul>
<li><a href="/index/0-26">Диски</a></li>
<li><a href="index/0-27">Кликеры</a></li>
</ul>
</li>
<li><a href="index/0-19">УСЛУГИ</a></li>
<li><a href="index/0-20">ССЫЛКИ</a></li>
<li><a href="index/0-3">КОНТАКТЫ</a></li>
</ul>
</body>
</html>
 
end code
« Последнее редактирование: 01 Декабрь, 2009, 11:04:31 от Diver » Записан

Luveyn
Школьник
*

Репутация: 0
Offline Offline

Сообщений: 4

OS:
Windows XP
Browser:
Firefox 3.0.15


Просмотр профиля
« Ответ #63 : 01 Декабрь, 2009, 17:29:47 »

Не получилось, но я по-другому попробовала меню сделать и возникла другая проблема (готова биться об стенку):
С левой стороны меню ровно под шапкой, а справой ненужная часть которую я убрать немогу:
http://s50.radikal.ru/i127/0912/ce/d1a3e19381ef.jpg

CSS:
Код:
.preload1 {background: url(/img/three_1.gif);}
.preload2 {background: url(/img/three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; width: none; height:38px; background:url("http://i549.photobucket.com/albums/ii373/Fieliss/1.jpg") repeat-x; position:relative; left: 144px; right: 144px; font-family:Tahoma, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#2c1709; text-decoration:none; font-size:9px; font-weight:bold; padding:0 0 0 0px; cursor:pointer;background: url(/img/three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(/img/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 12px 0 12px; height:35px; background: url(/img/three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(/img/three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(/img/three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(/img/three_1a.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:0px; top:38px; background: #8ed37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #8ed37e;}
#nav li ul.sub li a.fly
{background:#8ed37e url(/img/arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3c812c; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3c812c url(/img/arrow_over.gif) 80px 6px no-repeat; color:#fff;}


#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#41812c url(/img/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#88d37e url(/img/arrow.gif) 80px 6px no-repeat; color:#000; border-color:#88d37e;}
/* CSS Document */
ul#cssmenu {
 width:350px;
 margin: 0;
 border: 0 none;
 padding: 0;
 list-style: none;
 background: #003366;
 height: 30px;
 font: bold 12px/28px Tahoma, Arial;
 border-left:#003366 1px solid;
}

ul#cssmenu li {
 margin: 0;
 border: 0 none;
 padding: 0;
 float: left;
 display: inline;
 list-style: none;
 position: relative;
 height: 30px;
}

ul#cssmenu ul {
 margin: 0;
 border: 0 none;
 padding: 0;
 width: 160px;
 list-style: none;
 display: none;
 position: absolute;
 top: 30px;
 left: 0;
}

ul#cssmenu ul:after {
 clear: both;
 display: block;
 font: 1px/0px serif;
 content: ".";
 height: 0;
 visibility: hidden;
}

ul#cssmenu ul li {
 width: 150px;
 float: left;
 display: block !important;
 display: inline;
}
Записан
Diver
Administrator
Гуру форума
*****

Репутация: 47
Online Online

Сообщений: 2020


Шииикарно!

OS:
Windows XP
Browser:
Firefox 3.5.5


Просмотр профиля
« Ответ #64 : 01 Декабрь, 2009, 17:37:09 »

как это не получилось?
я проверял. всё отображалось корректно.

по поводу второго примера, то дайте лучше ссылку на страницу

Записан

Luveyn
Школьник
*

Репутация: 0
Offline Offline

Сообщений: 4

OS:
Windows XP
Browser:
Firefox 3.0.16


Просмотр профиля
« Ответ #65 : 29 Декабрь, 2009, 17:27:59 »

Такая проблема:
Меню становится длиньше или короче в зависимости от разрешения экрана:
http://s43.radikal.ru/i100/0912/8b/3d957b183b05.jpg
вот страница: http://mddc.ucoz.ru

как сделать так чтобы при любом разрешении меню оставалось одного размера, нормального.
Записан
Luveyn
Школьник
*

Репутация: 0
Offline Offline

Сообщений: 4

OS:
Windows XP
Browser:
Firefox 3.0.16


Просмотр профиля
« Ответ #66 : 29 Декабрь, 2009, 17:29:28 »

код:

Код:
<span class="preload1"></span>
 <span class="preload2"></span>
 <ul id="nav">
 <li class="top"><a href="index/0-1" class="top_link"><span>ГЛАВНАЯ</span></a></li>
 <li class="top"><a href="" id="products" class="top_link"><span class="down">МОИ СОБАКИ</span></a>
 <ul class="sub">
 <li><a href="index/0-21">Нора</a></li>
 <li><a href="ndex/0-22">Лина</a></li>
 </ul></li>
 <li class="top"><a href="" id="services" class="top_link"><span class="down">ФРИЗБИ</span></a>
 <ul class="sub">
 <li><a href="index/0-23">СЛП</a></li>
 <li><a href="index/0-24">Дог-фризби</a></li>
 <li><a href="index/0-25">Виды игр
 с дисками</a></li>
 <li><a href="index/0-29">Рейтинг</a></li>
 </ul>
 </li>
 <li class="top"><a href="index/0-9" class="top_link"><span class="down">ПОСЛУШАНИЕ</span></a>
</li>
 <li class="top"><a href="" class="top_link"><span>ФОТО</span></a></li>
 <li class="top"><a href="" id="products" class="top_link"><span class="down">ДИСКИ</span></a>
 <ul class="sub">
 <li><a href="index/0-26">Диски</a></li>
 <li><a href="ndex/0-27">Кликеры</a></li>
 </ul></li>
 <li class="top"><a href="" id="products" class="top_link"><span class="down">УСЛУГИ</span></a>
 <ul class="sub">
 <li><a href="index/0-28">Дрессировка</a></li>
 </ul></li>
<li class="top"><a href="index/0-20" class="top_link"><span>ССЫЛКИ</span></a></li>
 <li class="top"><a href="index/0-3" class="top_link"><span>КОНТАКТЫ</span></a></li>
Записан
Diver
Administrator
Гуру форума
*****

Репутация: 47
Online Online

Сообщений: 2020


Шииикарно!

OS:
Windows XP
Browser:
Firefox 3.5.5


Просмотр профиля
« Ответ #67 : 29 Декабрь, 2009, 17:40:06 »

мдя какой у вас грязный код.. там для меню ширина не указана. укажите ширину.
и не забудьте добавить закрывающий тег </ul> для меню
Записан

Форум вебмастеров - Webmasters.BY
   

 Записан
Страниц: 1 ... 3 4 [5]
  Печать  
 
Перейти в:  

Ramblers Top100 Ramblers Top100 Powered by SMF 1.1.11 | SMF © 2006, Simple Machines LLC | Sitemap