Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

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

Обсуждение темы Проблема с простой панелью навигации в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Всем привет! Разобрался с самыми примитивными основами Dreamweaver MX, CSS, чтобы сделать простенький сайт. Возникла проблема, бился 3 часа и ничего не смог ...


Закрытая тема
 
Опции темы
Старый 14.06.2007, 10:26   #1
Всем привет!

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

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

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

Есть ли выход, опытные дизайнеры? Буду непомерно благодарен. Мне очень интересно, как же все-таки это можно сделать. И это ведь еще только как бы совершенно простая проблема, что же будет дальше?!...
 
Старый 14.06.2007, 10:26
Ссылки
Старый 14.06.2007, 11:45   #2
Никогда не работал с Dreamweaver, но создавть второй слой в данном случае, абсолютный изврат.
Я бы добавил документу обработчик onLoad, который всем ячейкам вставил бы обработчики событий onMouseOver, onMouseOut и onClick.

function cell_click()
{
this.className='my_cell_style_click';
}
 
Старый 14.06.2007, 13:01   #3
А в CSS таким образом не пробовали:


a
{
color: цвет текста 1;
background-color: цвет фона 1;
}
a:hover
{
color: цвет текста 2;
background-color: цвет фона 2;
}
 
Старый 14.06.2007, 16:59   #4
Спасибо. Т.е., как я понимаю нужно создать поведение, которого нет в стандартном списке Dreamweaver. Я пока не очень смотрю, что происходит в КОДЕ. Я понимаю, что для вас это дико, но пока я разбираюсь просто с принципом "визуального" Dreamweaver.

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

У меня вопрос: John написал поведение как бы с помощью CSS, а что такое у Duban'а?
 
Старый 14.06.2007, 17:36   #5
JavaScript

Понятия не имею как без него отрабатывать нажатие кнопок мышки, перемещение указателя и т.п.
 
Старый 14.06.2007, 18:31   #6
Я понимаю, что нужно создать два новых CSS (цвет фона и текста), назвать их .OnMouseOver и .OnMouseOut и присвоить событиям OnMouseOver и OnMouseOut для этих кнопок-ячеек. Но в Dreamweaver нет behavior "Change CSS".
 
Старый 14.06.2007, 19:12   #7
Fred_Bulsara, Ты просто в <head> документа пишешь стиль (пишеться между тэгами <style> ... </style>) для ссылки (тэг текст). Код стиля точно такой-же как я тебе писал.
 
Старый 15.06.2007, 01:11   #8
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
В твоем случае Ссылки меню можно разместить между тэгами <div id="menu"> и </div>. тогда в CSS соответственно писать стиль не для <a>, а вот так:

#menu a
{
...
}

#menu a:hover
{
...
}

Тогда прописанный тобой стиль будет действовать на все тэги <a> размещенные между тэгами <div id="menu"> и </div>
 
Старый 16.06.2007, 01:07   #10
Сейчас буду пробовать. Спасибо, Джон!
 
Старый 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


Текущее время: 05:14. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум