Jump to content
  • 0

графическое подчеркивание ссылок в меню

lisa3281

Asked by lisa3281,

 Share

Question

lisa3281 Explorer

lisa3281

Posted
Posted

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

но у меня никак не получается это сделать. я уже запуталась окончательно...

была бы вам очень благодарна если бы вы посмотрели код и могли бы может что-то мне посоветовать.

т.к. приложить не могу файл ниже код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

<td valign="top" padding-top="40px" >

<table border="0" cellpadding="0" cellspacing="0" class="menu">

<tr>

<td><div id="menu"><a href="index.html"> О проекте </a> <span class="menu_2"><a href="Goals.html">Цель</a> <a href="tasks.html">Принципы работы</a> </span> <a href="Services.html">Услуги</a> </div>

</table>

</td>

</tr>

</table>

</body>

</html>

css:

.menu {

width: 230px;

margin-top: 60px;

font-family: Arial, Verdana, "Times New Roman", serif;

font-weight: bold;

font-size: 19px;

margin-left: 40px;

padding-left: 40px;

}

a:link{color:#000000; text-decoration:none;}

a:visited{color:#000000; text-decoration:none;}

a:hover{color:#0000CC; text-decoration:none;}

a:active{color:#0000CC; text-decoration:none;}

#menu a {

display:block;

width:230px;

height:40px;

outline:none;

}

#menu a:focus, #menu a:active {

background-position: left bottom;

background-image: url(img/menu_pic.png);

background-repeat: no-repeat;

border-top-width: 0px;

border-right-width: 0px;

border-bottom-width: 0px;

border-left-width: 0px;

}

.menu_2 {

font-family: Arial, Verdana, "Times New Roman", serif;

font-size: 17px;

font-weight: 500;

margin-left: 40px;

display:block;

}

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

заранее спасибо

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
я делаю простой сайтик. там есть меню. я хочу чтобы при нахождении на определенной странце - соответствующий странцие пункт меню был подчеркнут.

но у меня никак не получается это сделать. я уже запуталась окончательно...

была бы вам очень благодарна если бы вы посмотрели код и могли бы может что-то мне посоветовать.

<td><div id="menu"><a href="index.html"> О проекте </a> <span class="menu_2"><a href="Goals.html">Цель</a> <a href="tasks.html">Принципы работы</a> </span> <a href="Services.html">Услуги</a> </div>

На странице index.html делаете <a href="index.html" class="active"> О проекте </a>

И описываете класс .active { text-decoration: underline }

Link to comment
Share on other sites
  • 0
VooFoo Explorer

VooFoo

Posted
Posted
я делаю простой сайтик. там есть меню. я хочу чтобы при нахождении на определенной странце - соответствующий странцие пункт меню был подчеркнут.

но у меня никак не получается это сделать. я уже запуталась окончательно...

была бы вам очень благодарна если бы вы посмотрели код и могли бы может что-то мне посоветовать.

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

заранее спасибо

если я правильно понял, то вы хотите чтобы подчеркивались ссылки на разных страницах...

это делается через php или на каждой странице указывается класс приведенный выше (class = "active")

Link to comment
Share on other sites
  • 0
lisa3281 Explorer

lisa3281

Posted
  • Author
Posted
если я правильно понял, то вы хотите чтобы подчеркивались ссылки на разных страницах...

это делается через php или на каждой странице указывается класс приведенный выше (class = "active")

то есть я правильно понимаю что страница на которой я нахожусь будет подчеркиваться через класс active?

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

спасибо за ответы. пойду пробовать)

Link to comment
Share on other sites
  • 0
lisa3281 Explorer

lisa3281

Posted
  • Author
Posted

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

такое ощущение что это делается через jQuery, но я не уверена.

если кто знает как на сайте где находится этот форум реализована функция выделения в меню странички на которой мы находимся - пожалуйста подскажите как можно это реализовать????

заранее огромное спасибо!!!!

Link to comment
Share on other sites
  • 0
Victor Ananiev Explorer

Victor Ananiev

Posted
Posted (edited)

это PHP. Можна почитать и разобраться))) просто проверка url и вывод нужного результата. На счет картинок, добавляем padding-bottom и background:url('') center bottom repeat;

Edited by Victor Ananiev
Link to comment
Share on other sites
  • 0
lisa3281 Explorer

lisa3281

Posted
  • Author
Posted
это PHP. Можна почитать и разобраться))) просто проверка url и вывод нужного результата. На счет картинок, добавляем padding-bottom и background:url('') center bottom repeat;

спасибо. буду продолжать учиться) по крайней мере знаю теперь на что акцентироваться

Link to comment
Share on other sites
  • 0
kalyaka-malyaka Explorer

kalyaka-malyaka

Posted
Posted
если ssi то нужно скриптом url парсить, ведь так? или как ты будешь подставлять нужный класс?

просто меню с одного из свёрстанных мной сайтов:

<ul>
	<li><a href="news.shtml"<!--#if expr="$page = 'news' " --> class="active"<!--#endif -->>новости</a></li>
	<li><a href="about.shtml"<!--#if expr="$page = 'about' " --> class="active"<!--#endif -->>о себе</a></li>
	<li><a href="gallery.shtml"<!--#if expr="$page = 'gallery' " --> class="active"<!--#endif -->>галерея</a></li>
	<li><a href="expo-press.shtml"<!--#if expr="$page = 'expo-press' " --> class="active"<!--#endif -->>экспо\пресса</a></li>
	<li><a href="guestbook.php5">гостевая</a></li>
	<li><a href="contact.shtml"<!--#if expr="$page = 'contact' " --> class="active"<!--#endif -->>контакты</a></li>
	<li><a href="people.shtml"<!--#if expr="$page = 'people' " --> class="active"<!--#endif -->>people</a></li>
</ul>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept