Создание странички с навигацией - HTML и CSS

Foxx · 16.10.2009, 00:13

Всех приветствую. Я новичок, поэтому прошу у вас помощи. Нужно сделать страницу. Слева должна быть навигация, в которой будет 6 строчек - заголовки разделов. Справа будет весь текст с 1 заголовка по 6. И чтобы я нажимал слева, например на 2 заголовок, она работала как гиперссылка, и справа сразу появился текст этот 2ого заголовка (то есть чтобы он нашел 2 заголовок во всем тексте). Заранее спасибо.

Arigato · 16.10.2009, 00:21

А что именно у вас не получается?

Foxx · 16.10.2009, 00:22

Я не знаю как это сделать

Arigato · 16.10.2009, 00:29

Вам необходимо изучить литературу по HTML и CSS.
После этого проблем не должно возникнуть.

Foxx · 16.10.2009, 00:34

Здесь есть наработки. Осталось текст добавить справа, и прицепить к навигации.

Nellas · 30.10.2009, 23:24

html:

Код:

<!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="ru" lang="ru">
<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title></title>
<link  rel="stylesheet" type="text/css" href="Stile.css"  />

<script type="text/javascript"><!--//--><![CDATA[//><!--
	jsHover = function() {
		var hEls = document.getElementById("nav").getElementsByTagName("LI");
		for (var i=0, len=hEls.length; i<len; i++) {
			hEls[i].onmouseover=function() { this.className+=" jshover"; }
			hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
		}
	}
	if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
//--><!]]></script>

</head>

<body>
<ul id="nav">
	<li>	  <a href="">Главая</a>	</li>
                   <li>
	  <a href="#null">Галерея</a> 	    
	  <ul>	    
	    <li>	      <a href="#null">Фотогалрея</a>	      </li>
	    <li>	      <a href="#null">Видеогалерея</a>	      </li>
	    </ul>
	</li>
	<li>
	  <a href="#null">Информация</a> 	    
	  <ul>
	    <li>	      <a href="#null">О сайте</a>	      </li>
	    <li>	      <a href="#null">Правила</a>	      </li>
	    </ul>
	  </li>
	<li>	  <a href="#null">Контакты</a>	</li>
</ul>
</td>
  </tr>

и css:

Код:

#nav, #nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #000;
  background: #515151;
  float: left;
  width: 100%;
}
#nav li {
  float: left;
  position: relative;
  background: #515151;
  back\ground: none;
}

#nav a {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 120px;
  padding: 4px 10px;
}
#nav a:hover {
  color: #000;
  background: #ccc;
}
#nav li:hover,
#nav li.jshover {
  background: #333;
}

#nav li ul {
  display: none;
  position: absolute;
  background: url(img/123.png);
  padding: 8px 0;
  width: 138px;
}
#nav li li a {
  width: 118px;
  background: none;
}
#nav li:hover ul,
#nav li.jshover ul {
  display: block;
}

#nav li:hover li ul,
#nav li.jshover li ul {
  display: none;
  width: 138px;
  top: -9px;
  left: 118px;
  lef\t: 133px;
}
#nav li:hover li:hover ul,
#nav li.jshover li.jshover ul {
  display: block;
}

Foxx · 22.10.2010, 10:35

Nellas
Спасибо

16.10.2009, 00:13	#1
Foxx Форумчанин Регистрация: 23.07.2009 Сообщений: 181	Создание странички с навигацией Всех приветствую. Я новичок, поэтому прошу у вас помощи. Нужно сделать страницу. Слева должна быть навигация, в которой будет 6 строчек - заголовки разделов. Справа будет весь текст с 1 заголовка по 6. И чтобы я нажимал слева, например на 2 заголовок, она работала как гиперссылка, и справа сразу появился текст этот 2ого заголовка (то есть чтобы он нашел 2 заголовок во всем тексте). Заранее спасибо. Последний раз редактировалось Foxx; 16.10.2009 в 00:17.

16.10.2009, 00:21	#2
Arigato Высокая репутация СуперМодератор Регистрация: 27.07.2008 Сообщений: 15,551	А что именно у вас не получается? E-Mail: arigato.freelance@gmail.com

16.10.2009, 00:29	#4
Arigato Высокая репутация СуперМодератор Регистрация: 27.07.2008 Сообщений: 15,551	Вам необходимо изучить литературу по HTML и CSS. После этого проблем не должно возникнуть. E-Mail: arigato.freelance@gmail.com

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Фоновый рисунок для странички	HellMercenariess	HTML и CSS	6	20.12.2013 11:01
Скрипт срабатывающий при выходе со странички.	valyan-t	JavaScript, Ajax	0	30.09.2009 17:40
Узнать код заданой странички в инете.	proglamer	Работа с сетью в Delphi	1	28.11.2008 15:06
Создание странички в WebBrowser	celovec	Работа с сетью в Delphi	5	08.08.2007 16:05

16.10.2009, 00:22	#3
Foxx Форумчанин Регистрация: 23.07.2009 Сообщений: 181	Я не знаю как это сделать

22.10.2010, 10:35	#7
Foxx Форумчанин Регистрация: 23.07.2009 Сообщений: 181	Nellas Спасибо