Как сверстать меню?

[psywalker]

Дорогие Камрады, у меня возник вопрос, а точнее мне интересно услышать варианты и идеи по-поводу того, как бы Вы сверстали вот такое меню: , дело в том, что Оно полностью Пнг-формата, и сам каркас с фоном, ссылки и текущая страница тоже, как видите выделяется(в данном случае это страница "Авторизация")..

А проблема в том, что:

1) Нужно, что-бы это меню прекрасно отображалось в ИЕ6, один в один, как и везде

2) Почему то ссылки не кликабельны после того, как я назначаю даже фон этому меню в ИЕ6, почему так происходит, я не могу понять?

3) Хотелось-бы узнать у Вас, как-бы кто сверстали такое меню, какими бы свойствами и действиями оперировали?

[psywalker]

AjiTae

1)

Данный код есть копия моего, с поправкой на список и всё.

Стоп, ничё подобного, никаких копий я не делал, это изначально был мой вариант, просто единственное небыло спрайта, потому что я идеалист по своей натуре и если гдето недочёт, а в данном случае была проблема в ИЕ6, то я стараюсь сначала её решить, а потом уже делать конечный вариант, именно за этим я и обратился в этот Топик, но к счастью решил её Сам, без вашей помощи..Но зато благодаря вам узнал ещё один вариант этого Интересного на мой взгляд меню, за что благодарен Вам и наверняка где нибудь буду его использовать в своих работах..

2)

Я не называл себя мастером, я "человек со вкусом"©, а это вообще для меня так - хобби.

Вы так говорили, как будто считаете себя супер-мега-профи, а все остальные мелкие тараканы вокруг, ничего не умеют и не знают, ещё учить их нада...

3)

P.S. Только не надо вот этих стандартных "сперва добейся!", мне и так неплохо живётся.

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

4) Если Вы действительно увлечены этим делом и Вам нравиться помогать людям, то я только рад, что на этом форуме появился ещё один хороший парень, к которому всегда можно обратиться за советом, да и помочь приятно

p. s. - Кстати всёже я настаиваю, дайте пожалуйста пару ссылок на ваши работы, мне - молодому, хоть глянуть код, поучиться (желательно самых лучших на Ваш взгляд)

Edited June 8, 2009 by psywalker

[AjiTae]

Я где-то на года два-три вообще оставил тему инет-дизайна, и вот не более месяца назад вернулся. Всё, что я делал до того, мне кажется убогим уродливым, и адской стыдобой, а нового пока нема, потому показывать нечего))

Стиль разговора "как с мелкими тараканами" - это можно сказать профессиональное, всячески в обычном общении с этим борюсь но видать плохо получается, прошу прощения.))

P.S. Не пишите пжалста "вы" с большой буквы, всегда меня это раздражает, ибо выглядит откровенной насмешкой.=\

[psywalker]

AjiTae

1)

Я где-то на года два-три вообще оставил тему инет-дизайна, и вот не более месяца назад вернулся. Всё, что я делал до того, мне кажется убогим уродливым, и адской стыдобой, а нового пока нема, потому показывать нечего))

А я только вот пол-года верстать пытаюсь, ещё молодой очень, многого не знаю, часто спрашиваю, наматываю на ус. То, что и как я делаю, считаю ученическим, или покрайней мере далёким от совершенства.., потому что я ещё зелёный и только начал осваивать всю эту кашу..

2)

Стиль разговора "как с мелкими тараканами" - это можно сказать профессиональное, всячески в обычном общении с этим борюсь но видать плохо получается, прошу прощения.))

Даа, это в тебе есть, но ерунда, это временно)))

3)

P.S. Не пишите пжалста "вы" с большой буквы, всегда меня это раздражает, ибо выглядит откровенной насмешкой.=\

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

Давай будем на "Ты"

[Fenix]

Хотелось-бы узнать у Вас, как-бы кто сверстали такое меню, какими бы свойствами и действиями оперировали?

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

Ссылка

http://psywalker.ru/SAITS/IvanMatveev/main-page.html

В опере что-то пункты меню не выделяются при навидении

Edited June 9, 2009 by Fenix

[psywalker]

В опере что-то пункты меню не выделяются при навидении

во первых они выдиляются, только сбоку если нажимать, а что-бы было полноценно, то это надо, что-бы были слова в сылках, а их нет, и чтоже я могу поделать с этим, есть варианты? Я уже перепробывал всё, что можно например..

[s0rr0w]

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

Я бы сделал примитивную структуру

<div><a/><a/>...</div>

Кнопки бы сделал по высоте как обводка + расстояние от верха и низа соседних кнопок, и сложил бы это в стек с перекрытием слоев.

