VPF::CSS Меню - Форум программистов

navodri

Дата 26.10.2007, 10:11 (ссылка)

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

Загрузка ...

Бывалый

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

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

Ребята, помогите с кодом! Думал, что разобрался, но... Код отлично работает в IE, а в Opera и Firefox мое меню на CSS не отображается. Просто пустое место и все, никаких графических кнопок:

Код

<HTML><HEAD>
<TITLE>sample</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">

<style>
.menu A {WIDTH: 100px; HEIGHT: 32px;}
.menu A {BACKGROUND-POSITION: 0px 0px; BACKGROUND-REPEAT: no-repeat;}
.menu A:hover {BACKGROUND-POSITION: 1px -33px;}
.menu.Home {BACKGROUND-IMAGE: url('home.gif');}
.menu.Sale {BACKGROUND-IMAGE: url('sale.gif');}
.menu.Book {BACKGROUND-IMAGE: url('book.gif');}
.menu.Soft {BACKGROUND-IMAGE: url('soft.gif');}
.menu.Win32api{BACKGROUND-IMAGE: url('delphi.gif');}
.menu.Mail {BACKGROUND-IMAGE: url('mail.gif');}
</style>

</HEAD>
<BODY>


<DIV class=menu><A class=Home 
  href="#"></A>&nbsp;<A class=Sale 
  href="#"></A>&nbsp;<A class=Book 
  href="#"></A>&nbsp;<A class=Soft 
  href="#"></A>&nbsp;<A class=Win32api 
  href="#"></A>&nbsp;<A class=Mail 
  href="#"></A> 
</DIV>

</BODY></HTML>

Это сообщение отредактировал(а) navodri - 26.10.2007, 17:06

navodri

Дата 27.10.2007, 12:58 (ссылка)

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

Загрузка ...

Бывалый

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

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

Народ, ну хоть какое-то мнение есть? Вообще-то мне накласть на всякие Оперы и Лисы, но ситуация не из приятных...

SelenIT

Дата 27.10.2007, 19:25 (ссылка)

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

Загрузка ...

баг форума

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

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

Можно заменить width и height на padding-left и padding-top соответственно - умные браузеры не любят рисовать пустые строчные элементы, если их явно или неявно (напр. с помощью float) не сделали блочными (что здесь явно не подходит). Но вообще пустые ссылки - явно не лучший вариант с точки зрения семантической верстки и поисковиков. Про юзабилити я вообще молчу - каково будет юзерам с отключенной графикой?

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

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

champion26

Дата 28.10.2007, 15:48 (ссылка)

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

Загрузка ...

Новичок

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

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

Зачем вы делаете меню при помощи div?
Лично я всегда использую ul.

К вопросу.
Попробуйте сделать так:

Код


.menu A {WIDTH: 100px; HEIGHT: 32px; display: inline-block;}
.menu A {BACKGROUND-POSITION: 0px 0px; BACKGROUND-REPEAT: no-repeat; display: inline-block;}
.menu A:hover {BACKGROUND-POSITION: 1px -33px; display: inline-block;}

Нужно дать браузере понять, что ссылки это не просто текст, а полноценное меню.

Это сообщение отредактировал(а) champion26 - 28.10.2007, 15:50

Alex103

Дата 25.11.2007, 02:23 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 416
Регистрация: 5.1.2005
Где: Украина, г. Харьк ов

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

Для начала научись правильно писать код. Т.е. закрывать ковычки там где надо а также ставить их.

Все современные верстальщики делают меню списком. Для этого есть много причин. Так вот я предлагаю тебе следующее.

HTML

Код


<ol class="menu">
<li><a href="#">1 ссылка</a></li>
<li><a href="#">1 ссылка</a></li>
<li><a href="#">1 ссылка</a></li>
<li><a href="#">1 ссылка</a></li>
<li><a href="#">1 ссылка</a></li>
</ol>

CSS файл

Код


ol{list-style-type:none;display:inline;}
ol.class li a:link{background:url(1.gif);}
ol.class li a:hover{background:url(2.gif);}
ol.class li a:visited{background:url(3.gif);}

Ну а если тебе для каждого пункта нужно другой рисунок ставить то для каждого пункта нужно писать id но не вкоем случае не класс так как класс придуман для других целей.
И старайся писать код строчными буквами.
Закрывай теги это тебе не 90-е.
......... smile

Добавлено через 9 минут и 35 секунд

Цитата(champion26 @ 28.10.2007, 15:48)

Зачем вы делаете меню при помощи div?
Лично я всегда использую ul.

К вопросу.
Попробуйте сделать так:

Код


.menu A {WIDTH: 100px; HEIGHT: 32px; display: inline-block;}
.menu A {BACKGROUND-POSITION: 0px 0px; BACKGROUND-REPEAT: no-repeat; display: inline-block;}
.menu A:hover {BACKGROUND-POSITION: 1px -33px; display: inline-block;}

Нужно дать браузере понять, что ссылки это не просто текст, а полноценное меню.

Как у тебя данный код работает если после A пробел недопустим. smile

Это сообщение отредактировал(а) Alex103 - 25.11.2007, 02:28

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

Мой адресс не дом и не улица, мой адресс WWW

WebDisaster

Дата 25.11.2007, 14:03 (ссылка)

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

Загрузка ...

Опытный

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

Репутация: 17
Всего: 19

Цитата(Alex103 @ 25.11.2007, 02:23

)

если тебе для каждого пункта нужно другой рисунок ставить то для каждого пункта нужно писать id но не вкоем случае не класс

id и class вещи, конечно, разные. Только к картинкам это не имеет никакого отношения. Если элементу присвоен id, к его свойствам можно "обратиться" из скрипта или как к "якорю" (link#id). Если class -- нельзя. Поэтому нескольких элементов с одним id на странице быть не может, а элементов с одинаковыми class -- сколько угодно. Ещё одно отличие: разный "вес" стилей id и class в каскаде. Других отличий лично я не знаю. И с этой точки зрения, если скрипты не используются, но есть много элементов с одинаковым оформлением, предпочтительнее именно class а не id. В описанной ситуации id использовать или class -- значения не имеет, если не используется скрипт.

Цитата(Alex103 @ 25.11.2007, 02:23

)

Закрывай теги это тебе не 90-е

Зависит исключительно от DOCTYPE, но уж точно не от года. В HTML совершенно спокойно можете не закрывать (причём даже "парные" тэги вроде <p></p> -- браузер их "закроет" сам, в том месте, где начнётся код следующего элемента). Документ будет валидным, соответствующим стандарту и правильно "работающим" в браузерах.

Цитата(Alex103 @ 25.11.2007, 02:23

)

после A пробел недопустим

Откуда такие сведения? Если у меня "на ура" работает с пробелом, то что я делаю не так?

Это сообщение отредактировал(а) WebDisaster - 25.11.2007, 14:24

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