Проблема с эффектом перекатывания.

yugov · February 10, 2011

Всем привет!

При попытке организовать меню с помощью одного CSS. столкнулся с проблемой.

Делать пытался по советам уважаемого Влада М.

http://htmlbook.ru/faq/kak-sdelat-chtoby-k...avedenii-na-nee

Не удалось добиться кроссбраузерности (кажется таким словечком это свойство зовут).

Словами описывать долго все мое горе в архиве (180к)

http://up.iteam.ua/104480

Может найдется добрый и знающий, и покажет пальцем на ошибку , совсем начинающему.

swetlana · February 10, 2011

Вот даже делать было нечего настолько, чтобы скачать этот архив.

А он не скачивается.

Когда ж вы, наконец, поймёте, что ссылки надо на страницы давать, а не на архивы?

yugov · February 11, 2011

Я бы и рад, сослаться на страницу, да её физически ещё и нет, а заготовки живут в моем компьютере на диске D:/...

На счет, не скачивается, вроде проверил.

Попробую рассказать:

Задумалось меню с 6ю кнопками-рисунками (5одинаковых, а одна...не очень).

По первой ссылке из первого сообщения был "выдран" код, по нему 5 кнопок нормально "работают",

Для отдельной 6й кнопки не могу корректно прописать класс.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<Style type="text/css">

body{
	width:100%; margin: 0px;
	}

A.rollover {
	background: url(image/butb.png);bottom: -20px;position: relative; left: 15px;
	display: block;
	width: 81px;
	height: 81px;
   }

A.rollover:hover {
	background: url(image/butg.png) 
   }

A.rollover:visited {background: url(image/butr.png)
   }


A.rollover.b {
	background: url(image/bbutb.png);bottom: -50px;position: relative; left: 35px;
	display: block;
	width: 121px;
	height: 121px;
	 }

A.rollover:visited.b {background: url(image/bbutr.png)
	 }	 

A.rollover:hover.b {
	background: url(image/bbutg.png);
	 } 		 

</Style>
<title>Станки в Луганске</title>
</head>
<body bgcolor="333333">

<table width="98%" border="0" cellpadding="0" cellspacing="0"align="center">
  <tr>
	 <td height="1" width="395"><img src="image/none.gif" alt="" height="1" width="395"></td>
	 <td width="95%"> </td>
	 <td width="570"><img src="image/none.gif" alt="" height="1" width="570"></td>
  <tr>
	 <td height="180" background="image/h1.png"><a href="#" class="b"></a></td>
	 <td background="image/h2.png"></td>
	 <td background="image/h3.png" align="top">
		 <table width="550" border="0" cellpadding="0" cellspacing="0" align="top">
			<tr>
				<td height="100" ><a href="#" class="rollover"></td>
				<td><a href="#" class="rollover"></a></td>
				<td><a href="#" class="rollover"></a></td>
				<td><a href="#" class="rollover"></a></td>
				<td><a href="#" class="rollover"></a></td>
			</tr>
		 </table>
	  </td>
   </tr>
</table>

</body>
</html>

Код на валидность не проверялся, эффект проявляется в мозиле и опере, не отображается 6 кнопка. А при нажатии на любую из пяти, все пять выделяются как посещенные ссылки. В IE работает без замечаний. Понимаю, что "накосячил" с CSS, но опыта не имею (учусь). На данном форуме по честному, изучил пока 50 стр. с конца.

ЗЫ. Наверное чтоб увидеть, прийдётся какие то свои картинки повставлять. А в архиве они уже есть.

Edited February 11, 2011 by yugov

Int · February 11, 2011

Ссылки должны вести на разные страницы, иначе они будут все отмечаться посещёнными.

<td background="image/h3.png" align="top">

Все подобные вещи выноси в CSS, раз уж ты его используешь. И у align не может быть top, ты путаешь с valign

yugov · February 11, 2011

<td background="image/h3.png" align="top"> -

моя большая глупость, тем более в этом месте вообще выравнивание не нужно.

Пробую работать в редакторе SWB, ну и невнимательно чего-то нажал оно и вставилось.

Про необходимость адресации ссылок на разные страницы - "все гениальное оказалось

простым" - спасибо.

Кстати колдуя над своей менюшкой, нашел одну свою ошибку: в стилях hover стоял впереди visited.

В стили конечно будут вынесены все возможные атрибуты (потом).

Вижу, мой архивчик все-таки 2 раза скачали, наверно просмотрели.

Подскажите пожалуйста, что не так с 6й кнопкой. А то мозг расплавится.

swetlana · February 11, 2011

ну для начала код в принципе непростительно мудрёный.

Что здесь? Меню? Для этого есть тэг <menu>.

