Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Проблемма с оглавлением

Автор: prikolist 8.4.2010, 19:04

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

Код


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

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

Код


Перейти вниз

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

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

Код


Перейти вниз

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

Автор: prikolist 8.4.2010, 20:57

Вот я решил дописать ещё 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 пунктов, если сделать немного меньше,
тогда линия подчёркивания скрывается, но при таком интервале при наведении мышкой на текст, текст раздвигается, но зато показывается вся красная линия подчёркивания
[COLOR="Blue"]Как сделать, что пр инаведении мышкой на текст, линия подчёркивания подчёркивала красным цветом текст весь, а не только её часть?[/COLOR]

Автор: prikolist 8.4.2010, 21:28

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

Код

.interval{line-height:16pt;}

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

Код



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



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

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

Код


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

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

Автор: magelan 9.4.2010, 19:41

Ховер работает только на ссылки.

Еще такой цсс попробуй:
A.menushka:active

Для того чтобы менять фон ячейки таблицы надо писать скрипт. вот один из способов:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<STYLE>
.tdactive {
    background: Gold;
}
.tdpassive {
    background: White;
}

</STYLE>
<script TYPE="text/javascript">
    var tover = function( obj )
    {
        obj.className = 'tdactive';
    }
    var tout = function( obj )
    {
        obj.className = 'tdpassive';
    }
</SCRIPT>
<body>

<TABLE BORDER="1" CELLPADDING="10">
<TR>
<TD ONMOUSEOVER="tover(this)" ONMOUSEOUT="tout(this)">
1
</TD>
<TD ONMOUSEOVER="tover(this)" ONMOUSEOUT="tout(this)">
2
</TD>
<TD ONMOUSEOVER="tover(this)" ONMOUSEOUT="tout(this)">
3
</TD>
</TR>
</TABLE>

</body>
</html>

Автор: dеluxe 9.4.2010, 23:01

Цитата(magelan @ 9.4.2010, 19:41)

Ховер работает только на ссылки.

В ие6, костыль для ие6 и без скрипта канает.