Меню сайта

ppvkomi · November 11, 2009

вот создал меню кнопки сделал в фотошопе.При наведении на кнопку она меняется

Я правельно понимаю теперь нужно кнопки залить в папку IMEIGE и прописать код.

<a class="shapka" href="http://www.express-mag.ru/index.php">'>http://www.express-mag.ru/index.php">

</a><a href="http://www.express-mag.ru/index.php" onMouseOut="MM_swapImgRestore()" onMouseOve"MM_swapImage('Image18','','Новая папка/knopka1.jpg',1)"><img src="Новая папка/knopka.jpg" name="Image18" width="199" height="40" border="0"></a>

<a class="shapka" href="http://www.express-mag.ru/index.php?show_price=yes">'>http://www.express-mag.ru/index.php?show_price=yes">

</a><a href="http://www.express-mag.ru/index.php?show_price=yes" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image19','','Новая папка/knopka3.jpg',1)"><img src="Новая папка/knopka2.jpg" name="Image19" width="205" height="40" border="0"></a>

</td>

</a><a href="http://www.express-mag.ru/index.php?show_aux_page=1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','Новая папка/knopka5.jpg',1)"><img src="Новая папка/knopka4.jpg" name="Image20" width="294" height="40" border="0"></a>

</td>

</a><a href="http://www.express-mag.ru/index.php?links_exchange=yes" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image21','','Новая папка/knopka9.jpg',1)"><img src="Новая папка/knopka8.jpg" name="Image21" width="190" height="40" border="0"></a>

</td>

</td>

</a><a href="http://www.express-mag.ru/index.php?feedback=yes" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image23','','Новая папка/knopka13.jpg',1)"><img src="Новая папка/knopka12.jpg" name="Image23" width="195" height="40" border="0"></a>

</td>

</a><a href="http://www.express-mag.ru/index.php?show_aux_page=2" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image24','','Новая папка/knopka15.jpg',1)"><img src="Новая папка/knopka14.jpg" name="Image24" width="205" height="40" border="0"></a>

</td>

</a><a href="http://www.express-mag.ru/index.php?show_aux_page=3" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image25','','Новая папка/knopka7.jpg',1)"><img src="Новая папка/knopka6.jpg" name="Image25" width="205" height="40" border="0"></a>

</td>

Edited November 11, 2009 by ppvkomi

s0rr0w · November 11, 2009

Аццтой код. Переделывай.

В форуме есть неплохая ветка про rollover эффект, буквально пару дней назад обсуждалась. Иди, читай.

ppvkomi · November 11, 2009

дай ссылку где читать.

А почему код отстой громоздкий что ли.

s0rr0w · November 11, 2009

дай ссылку где читать.
А почему код отстой громоздкий что ли.

http://forum.htmlbook.ru/

Justnewone · November 11, 2009

дай ссылку где читать.
А почему код отстой громоздкий что ли.

Потому что это вонючий говнокод. вместе с папкой IMEIGE.

gesandte · November 11, 2009

Потому что это вонючий говнокод. вместе с папкой IMEIGE.

и вместе с "дизайном"

ppvkomi · November 11, 2009

и вместе с "дизайном"

эй умник над дизайном и парюсь и обсуждать его не просил.

psywalker · November 11, 2009

И вместе с говнистыми кнопками

Justnewone · November 11, 2009

И вместе с говнистыми кнопками

Тиха, по делу трите.

ppvkomi · November 11, 2009

И вместе с говнистыми кнопками

так сделай лучше и радуйся а мне пока эти пойдут для начала

s0rr0w · November 11, 2009

Давайте обойдемся без провокаций. А то я плюсомет достану, всем будет плохо.

ppvkomi · November 11, 2009

Давайте обойдемся без провокаций. А то я плюсомет достану, всем будет плохо.

хоть один грамотный человек ответил а то все остальные смотрю БОГИ CSS и HTML....

кстате подскажи всеже в каком разделе смотреть про rollover

psywalker · November 11, 2009

Давайте обойдемся без провокаций. А то я плюсомет достану, всем будет плохо.