[LunatiK]

во первых они выдиляются, только сбоку если нажимать, а что-бы было полноценно, то это надо, что-бы были слова в сылках, а их нет, и чтоже я могу поделать с этим, есть варианты? Я уже перепробывал всё, что можно например..

Для тега <a> display: block; и width: скокатам px;

и height: нужнойвысоты px;

Edited June 9, 2009 by LunatiK

[psywalker]

s0rr0w

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

Что такое "Глоу" и можете рязъяснить фразу поподробнее

Значит вы бы не использовали список?

а можно поподробнее ваш интересный вариант

LunatiK

Для тега <a> display: block; и width: скокатам px;

и height: нужнойвысоты px;

Конечно-же я так делал, что я только не делал, бесполезно

Edited June 9, 2009 by psywalker

[LunatiK]

LunatiK

Конечно-же я так делал, что я только не делал, бесполезно

Делал не делал, но щас там не так.

			ul.nav li a { width: 100%; display: block; height: 32px;} /*Где тут ширина ? ой :) заметил но всё равно задай её в пикселях*/
				ul.nav li a:hover { }


				ul.nav li.about a:hover { 
					background: url(../img/about-22.png) 0 -17px no-repeat; 
					position: absolute; /*Вот*/
					top: -.9em; /*тут*/
					left: 2.8em; /*ты сильно*/
					z-index: 3; /*поизвращался*/
					width: 143px;
					height: 50px;
				}

Сделай у ul.nav li a бордер для выдиления, ну скажем зелёного цвета и задай ширину, и посмотри на всю свою красоту, а то в слепую долго втыкать будешь.

P.s. Если абсолютно позицыонируешь , то ставь положение элемента <а> а не <a:hover> а то он у тебя бегать начинает от тебя

Edited June 9, 2009 by LunatiK

[s0rr0w]

Что такое "Глоу" и можете рязъяснить фразу поподробнее

Glow - свечение. Эффект, который наложен на буковки в активном пункте меню, которое создает ощущение источника света за буковками.

Значит вы бы не использовали список?

Я использую списки только там, где они нужны - только в тексте. Для оформительских целей я это не применяю. Меню для меня не список.

а можно поподробнее ваш интересный вариант

Элементы можно смещать относительно друг друга.

Вот так, например

a { position: relative; margin-top: -10px; }

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

[Fenix]

Я уже перепробывал всё, что можно например..

можно ролловерами сделать. Тогда точно проблем не будет

[LunatiK]

По поводу приведённого примера товарищем s0rr0w, я с ним полностью согласен (но только про пример)

Переделывайте меню! ul li ваши можно оставить особой разницы нет, да и меню списком без стилей выглядит намного лучше нежели просто divы

[s0rr0w]

По поводу приведённого примера товарищем s0rr0w, я с ним полностью согласен (но только про пример)

Переделывайте меню! ul li ваши можно оставить особой разницы нет, да и меню списком без стилей выглядит намного лучше нежели просто divы

Лично я не понимаю тех задротов, которые отключают CSS на сайтах. Это все равно что купить Феррари и содрать всю оббивку и обшивку.

[LunatiK]

Лично я не понимаю тех задротов, которые отключают CSS на сайтах. Это все равно что купить Феррари и содрать всю оббивку и обшивку.

Либо у вас денег много, либо вы никогда не пользовались GPRS и сидите на жирном канале с безлимиткой

Сайт - это прежде всего информация, а не дизайн.

[psywalker]

стойте, стойте ребят, вы меня запутали совсем..вот тут вопросы появились:

LunatiK

1)

Сделай у ul.nav li a бордер для выдиления, ну скажем зелёного цвета и задай ширину, и посмотри на всю свою красоту, а то в слепую долго втыкать будешь.

сделал, и ничего не изменилось вроде, просто прибавилась рамка и ширина в пикселях))

2)

P.s. Если абсолютно позицыонируешь , то ставь положение элемента <а> а не <a:hover> а то он у тебя бегать начинает от тебя

Я так понял, нужно изначально Позиционировать именно просто "а" , вместо того, чтобы вешать позиционирование на a:hover ? или на то и другое надо вешать position: absolute; ?

вот допустим у меня код начинается так:

		ul.nav {
			width: 180px; 
			height: 247px;
			position: absolute; 
			left: -182px; 
			top: 2em; 
			padding-top: 2.5em;
			background: url(../img/menu.png) 0 0 no-repeat;
		}

это для расположения основного меню и сам фон, вот так это выглядит вот с таким кодом: http://www.psywalker.ru/SAITS/IvanMatveev/main-page.html , как действовать далее, что писать в :

ul.nav li {}

ul.nav li a {}

ul.nav li a:hover {}

и как должны выглядеть картинки для каждой ссылки?

[s0rr0w]

Либо у вас денег много, либо вы никогда не пользовались GPRS и сидите на жирном канале с безлимиткой

Сайт - это прежде всего информация, а не дизайн.

Пользуюсь GPRS каждый день через оперу мини. Что дома, что на работе интернет безлимитный. Не вижу никаких проблем.

[LunatiK]

по первому пункту: а ты наведи курсор, чтоб сработал hover

по второму: да, нудно позиционировать именно <а>

А далее всё индивидуально... но на предыдущей странице был сносный пример, не помню кого, на дивах его и под ваши списки можно переделать.

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

[psywalker]

LunatiK

Спасибо, я понял

s0rr0w

Спасибо вам, буду экспериментировать ещё

А я так понял, мне надо для каждой отдельной ссылки сделать нижний фон и верхний, которые будут наложены друг на друга?

[s0rr0w]

LunatiK

Спасибо, я понял

s0rr0w

Спасибо вам, буду экспериментировать ещё

А я так понял, мне надо для каждой отдельной ссылки сделать нижний фон и верхний, которые будут наложены друг на друга?

Нет.

Берете любой пункт меню в середине, например "обо мне". Включаете активное его состояние. (дальше работа с фотошопом) Обводите прямоугольной маской эту картинку, потом делаете из маски линзу (create new fill or adjustment layer в закладке слоев), выбираете levels, смещаете ползунки к середине, чтобы увидеть границы свечения от менюшки. По этим границам или чуть шире даже, проводите направляющие. Дальше смотрите, если свечение сильно залазит на соседние пункты, то уменьшаете эффект. Таким образом вы определите максимальную высоту активного пункта меню. Нарезаем активные и неактивные пункты в одну текстуру, и потом применяем фон для каждого пункта меню.

Можно не морочиться и сделать несколько текстур на каждый активный пункт по отдельности, что будет намного больше по размеру картинки, зато с оригинальным эффектом как в дизайне. Или же изменить немного дизайн в угоду более "правильному" коду HTML.

[psywalker]

s0rr0w

Спасибо вам ещё раз огромное, по первому пункту - это для меня не реал, я плохо дружу с фотошопом, а по второму хочу сказать, что я вроде бы так и сделал, то-есть вырезал отдельно каждую картинку с сечением для каждого пункта в отдельности, но вот хотелось-бы поточнее узнать:

1) Ничего, что они все разного размера, так как сечения разные у всех пунктов?

2) Я предлагаю сначала написать так:

Общее правило для ul

ul.nav {

width: 180px;

height: 247px;

position: absolute;

left: -182px;

top: 2em;

padding-top: 2.5em;

background: url(../img/menu.png) 0 0 no-repeat;

}

Это координаты списка, и фон, выглядит так: http://www.psywalker.ru/SAITS/IvanMatveev/main-page.html

далее для каждой "a" пишем: дисплей блок, свою высоту, ширину и позиционируем..

а при наведении уже ставим background: путь к картинке с сечением; и координаты: top: ; left; , нормал?

[s0rr0w]

Спасибо вам ещё раз огромное, по первому пункту - это для меня не реал, я плохо дружу с фотошопом, а по второму хочу сказать, что я вроде бы так и сделал, то-есть вырезал отдельно каждую картинку с сечением для каждого пункта в отдельности, но вот хотелось-бы поточнее узнать:

1) Ничего, что они все разного размера, так как сечения разные у всех пунктов?

Плохо. Нужно привести все к максимальному размеру. Чтобы прописать 1 раз высоту и не мучаться.

[psywalker]

s0rr0w

Плохо. Нужно привести все к максимальному размеру. Чтобы прописать 1 раз высоту и не мучаться.

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

может просто его в фотошопе сделать поменьше с помощью функции: "Свободное трансформирование", я пробовал, можно довести до одинакового размера конечно, просто сузив высоту, но тогда будет некрасиво, как то хоца, чтобы оно сеяло в радиусе большом чтолии..

А можно допустим сделать всем нормальный ихний радиус, но высота ссылок допустим просто будет больше у всех, но зато одинаковая? будет высота, как две ссылки кабута, воо как!

[s0rr0w]

Проще всего на JS сделать.

[psywalker]

s0rr0w

Проще всего на JS сделать.

для вас проще, а для меня это тёмный лес к сожалениюю

[LunatiK]

по хорошему JS в любом случае придёться использовать, хотябы для прелоада картинок активных кнопок