Скрипты, разработка, настройка, администрирование
Модераторы: dobs, ArniXXX, hostess, bj
-
vektor
- Сообщения: 462
- Зарегистрирован: Пт авг 07, 2009 14:31
- Откуда: Украина
-
Контактная информация:
#1
Сообщение
vektor » Чт фев 09, 2012 23:17
После трех часов танцев, вокруг CSS, я уже несколько заблудился, и сосредаточится не могу. Может кто-то поможет. Простая задачка, - две группы менюшек должны работать по-разному.
Код: Выделить всё
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Русская кухня | Украинская кухня</title>
<style type="text/css">
A {
}
.onemenu {
font-family: tahoma;
font-size: 9pt;
color: #e6a903;
}
a:link { color: #e6a903; }
a:visited { color: #e6a903;}
a:hover { color:#da0101; font-weight: bold;
}
</style>
</head>
<body>
<div class="onemenu">
<p> </p>
<p align="center">
<a href="link1.html">Русская кухня</a> |
<a href="link2.html">Украинская кухня</a> |
<a href="link3.html">Кавказская кухня</a>
</p>
<p align="center"> </div></p>
<p align="center">
<a href="link4.html">Русская кухня</a> |
<a href="link5.html">Украинская кухня</a> |
<a href="link6.html">Кавказская кухня</a>
</p>
</body>
-
bj
- HO Moderators
- Сообщения: 1445
- Зарегистрирован: Вт фев 13, 2007 13:18
-
Контактная информация:
#2
Сообщение
bj » Пт фев 10, 2012 09:30
Задайте разные стили, для разных групп ссылок
Код: Выделить всё
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Русская кухня | Украинская кухня</title>
<style type="text/css">
A {
font-family: tahoma;
font-size: 9pt;
color: #e6a903;
}
a:link { color: #e6a903; }
a:visited { color: #e6a903;}
a:hover { color:#3C0; font-weight:normal; text-decoration:none;}
.onemenu {
font-family: tahoma;
font-size: 9pt;
color: #e6a903;
}
.onemenu a:link { color: #e6a903; }
.onemenu a:visited { color: #e6a903;}
.onemenu a:hover { color:#da0101; font-weight: bold; text-decoration:underline;
}
</style>
</head>
<body>
<div class="onemenu">
<p> </p>
<p align="center">
<a href="link1.html">Русская кухня</a> |
<a href="link2.html">Украинская кухня</a> |
<a href="link3.html">Кавказская кухня</a>
</p>
<p align="center"> </div></p>
<p align="center">
<a href="link4.html">Русская кухня</a> |
<a href="link5.html">Украинская кухня</a> |
<a href="link6.html">Кавказская кухня</a>
</p>
</body>
В жизни не все так просто, а гораздо проще
-
vektor
- Сообщения: 462
- Зарегистрирован: Пт авг 07, 2009 14:31
- Откуда: Украина
-
Контактная информация:
#3
Сообщение
vektor » Пт фев 10, 2012 13:31
Да, век живи - век учись.
Ув. bj, я прописывал различным образом, и два стиля для двух групп, в том числе. Но прописывал, по аналогии с этой таблицей:
Код: Выделить всё
/* Forum title: Text and link to the forums used in: index.php */
.forumlink { font-weight: bold; font-size: 12px; color : #800000; }
a.forumlink { text-decoration: none; color : #800000; }
a.forumlink:hover{ text-decoration: underline; color : #DD6900; }
/* titles for the topics: could specify viewed link colour too */
.topictitle { font-weight: bold; font-size: 11px; color : #000000; }
a.topictitle:link { text-decoration: none; color : #800000; }
a.topictitle:visited { text-decoration: none; color : #b00000; }
a.topictitle:hover { text-decoration: underline; color : #DD6900; }
И оно, то не работало, то работало не так как надо. В чем ошибка?
P.S. Большое спасибо.
-
bj
- HO Moderators
- Сообщения: 1445
- Зарегистрирован: Вт фев 13, 2007 13:18
-
Контактная информация:
#4
Сообщение
bj » Пт фев 10, 2012 13:37
сложно сказать, надо видеть разметку
В жизни не все так просто, а гораздо проще
-
dobs
- HO Moderators
- Сообщения: 2504
- Зарегистрирован: Вс апр 09, 2006 14:42
- Откуда: /home/Ukraine/Kyiv
-
Контактная информация:
#5
Сообщение
dobs » Сб фев 11, 2012 18:38
Советую меню делать через ul так семантичнее...
-
vektor
- Сообщения: 462
- Зарегистрирован: Пт авг 07, 2009 14:31
- Откуда: Украина
-
Контактная информация:
#6
Сообщение
vektor » Сб фев 11, 2012 18:55
Конечно я мог написать там, все что угодно, это я умею. Но по памяти, отличие было в написании вот этого:
Я прописывал:
Код: Выделить всё
a.onemenu:link {}
a.onemenu:visited {}
a.onemenu:hover {}
А у вас прописано:
Код: Выделить всё
.onemenu a:link {}
.onemenu a:visited {}
.onemenu a:hover {}
Это я стараюсь вынисти все изменяемые элименты, из статичных HTML страниц, в одну - две страницы PHP, а потом подгружать их, через include.
Пока все получается, вот только не могу найти простой способ привязки основного меню к открытой странице сайта. Чтобы кнопка открытой страницы посвечивалась другим цветом. Пробовал найти в гуглях, как можно ограничить действие a:visited одним кликом, но пока ничего не нашел. Конечно правильнее было бы, какой-то якорь на страницах вешать, но и по этой теме пока ничего не нашел.
-
bj
- HO Moderators
- Сообщения: 1445
- Зарегистрирован: Вт фев 13, 2007 13:18
-
Контактная информация:
#7
Сообщение
bj » Сб фев 11, 2012 19:15
Если страница собирается на РНР, то и проблемы нет, при генерации и оформляйте нужным образом меню.
В жизни не все так просто, а гораздо проще
-
vektor
- Сообщения: 462
- Зарегистрирован: Пт авг 07, 2009 14:31
- Откуда: Украина
-
Контактная информация:
#8
Сообщение
vektor » Вс фев 12, 2012 12:55
Все то было бы хорошо, но я хочу поставить свое старое меню.
Код: Выделить всё
<style type="text/css">
.grandmenu { font-family: Tahoma; font-size:9pt; color: #ffffff; }
.grandmenu a:link { color: #ffffff; font-size:9pt; text-decoration:none}
.grandmenu a:visited { color: #ffffff; font-size:9pt; text-decoration:none }
.grandmenu a:hover { color:#ffffff; font-size:9pt; font-weight: bold; text-decoration:none; }
</style>
Код: Выделить всё
<div class="grandmenu" >
<table border="0" width="183" align="center" cellpadding="0" >
<td align="left" height="22" bgcolor="#0e4049">
<img border="0" src="images/lbullete.bmp" width="10" height="9" align="absmiddle">
<a href="index.html">***</a></td>
<tr>
<td align="left" height="22" onMouseOver="this.style.backgroundColor='#09363b';" onMouseOut="this.style.backgroundColor='#245a66'" bgcolor="#0e4049">
<img border="0" src="images/lbullet.bmp" width="10" height="9" align="absmiddle">
<a href="page2.html">***</a></td></tr>
<tr>
<td align="left" height="22" onMouseOver="this.style.backgroundColor='#09363b';" onMouseOut="this.style.backgroundColor='#245a66'" bgcolor="#0e4049">
<img border="0" src="images/lbullet.bmp" width="10" height="9" align="absmiddle">
<a href="page3.html">***</a></td></tr>
<tr>
<td align="left" height="22" onMouseOver="this.style.backgroundColor='#09363b';" onMouseOut="this.style.backgroundColor='#245a66'" bgcolor="#0e4049">
<img border="0" src="images/lbullet.bmp" width="10" height="9" align="absmiddle">
<a href="page4.html">***</a></td></tr>
<tr>
<td align="left" height="22" onMouseOver="this.style.backgroundColor='#09363b';" onMouseOut="this.style.backgroundColor='#245a66'" bgcolor="#0e4049">
<img border="0" src="images/lbullet.bmp" width="10" height="9" align="absmiddle">
<a href="http://my.site/blog" >Блог</a></td></tr>
<tr>
<td align="left" height="22" onMouseOver="this.style.backgroundColor='#09363b';" onMouseOut="this.style.backgroundColor='#245a66'" bgcolor="#0e4049">
<img border="0" src="images/lbullet.bmp" width="10" height="9" align="absmiddle">
<a href="http://my.site/forum">Форум</a></td></tr>
<tr>
<td align="left" height="22" onMouseOver="this.style.backgroundColor='#09363b';" onMouseOut="this.style.backgroundColor='#245a66'" bgcolor="#0e4049">
<img border="0" src="images/lbullet.bmp" width="10" height="9" align="absmiddle">
<a href="page5.htm">***</a></td></tr>
<tr>
<td align="left" height="22" onMouseOver="this.style.backgroundColor='#09363b';" onMouseOut="this.style.backgroundColor='#245a66'" bgcolor="#0e4049">
<img border="0" src="images/lbullet.bmp" width="10" height="9" align="absmiddle">
<a href="page6.htm">***</a></td></tr>
<tr>
<td align="left" height="22" onMouseOver="this.style.backgroundColor='#09363b';" onMouseOut="this.style.backgroundColor='#245a66'" bgcolor="#0e4049">
<img border="0" src="images/lbullet.bmp" width="10" height="9" align="absmiddle">
<a href="page7.phtml">***</a></td></tr>
<tr>
<td align="left" height="22" onMouseOver="this.style.backgroundColor='#09363b';" onMouseOut="this.style.backgroundColor='#245a66'" bgcolor="#0e4049">
<img border="0" src="images/lbullet.bmp" width="10" height="9" align="absmiddle">
<a href="page8.html">***</a></td></tr>
<tr>
<td align="left" height="22" onMouseOver="this.style.backgroundColor='#09363b';" onMouseOut="this.style.backgroundColor='#245a66'" bgcolor="#0e4049">
<img border="0" src="images/lbullet.bmp" width="10" height="9" align="absmiddle">
<a href="page9.phtml">***</a></td></td></tr>
</table>
</div>
Единственно картинку на кнопки добавлю, чтобы ссылка жалась на всей кнопке, а не только на надписи.
-
bj
- HO Moderators
- Сообщения: 1445
- Зарегистрирован: Вт фев 13, 2007 13:18
-
Контактная информация:
#9
Сообщение
bj » Вс фев 12, 2012 13:59
Таблицы сейчас уже не оч. актуальная тема. Особенно в данном конкретном случае. Лучше реализаовать, как уже писали выше, на списках. А весь интерактив сделать на JQUERY, при этом объем кода уменьшиться в несколько раз.
js
Код: Выделить всё
$(document).ready(function(){
$('ul.menu li').hover(
function(){$(this).css('background-color', '#245a66');},
function(){$(this).css('background-color', '#0e4049');}
)
});
</script>
CSS
Код: Выделить всё
.menu {
list-style-type: none;
width: 150px;
margin:0;
padding:0;
}
.menu li {
background-color: #0e4049;
margin-bottom: 3px;
line-height: 22px;
height: 22px;
color: #FFF;
padding-left: 5px;
}
HTML
Код: Выделить всё
<ul class="menu">
<li>Меню 1 </li>
<li>Меню 2 </li>
<li>Меню 3 </li>
<li>Меню 4 </li>
<li>Меню 5 </li>
<li>Меню 6 </li>
<li>Меню 7 </li>
<li>Меню 8 </li>
</ul>
Пример
В жизни не все так просто, а гораздо проще
-
vektor
- Сообщения: 462
- Зарегистрирован: Пт авг 07, 2009 14:31
- Откуда: Украина
-
Контактная информация:
#10
Сообщение
vektor » Вс фев 12, 2012 16:19
Безусловно, ваше меню вдвое меньше по обьему, однако также нуждается в привязке к открытой странице, и также ссылкой является только текст, а не все поле кнопки.
Да и синтаксис jquery мне пока совешенно не знаком, а это усложняет привязку, к основной странице. Хотя это и поправимо, однако также требует времени.
-
dobs
- HO Moderators
- Сообщения: 2504
- Зарегистрирован: Вс апр 09, 2006 14:42
- Откуда: /home/Ukraine/Kyiv
-
Контактная информация:
#11
Сообщение
dobs » Пн фев 13, 2012 10:16
Ну свойство hover можно и на ксс написать без jquery, конечно не так еффектно, но вполне рабочий вариант...
.menu li:hover {
background-color: #245a66
}
-
bj
- HO Moderators
- Сообщения: 1445
- Зарегистрирован: Вт фев 13, 2007 13:18
-
Контактная информация:
#12
Сообщение
bj » Пн фев 13, 2012 10:39
Как всегда любимый IE... понимает hover только для ссылок, чтобы научить его нужны JS-костыли. Просто сработал на опережение...
Можно, конечно, выводить ссылки как блоки, и работать с оформлением непосредственно ссылок, и применив Ваш вариант, сократить код еще больше.
В жизни не все так просто, а гораздо проще
-
vektor
- Сообщения: 462
- Зарегистрирован: Пт авг 07, 2009 14:31
- Откуда: Украина
-
Контактная информация:
#13
Сообщение
vektor » Пн фев 13, 2012 13:32
Помогите лучше, привязать меню к открытой странице, - это для меня сейчас самая главная задача.
Возможно ли как-то a:visited ограничить просмотром одной страницы, чтобы при нажатии на другую ссылку, или перезагрузке, его действие обнулятось бы?
Тогда бы я смог вынести меню в отдельнфй файл, и его можно было бы дальше усовершенствовать, корректируя только один файл.
-
dobs
- HO Moderators
- Сообщения: 2504
- Зарегистрирован: Вс апр 09, 2006 14:42
- Откуда: /home/Ukraine/Kyiv
-
Контактная информация:
#14
Сообщение
dobs » Пн фев 13, 2012 21:29
У меня через css никогда не выходило, делаю по типу
Код: Выделить всё
echo '<li'.($_SERVER['REQUEST_URI'] == '/' ? ' class="active"':'').'><a href="/">Main</a></li>';
Ну и в ксс чет типа
-
vektor
- Сообщения: 462
- Зарегистрирован: Пт авг 07, 2009 14:31
- Откуда: Украина
-
Контактная информация:
#15
Сообщение
vektor » Вт фев 14, 2012 13:20
dobs писал(а):У меня через css никогда не выходило, делаю по типу
Код: Выделить всё
echo '<li'.($_SERVER['REQUEST_URI'] == '/' ? ' class="active"':'').'><a href="/">Main</a></li>';
Тогда вот это:
Код: Выделить всё
echo '<li'.($_SERVER['REQUEST_URI'] == '/' ? ' class="active"':'').'><a href="/">Main</a></li>';
Вот сюда, как прописать?
Код: Выделить всё
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Меню на списках</title>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){$('ul.menu li').hover(
function(){$(this).css('background-color', '#245a66');},
function(){$(this).css('background-color', '#0e4049');}
)});
</script>
<style type="text/css">
<!--
.menu {list-style-type: none; display: block; width: 150px; margin-bottom: 3px; margin:0; padding:0;}
.menu li {background-color: #0e4049; margin-bottom: 3px; line-height: 22px; height: 22px; color: #FFF; padding-left: 5px;}
.menu li.active {background-color: #0e4049; margin-bottom: 3px; line-height: 22px; height: 22px; color: #FF0000; padding-left: 5px;}
-->
</style>
</head>
<body>
<ul class="menu">
<li><a href="page1.html" >Page1</a></li>
<li><a href="page2.html" >Page2</a></li>
<li><a href="page3.html" >Page3</a></li>
<li><a href="page4.html" >Page4</a></li>
<li><a href="page5.html" >Page5</a></li>
</ul>
</body>
</html>