VPF::Промогите с версткой меню - Форум программистов

Prof

Дата 7.7.2007, 11:15 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 182
Регистрация: 25.9.2005

Репутация: нет
Всего: 2

Собственно сабж.
Помогите разобраться, почему в IE и FF отображается все нормально, а в Опере все нафиг
съезжает в одну колонку?

Даю ссылку на проект - http://intinity.org/ind/
И даю код smile

файл стилей:

Код


/* Root = Horizontal, Secondary = Vertical */

ul#navmenu {
  margin: 0;
  border: 0 none;
  padding-left: 8.2em;
  padding-top: 2.95em;
  width: 865px; /*For KHTML*/
  list-style: none;
  height: 21px;
}

ul#navmenu li {
    margin: 0;
    border: 0 none;
    padding: 0em;
    float: left; /*For Gecko*/
    display: inline;
    list-style: none;
    position: relative;
    height: 21px;
}

ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 300px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}

ul#navmenu ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu ul li {
  width: 225px;
  float: left; /*For IE 7 lack of compliance*/
  display: block;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu a {
  border: 0px solid #FFF;
  border-right-color: #FFF;
  border-bottom-color: #FFF;
  padding: 0 6px;
  float: none; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #FFF;
  color: #D50B10;
  font: 21px Arial;
  text-decoration: none;
  height: 40;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
  background: #DADADA;
  color: #D50B10;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  float: none;
  background: #EEE;
  color: #D50B10;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  background: #CCC;
  color: #D50B10;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 150px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
  display: block;
}

Файл яваскрипта:

Код


navHover = function() {
    var lis = document.getElementById("navmenu").getElementsByTagName("LI");
    for (var i=0; i<lis.length; i++) {
        lis[i].onmouseover=function() {
            this.className+=" iehover";
        }
        lis[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" iehover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", navHover);

Ну и файл Index.html:

Код


<!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=windows-1251" />
<title>CSS Menu - Horizontal</title>
<style type="text/css">
<!--
@import"dhtml-horiz.css";
-->

h1 {
font: bold 16px Arial, Helvetica, sans-serif;
}

p {
font: 11px Arial, Helvetica, sans-serif;
}

a {
color: #900;
text-decoration: none;
}

a:hover {
background: #900;
color: #FFF;
}
</style>
<!--[if gte IE 5.5]>
<script language="JavaScript" src="dhtml.js" type="text/JavaScript"></script>
<![endif]-->
</head>
<body>
<table width="865" height="101" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top" style="background-image:url(images_menu/top.jpg); background-repeat:no-repeat"><ul id="navmenu">
  <li><a href="#">Главная</a></li><img src="images_menu/pp.gif" alt=" " width="30" height="20" />
  <li><a href="#">Illy Shop</a></li><img src="images_menu/pp.gif" alt=" " width="30" height="20" />
  <li><a href="#">О компании</a>
    <ul>
      <li><a href="#">Индустрия кофе</a></li>
      <li><a href="#">Вакансии</a></li>
      <li><a href="#">Illy в супермаркетах</a></li>
    </ul></li><img src="images_menu/pp.gif" alt=" " width="30" height="20" />
  <li><a href="#">Контакты</a></li><img src="images_menu/pp.gif" alt=" " width="30" height="20" />
  <li><a href="#">Прайс-лист</a></li></ul></td>
  </tr>
</table>
</body>
</html>

Это сообщение отредактировал(а) Prof - 7.7.2007, 11:16

--------------------

"Людей не интересует сколько ты знаешь, до тех пор, пока они не узнают, насколько ты интересуешься ... ими самими." Зиг Зигларсайт

SelenIT

Дата 7.7.2007, 19:57 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Prof, у меня на Вашей страничке и в FF непонятно что - ссылки, начиная со второй, переносятся на новую строку, фоны куда-то пропали...

Вспомните рецепт Микеланджело - "отсеките все лишнее". Ни к чему тут суета с отменой/восстановлением float. Да и display:inline (лекарство от удвоения magin-ов при float в IE) не нужен - margin-ы ведь нулевые. Вообще чем проще, тем лучше, браузерные различия чаще вылезают как раз от ненужной сложности...

Ну и, конечно, отступы из пустых картинок в CSS-дизайне выглядят просто дико. Чем не устраивает margin-right?

У меня из Вашего CSS получилось вот что (плюс картинки-распорки из HTML выбросил):

Код


/* Root = Horizontal, Secondary = Vertical */

ul#navmenu {
  margin: 0;
  border: 0 none;
  padding-left: 8.2em;
  padding-top: 2.95em;
  width: 865px; /*For KHTML*/
  list-style: none;
}

/* common link properties, including line-height */
ul#navmenu a, ul#navmenu a:hover {
  color: #D50B10;
  font: 21px/24px Arial;
  text-decoration: none;
}

ul#navmenu li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left;
  list-style: none;
  position: relative;
  margin-right: 30px;
}

ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  list-style: none;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

ul#navmenu ul li {
  width: 225px;
  display: block;
}

/* Root Menu */
ul#navmenu a {
  padding: 0 6px;
  display: block;
  background: #FFF;
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
  background: #DADADA;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  background: #EEE;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  background: #CCC;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
  display: block;
}

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Prof

Дата 8.7.2007, 15:44 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 182
Регистрация: 25.9.2005

Репутация: нет
Всего: 2

Спасибо

Все в принципе получилось smile

Вот только теперь трабл небольшой. В опере почему-то не выпадает меню (В ИЕ все в порядке smile

)

SelenIT, реально выручил. Спасибо;)

--------------------

SelenIT

Дата 8.7.2007, 15:56 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Prof, что за Опера? У меня в 8.02, 8.5 и 9.21 все выпадает откуда надо... а все что ниже 8-ки, имхо, давно неактуально.

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Prof

Дата 8.7.2007, 16:26 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 182
Регистрация: 25.9.2005

Репутация: нет
Всего: 2

Нда... Немного я от жизни отстал smile

У меня 7.0:) Пошел скачивать новую smile

Но раз все работает - то еще раз большое спасибо;)

Уважаемые модераторы, ИМХО тему можно закрывать smile

Это сообщение отредактировал(а) Prof - 8.7.2007, 16:27

--------------------

Prof

Дата 13.7.2007, 17:10 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 182
Регистрация: 25.9.2005

Репутация: нет
Всего: 2

Извиняюсь...
У меня снова необльшие проблемы.
На некоторых компах в IE 6.0 съезжает строка.
Вот скриншот. Посмотрите пожалуйста - http://intinity.org/1.jpg
Вот на всякий случай, нормальный вид меню - http://intinity.org/menu.jpg
Рабочий УРЛ - http://intinity.org/ind/
Ну и код написанного приведен выше.
Спасибо всем заранее smile

--------------------

SelenIT

Дата 13.7.2007, 17:15 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Почему-то не скриншот с ошибкой не открывается - говорит "Object not found"..

А сам сайт у меня работает без проблем, в т.ч. при уменьшении окна.

Это сообщение отредактировал(а) SelenIT - 13.7.2007, 17:16

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Prof

Дата 13.7.2007, 17:35 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 182
Регистрация: 25.9.2005

Репутация: нет
Всего: 2

Сорри....
Не тот немного линк дал - ссылка тут

Это сообщение отредактировал(а) Prof - 14.7.2007, 18:53

--------------------

SelenIT

Дата 13.7.2007, 18:28 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Prof, поймал я проблему - она выскакивает при увеличении размера шрифта. У Вас ведь все размеры в абсолютных пикселях, а отступы самого ul#navmenu - почему-то в относительных em. Наверное, их тоже надо бы зафиксировать:

Код


  padding-left: 98px;
  padding-top: 47px;

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »