CSS Таблицы стилей

Скрипты, разработка, настройка, администрирование

Модераторы: dobs, ArniXXX, hostess, bj

Сообщение
Автор
vektor
Сообщения: 462
Зарегистрирован: Пт авг 07, 2009 14:31
Откуда: Украина
Контактная информация:

CSS Таблицы стилей

#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">
   &nbsp;<p>&nbsp;</p>
	<p align="center">
   <a href="link1.html">Русская кухня</a> |
   <a href="link2.html">Украинская кухня</a> |
   <a href="link3.html">Кавказская кухня</a>
  </p>
	<p align="center">&nbsp;</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">
   &nbsp;<p>&nbsp;</p>
   <p align="center">
   <a href="link1.html">Русская кухня</a> |
   <a href="link2.html">Украинская кухня</a> |
   <a href="link3.html">Кавказская кухня</a>
  </p>
   <p align="center">&nbsp;</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">
&nbsp;<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">
&nbsp;<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">
&nbsp;<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">
&nbsp;<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">
&nbsp;<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">
&nbsp;<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">
&nbsp;<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">
&nbsp;<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">
&nbsp;<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">
&nbsp;<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">
&nbsp;<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-костыли. Просто сработал на опережение... :D

Можно, конечно, выводить ссылки как блоки, и работать с оформлением непосредственно ссылок, и применив Ваш вариант, сократить код еще больше.
В жизни не все так просто, а гораздо проще

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>';
Ну и в ксс чет типа

Код: Выделить всё

.menu li.active {
bla bla bla...
}

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>

Ответить