А что значит "плюсомет" и что именно с помощью него можно сделать?

хоть один грамотный человек ответил а то все остальные смотрю БОГИ CSS и HTML....
кстате подскажи всеже в каком разделе смотреть про rollover

Я второй

http://www.htmlbook.ru/content/?id=110

ppvkomi · November 11, 2009

А что значит "плюсомет" и что именно с помощью него можно сделать?
Я второй
http://www.htmlbook.ru/content/?id=110

ну вот спасибо почитаем и изучим.

Ведь можно же нормальные советы давать а не ......

psywalker · November 11, 2009

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

дык ведь юмор тоже никто не отменял

s0rr0w · November 11, 2009

хоть один грамотный человек ответил а то все остальные смотрю БОГИ CSS и HTML....
кстате подскажи всеже в каком разделе смотреть про rollover

Есть замечательнейшая штука под названием "поиск". Находится в верхнем правом углу. Можно быстро и эффективно искать нужную информацию.

ppvkomi · November 11, 2009

вот сделал с помощью rollover только вот как сделать так что бы текст был по середине и изображение во всю таблицу

Edited November 11, 2009 by ppvkomi

Justnewone · November 11, 2009

вот сделал с помощью rollover только вот как сделать так что бы текст был по середине и изображение во всю таблицу

Классическая структура:

<ul>
	<li><a>Text</a></li>
	<li><a>Text</a></li>
	<li><a>Text</a></li>
	<li><a>Text</a></li>
	<li><a>Text</a></li>
</ul>

UL, LI{
	list-style:none;
	margin:0;
	padding:0;
}
LI{
	display:inline-block;
/* или */
	float:left;
}
A{
	display:block;
	padding:X;
	background:url(...);
}
A:hover{
	background:url(...);
}

Это основные вехи. Для IE спросите у гугла "кроссбраузерный inline-block".

Если надо резиново и на всю ширину и каждая пропорцианально - задавать в процентах или просто ряд одной таблицы.

Наверное Вы первый такую задачу решаете и ничего в поиске не нашли?

ppvkomi · November 11, 2009

У меня код выглядет вот так

<a href="link.html" class="rollover">Главная</a>

</td>

<a href="link.html" class="rollover">Прайс лист</a>

</td>

<a href="link.html" class="rollover">Гарантийные обязательства</a>

</td>

<a href="#" class="rollover">Обмен ссылками</a>

</td>

<a href="link.html" class="rollover">Регистрация</a>

</td>

<a href="link.html" class="rollover">Обратная связь</a>

</td>

<a href="link.html" class="rollover">Условия доставки</a>

</td>

<a href="link.html" class="rollover">Как заказать товар</a>

</td>

A.rollover {

background: url('images/shapka.jpg'); /* Путь к файлу с исходным рисунком */

display: block; /* Рисунок как блочный элемент */

width: 196px; /* Ширина рисунка */

height: 183px; /* Высота рисунка */

border: 1px solid #000; /* Рамка вокруг картинки */

}

A.rollover:hover {

background: url('images/shapka.jpg'); /* Путь к файлу с заменяемым рисунком */

}

A.rollover {

background: url('images/podval.gif '); /* Путь к файлу с исходным рисунком */

display: block; /* Рисунок как блочный элемент */

width: 151px; /* Ширина рисунка в пикселах */

height: 40px; /* Высота рисунка */

}

A.rollover:hover {

background-position:

0 /* Смещение по горизонтали */

-40px; /* Смещение вверх по вертикали */

}

При этом если с кода вырезать вот это

A.rollover {

background: url('images/podval.gif '); /* Путь к файлу с исходным рисунком */

display: block; /* Рисунок как блочный элемент */

width: 151px; /* Ширина рисунка в пикселах */

height: 40px; /* Высота рисунка */

}

A.rollover:hover {

background-position:

0 /* Смещение по горизонтали */

-40px; /* Смещение вверх по вертикали */

}

то все пропадает что посоветуете.

Justnewone · November 11, 2009