Что в этом меню? шесть пунктов? Они и должны быть.

Каждый пункт — это ссылка? Для этого тэг <a>.

Откуда тут какие-то таблицы взялись — ума не приложу.

Их нет, значит их делать не следует. Любой ненужный неоправданный элемент — удобное гнездо для ошибки.

Вот код:

<menu>
<li><a href="#">пункт 1</a>
<li><a href="#">пункт 2</a>
<li><a href="#">пункт 3</a>
<li><a href="#">пункт 4</a>
<li><a href="#">пункт 5</a>
<li><a href="#">пункт 6</a>
</menu>

всё.

Больше ничего быть не должно.

Объясните дальше задачу.

И ещё раз: если делать просто, то ошибке просто негде будет поселиться. Любая ненужная сложность — удобное место для ошибки.

и, кстати, в коде не замечено эффекта перекатывания.

Всё же действительно, объясните задачу так, как её бы объяснял заказчик — решим.

SelenIT · February 11, 2011

Что здесь? Меню? Для этого есть тэг <menu>

А он точно для этого?

The menu element is used to define context menus and toolbars.

The difference of nav from menu
If you aren’t aware there is another element that can confuse the issue in the HTML 5 specification – menu. I’ve noticed that some developers are using the <menu> element for navigation rather than the <nav> element. We thought it best to clarify that <menu> is to be used for a list of commands and is an interactive element and more likely to be used exclusively in Web Applications.

Уже не первый раз встречаю рекомендации использовать <menu> для навигации (правда, что характерно, пока только в Рунете), но всё-таки не могу до конца согласиться...

swetlana · February 11, 2011

SelenIT, даже если с этим не соглашаться, можно использовать <ul> например — это тоже понятно.

А сайт по ссылке жутковаст на вид

yugov · February 11, 2011

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Эффект перекатывания</title>
  <style type="text/css">
   A.rollover {
	background: url(images/sun1.png); /* Путь к файлу с исходным рисунком  */
	display: block; /* Рисунок как блочный элемент */
	width: 196px; /* Ширина рисунка */
	height: 183px; /* Высота рисунка */
   }
   A.rollover:hover {
	background: url(images/sun2.png); /* Путь к файлу с заменяемым рисунком  */
   }
  </style>
 </head>
 <body>
  <p><a href="#" class="rollover"> </a></p>
  </body>
</html>

Это дословный код из

http://htmlbook.ru/faq/kak-sdelat-chtoby-k...avedenii-na-nee

(страница этого сайта). Это не мое название "Эффект перекатывания". Код прекрасно работает во всех браузерах.

К нему я добавил третью картинку "visited". То же работает: ненаведенный курсор одна - картинка,

наведенный + клик - вторая картинка, курсор убран - третья. Такие группы картинок расположены по странице в 5ти

разных местах (можно отвлечься, и не называть это меню). Эта конструкция, так же работает во всех браузерах.

Проблема в том, что на этой - же странице мне нужно разместить еще одну группу из других 3х картинок, с таким же "поведением".

Т.е. Этим-же псевдоклассам мне нужно прописать другие стили (другие фоновые картинки). Так-как это сделал я, не работает в

опере и мозилле, но прекрасно работает в IE. "Нерабочесть" выражается в не отображении второй группы картинок.

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

размещен, очень не хотелось бы использовать что-то кроме html и CSS.

Edited February 11, 2011 by yugov

Vlad · February 11, 2011

Вы пробелы то убирайте в [ code ].

swetlana · February 11, 2011

ТС, дай макет — покажу.

Там всех дел минут на десять, да кода строк на двадцать-тридцать.

И наверняка можно обойтись одной картинкой.

yugov · February 11, 2011

-ТС, дай макет-

А это как? Извиняюсь!

Да и фон одной большой картинкой, я не знаю как сделать (отсюда и таблица).

Я ведь хотел что-бы она раздвигалась.

Наверное очень запутанно написал?

swetlana · February 11, 2011

Сударь, полагаю, вы имели в виду нечто такое?

Так посмотрите в код.

А для того, чтобы у одной из ссылок картинка отличалась, достаточно задать этой ссылке класс, и на него повесить иное свойство background-image.

Понятно? Или показать как?

yugov · February 11, 2011

Спасибо за потраченное на мой вопрос время.

Буду разбираться с кодом и стилями. Это не совсем то, чего я добиваюсь (в Вашем примере).

Но по крайней мере похоже, и работает на всех браузерах одинаково.

Буду учиться корректно задавать классы.

Еще раз, спасибо.

Удачи.

swetlana · February 11, 2011

Работает, кстати, не так уж и одинаково.

И это очень странно и интересно.

По крайней мере для меня лично это весьма неожиданно.

yugov · February 11, 2011

Ну на счет всех - явно перебор:

Имел в виду всех, которыми сам пользуюсь при тестировании:

Opera v.11.01

Firefox v.1.5.0.12

IE v.7.0.57.30.13

В них, Ваши бомбочки взрываются по одинаковому, ИМХО.

Кажется по соседству,

http://forum.htmlbook.ru/index.php?showtopic=19869

нашел очень похожий под мою задачу пример

http://www.freeway-design.ru/sample/

Сейчас буду тренироваться на... кошках.

swetlana · February 11, 2011

ну так пример почти в точности такой же. Разница лишь в том, что у Вердера в примере два варианта: :link и :hover.

Я вам показываю все 4 варианта. Из которых, как только что выяснилось, один скоро перестанет работать из соображений безопасности

yugov · February 12, 2011

Не думал, что компьютерные бомбочки могут быть так опасны

У меня все (почти получилось). Правда в последнем примере картинки замещались сдвигом,

переделал на смену фоновой картинки, и добавил состояние - "visited". Ошибка моя была в

малограмотном задании классов (опыт великая сила, по доброму Вам завидую).

Кусочек кода с которым все заработало:

 
a.men1 {
	display:block;
	width:81px;
	height:81px;
	background: url(image/butb.png);bottom: -20px;position: relative; left: 15px;
				  }

a.men1:visited {
				 background: url(image/butr.png)
							   }

a.men1:hover {
				 background: url(image/butg.png);
							   }

a.men2 {
	display:block;
	width:121px;
	height:121px;
	background: url(image/bbutb.png);top:22px;position: relative; left: 35px;
				 }

a.men2:visited {
				 background: url(image/bbutr.png)
							   } 

a.men2:hover {
				 background: url(image/bbutg.png)
							   }

(почти получилось) - при просмотре в мозилле, во время кликанья по ссылке, по контуру рисунка

появляется пунктирная рамка, жизнь она не сильно отравляет, т.к. сразу попадаешь на другую страницу.

Но в Вашем примере никакой рамки не видно, может сливается с фоном. Утром обязательно проверю.

Удачи!

SelenIT · February 12, 2011

Только, когда будете убивать пунктирную рамку — пожалуйста, делайте не a:focus { outline:none }, а a:active { outline:none }. Не отнимайте последнего шанса у тех, кто перелистывает ссылки Tab-ом!

yugov · February 12, 2011

Очень интересные эти - a:focus { outline:none }, a:active { outline:none }, кстати, как их правильно называть, селектор?

Вернее интересно их поведение. Рамка вокруг рисунка-ссылки пропала, однако a:focus { outline:none } достаточно поставить один раз впереди всех моих a.men1 и a.men2.

a:active { outline:none } установленный в это-же место не работает вообще. После экспериментов заработала такая конструкция:

 
a.men1 {
	display:block;
	width:81px;
	height:81px;
	background: url(image/butb.png);bottom: -20px;position: relative; left: 15px;[b]outline:none[/b]
				  }

Правда я не уверен, что это валидное решение.

Возможно все дело вот в этом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Но такое мне прописывает мой SWB редактор.

ЗЫ. Голова плохо соображает, большое спасибо.

Edited February 12, 2011 by yugov

swetlana · February 12, 2011

ой что-то вы делаете сложности на ровном месте!

Зачем?

И зачем несколько картинок?

yugov · February 12, 2011

Добрый вечер!

Сложности это таблица?

Дело в том, что сайт планируется обо всем, что связано с металлообрабатывающими станками

(их ремонт, моя настоящая профессия). Дизайн сраниц и меню я решил стилизовать под панель

управления некоего (вымышленного) станка. Просто очень не понравились встреченные мною сайты

со схожей тематикой, они какие - то "бездушные", чисто информационные (наверное с готовых шаблонов,

а может даже с одного). Идея сделать запоминающийся сайт была одобрена моими коллегами на работе,

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

В результате нарезалась куча всяких мелких деталек для оформления (винтики, кнопочки, уголки, панели),

я не настолько уверен в себе да и в DIVах, что-бы полностью отказаться от таблиц. У меня есть небольшой опыт

табличной верстки (очень давно было), вот с ними и пробую. Сайт повторяю, будет не коммерческим, а для души,

по этому, все хочется сделать самому, дополнительная сложность - сайт будет "резиновый" (не нравится мне такое название).

Такие дела.

Удачи.

swetlana · February 12, 2011

Да дело даже не в таблицах. Просто зачем делать ненужную тучу картинок? Ну да хозяин == барин. Вам также удачи!

Sign In

Проблема с эффектом перекатывания.

Question

Link to comment

Share on other sites

22 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information