Неполадки с оглавлением - HTML и CSS

Syltan · 08.04.2010, 20:14

Вот есть у меня слева на странице, 2 ссылки, со значком салатовыми.
Возле каждого значка написан текст который ссылается на другой фрейм, ну это я сделал
уже. Проблемма вот в чём, у меня в стилях, в файле style1237.css, заданн класс menu, для ссылок.
Я хочу применить класс меню к файлу menu.html Вроде применение происходит, но после наведении мышки на
одну из строк и при её нажатии к примеру к строке:

Код:

Переход к карте изображения расположенной в плавающем фрейме

происходит не такое же самое отображение, как при наведении и нажатии на ссылку, под названием:

Код:

Перейти вниз

Как сделать чтоб было такое же самое как и пр инаведении и нажатии на текст
Перейти вниз

Чтоб также тектс не раздвигался у меня, а просто происходило выделение, чтоб было такое же самое
действие с таким же подчёркиванием и цвето и со всеми такими эффектами как со словом:

Код:

Перейти вниз

Вот проект: http://www.sharemania.ru/0172292

Syltan · 08.04.2010, 21:56

Вот я решил дописать ещё 1класс.

Код HTML:

A.menushka:link{text-decoration:none; /*Убираем линию подчёркивания*/
color:blue;
}
A.menushka:visited{color:red; text-decoration:none;} /*Посещённая ссылка*/

A.menushka:hover{color:magenta; background:#99ffff;
font-style:normal; font-weight:normal;
letter-spacing:0px; font-size:12pt; line-height:16pt;
border-bottom-width:2px; border-bottom-style:solid;
border-bottom-color:red;
}

A.menushka:active{color:yellow; background:red;}

И в файле menu.html
написал так:

Код:

<HTML>
<HEAD>
<TITLE>menu</TITLE>
<link rel="stylesheet" style="text/css" href="style1237.css">
<meta http-equiv=Content-Type content="text/html;  charset=Windows-1251">
</HEAD>
<body bgcolor="#336633">

<div align="center">
<table class="menu" width="15%" border="5" height="10%" cellpadding="10" bgcolor="#ccffcc" >
<tr >
  <!-- первая ячейка в 1-ой строке-->
 <td  valign="top" height="10%" width="50">
 <img src="spisok.png" border="0" ></td>

<!-- Вторая ячейка во 2-ой строке-->
<td >
<A   class="menushka"        HREF="lab1237.html#num1" target="B" >
Переход к карте изображения  расположенной в плавающем  фрейме</a>
  </td>
</tr>
<p>
<!-- 2-ая строка-->
<tr>
<!-- первая ячейка во 2-ой строке-->
  <td  valign="top"  height="10%" width="50">
<img src="spisok.png" border="0" ></td>

<!-- Вторая ячейка во 2-ой строке-->
<td ><A    class="menushka"           HREF="lab1237.html#num2" target="B">
Переход к таблице - Калорийность продуктов. Яйцо и 
яйцепродукты</a>
  </td>
</tr>
</table>
</div>

</body>
</HTML>

Проблемма в том, что выделение красной линией подчёркивания происходит в том случае, если установленн междустрочный интервал в 16 пунктов, если сделать немного меньше,
тогда линия подчёркивания скрывается, но при таком интервале при наведении мышкой на текст, текст раздвигается, но зато показывается вся красная линия подчёркивания
Как сделать, что пр инаведении мышкой на текст, линия подчёркивания подчёркивала красным цветом текст весь, а не только её часть?
Мне нужно чтоб при навдеении мышкой на текст, он не раздвигался, но вся линия красная подчркивания была видна, а не её часть.

Syltan · 08.04.2010, 22:27

Всё, не нужно, я понял проблемму, я добавил в стилях вот такое:

Код:

.interval{line-height:16pt;}

А затем в эти места кода дописал, вот такое:

Код:


<A    class="menushka interval"           HREF="lab1237.html#num1" target="B">



<A    class="menushka interval"           HREF="lab1237.html#num2" target="B">

Syltan · 08.04.2010, 22:33

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

Код:

.efect table td:hover { background-color: green; }

Как прмиенить правильно данное действие?

Magneto · 09.04.2010, 09:53

Вот пример как это делается

Код:

<!doctype html>
<html>
<head>

<title>Интерактивная таблица</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<style type="text/css">
*{
	margin:0;
	padding:0}


td{
	width:100px;
	height:100px;
	border:1px solid red}

td:hover{
	background:#eef}
		</style>

</head>
<body>

	<table>
		<tr><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td></tr>
				<tr><td></td><td></td><td></td></tr>
	</table>

</body>
</html>

08.04.2010, 20:14	#1
Syltan Заблокирован Регистрация: 27.08.2009 Сообщений: 569	Неполадки с оглавлением Вот есть у меня слева на странице, 2 ссылки, со значком салатовыми. Возле каждого значка написан текст который ссылается на другой фрейм, ну это я сделал уже. Проблемма вот в чём, у меня в стилях, в файле style1237.css, заданн класс menu, для ссылок. Я хочу применить класс меню к файлу menu.html Вроде применение происходит, но после наведении мышки на одну из строк и при её нажатии к примеру к строке: Код: `Переход к карте изображения расположенной в плавающем фрейме` происходит не такое же самое отображение, как при наведении и нажатии на ссылку, под названием: Код: `Перейти вниз` Как сделать чтоб было такое же самое как и пр инаведении и нажатии на текст Перейти вниз Чтоб также тектс не раздвигался у меня, а просто происходило выделение, чтоб было такое же самое действие с таким же подчёркиванием и цвето и со всеми такими эффектами как со словом: Код: `Перейти вниз` Вот проект: http://www.sharemania.ru/0172292 Последний раз редактировалось Syltan; 08.04.2010 в 20:33.

08.04.2010, 22:33	#4
Syltan Заблокирован Регистрация: 27.08.2009 Сообщений: 569	Теперь проблемма, хочу чтоб при навдении мышки на эти ячейки, они выделялись другим фоном, слышал, что можно сделать так, но так как-то не выходит. Код: `.efect table td:hover { background-color: green; }` Как прмиенить правильно данное действие?

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
неполадки с принтером	alex(21)	Компьютерное железо	7	06.10.2009 17:49
Неполадки с кодировкой русского текста.	3dgraph	HTML и CSS	3	14.07.2009 19:26
проблема с оглавлением	Gambler	Microsoft Office Word	0	29.10.2006 21:39

08.04.2010, 22:27	#3
Syltan Заблокирован Регистрация: 27.08.2009 Сообщений: 569	Всё, не нужно, я понял проблемму, я добавил в стилях вот такое: Код: `.interval{line-height:16pt;}` А затем в эти места кода дописал, вот такое: Код: `<A class="menushka interval" HREF="lab1237.html#num1" target="B"> <A class="menushka interval" HREF="lab1237.html#num2" target="B">`