Проблема с простой панелью навигации

Fred_Bulsara · 14.06.2007, 10:26

Всем привет!

Разобрался с самыми примитивными основами Dreamweaver MX, CSS, чтобы сделать простенький сайт.

Возникла проблема, бился 3 часа и ничего не смог придумать. Посмотрите, пожалуйста, вложенный рисунок верхней навигационной панели сайта. Хочу сделать так, чтобы при наведении-нажатии мышки на любую из четырех кнопок, она меняла цвет на более светлый синий. Текст при этом с белого меняется на темно-синий. Думал, что можно такое поведение присвоить к ячейке, но не получается! – А ведь всего-то нужно поменять характеристики фона и шрифта. Неужели придется делать такое поведение с помощью кнопок-картинок (GIF)?! Не хочу, хочу чтобы все было только в графике.

Попробовал сделать это с помощью слоев. Для того, чтобы создать слой (layer2), в точности повторяющий размер кнопки и ложащийся под нее (в данном случае все рассматривается на примере кнопки “О НАС”, текст в которой выровнен точно ПО ЦЕНТРУ по горизонтали и вертикали), я создал маленький слой layer1. – Он строго привязывается к верхнему левому углу панели с кнопками (к крайней левой ячейке) и является отцовским для слоя layer2. Таким путем layer2 можно точно расположить под кнопкой “О НАС”. Но как же оказывается не просто выровнять точно ПО ЦЕНТРУ текст “О НАС” внутри этого слоя, чтобы надписи "О НАС" в ячейке и в слое точно совпали. CSS выравнивает его по центру по горизонтали, но по вертикали таг DIV упорно “отталкивается” от ВЕРХА слоя. Единственный выход который я нашел – это извращаться с помощью TOP и BOTTOM margins для текта внутри этого слоя.

Есть ли выход, опытные дизайнеры? Буду непомерно благодарен. Мне очень интересно, как же все-таки это можно сделать. И это ведь еще только как бы совершенно простая проблема, что же будет дальше?!...

Duban · 14.06.2007, 11:45

Никогда не работал с Dreamweaver, но создавть второй слой в данном случае, абсолютный изврат.
Я бы добавил документу обработчик onLoad, который всем ячейкам вставил бы обработчики событий onMouseOver, onMouseOut и onClick.

function cell_click()
{
this.className='my_cell_style_click';
}

John_webMaker · 14.06.2007, 13:01

А в CSS таким образом не пробовали:

a
{
color: цвет текста 1;
background-color: цвет фона 1;
}
a:hover
{
color: цвет текста 2;
background-color: цвет фона 2;
}

Fred_Bulsara · 14.06.2007, 16:59

Спасибо. Т.е., как я понимаю нужно создать поведение, которого нет в стандартном списке Dreamweaver. Я пока не очень смотрю, что происходит в КОДЕ. Я понимаю, что для вас это дико, но пока я разбираюсь просто с принципом "визуального" Dreamweaver.

Не могли бы вы описать как все это сделать "кнопочками" Dreamweaver.

У меня вопрос: John написал поведение как бы с помощью CSS, а что такое у Duban'а?

Duban · 14.06.2007, 17:36

JavaScript

Понятия не имею как без него отрабатывать нажатие кнопок мышки, перемещение указателя и т.п.

Fred_Bulsara · 14.06.2007, 18:31

Я понимаю, что нужно создать два новых CSS (цвет фона и текста), назвать их .OnMouseOver и .OnMouseOut и присвоить событиям OnMouseOver и OnMouseOut для этих кнопок-ячеек. Но в Dreamweaver нет behavior "Change CSS".

John_webMaker · 14.06.2007, 19:12

Fred_Bulsara, Ты просто в <head> документа пишешь стиль (пишеться между тэгами <style> ... </style>) для ссылки (тэг текст). Код стиля точно такой-же как я тебе писал.

Fred_Bulsara · 15.06.2007, 01:11

John, c помощью панели Manage Styles я назначил два стиля – a и a:hover, они появляются между <style> и </style> в начале страницы, как Вы и сказали:

a {
font-family: Verdana;
font-size: 11px;
color: #FF9900;
background-color: #006699;
}
a:hover {
text-decoration: none;
color: #0066FF;
font-size: 11px;
background-color: #9999FF;

Но в таком виде они присваиваются КО ВСЕМ links на странице. Как присвоить их ТОЛЬКО к конкретной ссылке текст? В каком месте этой строчки “текст” нужно вставить это свойство (класс)?

John_webMaker · 15.06.2007, 06:40

В твоем случае Ссылки меню можно разместить между тэгами <div id="menu"> и </div>. тогда в CSS соответственно писать стиль не для <a>, а вот так:

#menu a
{
...
}

#menu a:hover
{
...
}

Тогда прописанный тобой стиль будет действовать на все тэги <a> размещенные между тэгами <div id="menu"> и </div>

Fred_Bulsara · 16.06.2007, 01:07

Сейчас буду пробовать. Спасибо, Джон!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
шаблоны и панель навигации в dreamweaver cs4	revolter	HTML, CSS, JavaScript	1	08.02.2010 14:47
Создание навигации, speed bar	Torron	HTML, CSS, JavaScript	1	06.04.2009 00:04
Проблема в навигации!	bum	Растровая графика	1	14.07.2008 07:12
Навигация по навигации (средства и методы)	IdeeFixe	Кальянная	5	12.12.2005 00:35
Предложите варианты навигации	razawa	HTML, CSS, JavaScript	5	12.02.2004 09:12

14.06.2007, 10:26	#1
Fred_Bulsara	Всем привет! Разобрался с самыми примитивными основами Dreamweaver MX, CSS, чтобы сделать простенький сайт. Возникла проблема, бился 3 часа и ничего не смог придумать. Посмотрите, пожалуйста, вложенный рисунок верхней навигационной панели сайта. Хочу сделать так, чтобы при наведении-нажатии мышки на любую из четырех кнопок, она меняла цвет на более светлый синий. Текст при этом с белого меняется на темно-синий. Думал, что можно такое поведение присвоить к ячейке, но не получается! – А ведь всего-то нужно поменять характеристики фона и шрифта. Неужели придется делать такое поведение с помощью кнопок-картинок (GIF)?! Не хочу, хочу чтобы все было только в графике. Попробовал сделать это с помощью слоев. Для того, чтобы создать слой (layer2), в точности повторяющий размер кнопки и ложащийся под нее (в данном случае все рассматривается на примере кнопки “О НАС”, текст в которой выровнен точно ПО ЦЕНТРУ по горизонтали и вертикали), я создал маленький слой layer1. – Он строго привязывается к верхнему левому углу панели с кнопками (к крайней левой ячейке) и является отцовским для слоя layer2. Таким путем layer2 можно точно расположить под кнопкой “О НАС”. Но как же оказывается не просто выровнять точно ПО ЦЕНТРУ текст “О НАС” внутри этого слоя, чтобы надписи "О НАС" в ячейке и в слое точно совпали. CSS выравнивает его по центру по горизонтали, но по вертикали таг DIV упорно “отталкивается” от ВЕРХА слоя. Единственный выход который я нашел – это извращаться с помощью TOP и BOTTOM margins для текта внутри этого слоя. Есть ли выход, опытные дизайнеры? Буду непомерно благодарен. Мне очень интересно, как же все-таки это можно сделать. И это ведь еще только как бы совершенно простая проблема, что же будет дальше?!...

14.06.2007, 11:45	#2
Duban	Никогда не работал с Dreamweaver, но создавть второй слой в данном случае, абсолютный изврат. Я бы добавил документу обработчик onLoad, который всем ячейкам вставил бы обработчики событий onMouseOver, onMouseOut и onClick. function cell_click() { this.className='my_cell_style_click'; }

14.06.2007, 13:01	#3
John_webMaker	А в CSS таким образом не пробовали: a { color: цвет текста 1; background-color: цвет фона 1; } a:hover { color: цвет текста 2; background-color: цвет фона 2; }

14.06.2007, 16:59	#4
Fred_Bulsara	Спасибо. Т.е., как я понимаю нужно создать поведение, которого нет в стандартном списке Dreamweaver. Я пока не очень смотрю, что происходит в КОДЕ. Я понимаю, что для вас это дико, но пока я разбираюсь просто с принципом "визуального" Dreamweaver. Не могли бы вы описать как все это сделать "кнопочками" Dreamweaver. У меня вопрос: John написал поведение как бы с помощью CSS, а что такое у Duban'а?

14.06.2007, 17:36	#5
Duban	JavaScript Понятия не имею как без него отрабатывать нажатие кнопок мышки, перемещение указателя и т.п.

14.06.2007, 18:31	#6
Fred_Bulsara	Я понимаю, что нужно создать два новых CSS (цвет фона и текста), назвать их .OnMouseOver и .OnMouseOut и присвоить событиям OnMouseOver и OnMouseOut для этих кнопок-ячеек. Но в Dreamweaver нет behavior "Change CSS".

14.06.2007, 19:12	#7
John_webMaker	Fred_Bulsara, Ты просто в <head> документа пишешь стиль (пишеться между тэгами <style> ... </style>) для ссылки (тэг текст). Код стиля точно такой-же как я тебе писал.

15.06.2007, 01:11	#8
Fred_Bulsara	John, c помощью панели Manage Styles я назначил два стиля – a и a:hover, они появляются между <style> и </style> в начале страницы, как Вы и сказали: a { font-family: Verdana; font-size: 11px; color: #FF9900; background-color: #006699; } a:hover { text-decoration: none; color: #0066FF; font-size: 11px; background-color: #9999FF; Но в таком виде они присваиваются КО ВСЕМ links на странице. Как присвоить их ТОЛЬКО к конкретной ссылке текст? В каком месте этой строчки “текст” нужно вставить это свойство (класс)?

15.06.2007, 06:40	#9
John_webMaker	В твоем случае Ссылки меню можно разместить между тэгами <div id="menu"> и </div>. тогда в CSS соответственно писать стиль не для <a>, а вот так: #menu a { ... } #menu a:hover { ... } Тогда прописанный тобой стиль будет действовать на все тэги <a> размещенные между тэгами <div id="menu"> и </div>

16.06.2007, 01:07	#10
Fred_Bulsara	Сейчас буду пробовать. Спасибо, Джон!