У меня код выглядет вот так
<table bgcolor="#ffffff" border="3" cellpadding="0" cellspacing="0" width="100%">




<tbody><tr><td align="center" valign="middle">
<a href="link.html" class="rollover">Главная</a>
</td>
<td align="center" valign="middle">
<a href="link.html" class="rollover">Прайс лист</a>
</td>
<td align="center" valign="middle">
<a href="link.html" class="rollover">Гарантийные обязательства</a>
</td>
<td align="center" valign="middle">
<a href="#" class="rollover">Обмен ссылками</a>
</td>
<td align="center" valign="middle">
<a href="link.html" class="rollover">Регистрация</a>
</td>
<td align="center" valign="middle">
<a href="link.html" class="rollover">Обратная связь</a>
</td>
<td align="center" valign="middle">
<a href="link.html" class="rollover">Условия доставки</a>
</td>
<td align="center" valign="middle">
<a href="link.html" class="rollover">Как заказать товар</a>
</td>
A.rollover {
background: url('images/shapka.jpg'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 196px; /* Ширина рисунка */
height: 183px; /* Высота рисунка */
border: 1px solid #000; /* Рамка вокруг картинки */
}
A.rollover:hover {
background: url('images/shapka.jpg'); /* Путь к файлу с заменяемым рисунком */
}
A.rollover {
background: url('images/podval.gif '); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 151px; /* Ширина рисунка в пикселах */
height: 40px; /* Высота рисунка */
}
A.rollover:hover {
background-position:
0 /* Смещение по горизонтали */
-40px; /* Смещение вверх по вертикали */
}
При этом если с кода вырезать вот это
A.rollover {
background: url('images/podval.gif '); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 151px; /* Ширина рисунка в пикселах */
height: 40px; /* Высота рисунка */
}
A.rollover:hover {
background-position:
0 /* Смещение по горизонтали */
-40px; /* Смещение вверх по вертикали */
}
то все пропадает что посоветуете.

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

ppvkomi · November 11, 2009

Все с картинкой разобрался

width: 205px; /* Ширина рисунка в пикселах */

а это удалил и вовсе

A.rollover:hover {

background-position:

0 /* Смещение по горизонтали */

-40px; /* Смещение вверх по вертикали */

}

осталось только текст по центру выровнять.Ни как не врублюсь если честно сказать.

Edited November 11, 2009 by ppvkomi

Justnewone · November 11, 2009

Все с картинкой разобрался
width: 205px; /* Ширина рисунка в пикселах */
а это удалил и вовсе
A.rollover:hover {
background-position:
0 /* Смещение по горизонтали */
-40px; /* Смещение вверх по вертикали */
}
осталось только текст по центру выровнять.Ни как не врублюсь если честно сказать.

TD{vertical-align:middle}

А код все равно гавнакодный =)

ppvkomi · November 11, 2009

Нет на это TD{vertical-align:middle} не прокатит

а код уж какой есть или стоит переделать.

Но тогда на кокой пример хотябы одной сторочки в студию.

Justnewone · November 11, 2009

Нет на это TD{vertical-align:middle} не прокатит
а код уж какой есть или стоит переделать.
Но тогда на кокой пример хотябы одной сторочки в студию.

вижу почему

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

верхний паддинг

текст

нижний паддинг

в сумме = 183px; /* Высота рисунка */

ppvkomi · November 11, 2009

вижу почему
смарите, я вам уже писал чуть выше. Указана высота ссылки, а вы укажите паддинги, верхний и нижний, чтобы в результате ссылка растянулась в высоту на:
верхний паддинг
текст
нижний паддинг
в сумме = 183px; /* Высота рисунка */

Что то я не врублю ни как и что такое паддинг

Justnewone · November 11, 2009

Что то я не врублю ни как и что такое паддинг

Почитайте азы, тут на сайте, есть "шаг за шагом", HTML и CSS. А иначе пытка и для меня и для Вас. Это надо знать обязательно.

Sign In

Меню сайта

Question

Link to comment

Share on other sites

29 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

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