Немогу определить каким образом работае елемент на сайте. - HTML и CSS - Страница 4

Пепел Феникса · 22.01.2013, 23:33

по традиции, код в студию

.
лучше весь.

ололошенько · 22.01.2013, 23:48

пост #19 от MyLastHit речь идет о строке

Код:

	<!-- Блок отображения контекта по вкладке -->
	<div id="content"></div>

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

Код:

#content
{
   background:black;
   font-color:white;
   font-size:18em;
}

что то менятся началось...но отображалось неправильно(как и обычно с id),затем я как обычно решил поменять его на class,поменял все и вообще все перестало отображатся,если я неверно мыслю и это не та строка которая отвечает за все елементы контента то так и скажите.

Пепел Феникса · 22.01.2013, 23:59

все работает как надо(кроме font-color, надо было просто color), не забываем что у нас вложенный h1, который не все наследует.

Код:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#switcher{
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.tab{
			display: inline-block;
			background: #777;
			padding: 5px;
			color: white;
			cursor: pointer;
		}

		.tab:hover{
			background: #ccc;
		}

		#content
		{
			background:black;
			color:#FFFFFF;
			font-size:18em;
		}
	</style>
</head>
<body>
	<!-- Верстка для вкладок -->
	<ul id="switcher">
		<li class="tab">Вкладка 1</li>
		<li class="tab">Вкладка 2</li>
		<li class="tab">Вкладка 3</li>
	</ul>
	<!-- Блок отображения контекта по вкладке -->
	<div id="content"></div>
	<!-- Шаблоны которые отображать обернуты в тег script c type="text/template" чтобы браузер их не рисовал раньше времени-->
	<script id="firstTab" type="text/template">
		Ололоша 1
	</script>
	<script id="secondTab" type="text/template">
		Ололоша 2
	</script>

	<script id="thirdTab" type="text/template">
		Ололоша 3
	</script>
	<!-- Включаем в проект jQuery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<!-- Пишем наш скрипт -->
	<script>
		//Создаем обработчик для клика по закладкам
		$('.tab').bind("click",function(){
			// num - массив с первой частью имени шаблона
			// id - номер вкладки по которой клкнули
			// currentTemplate - содержимое нужного "numTab" 
			var num = ["first","second","third"],
				id = $(this).index(),
				currentTemplate = $("#"+num[id]+"Tab").html();
			$('#content').html(currentTemplate); //в блок #content заливаем нужный шаблон
		})
	</script>
</body>
</html>

ололошенько · 23.01.2013, 00:40

о

спасибо вам обоим все теперь так как нада(покачто)!!

ололошенько · 23.01.2013, 19:54

Вот по ходу работы возникла ещё проблема,немогу настроить каждую кнопку(вкладку)по отдельности.

Код:

	<ul id="switcher">
		<li class="tab">vkladka 1</li>
		<li class="tab">vkladka 2</li>
	</ul>

хотя и обе тоже не получается,начал я пробовать с перестановкой местоположения их,но ничего не получилось,пробовал заключать их в отдельные divы но неработает всеравно...switcher настроил так как мне нужно,а вкладки в нем не поддаются моему контролю...

MyLastHit · 23.01.2013, 20:09

Код:

#switcher{
  margin-left: 20px
}

Это чтобы двигать все. А чтобы работать с каждой отдельно, задавай каждой свой id и с ним в css и играйся.

Код:

<ul id="switcher">
		<li id="first" class="tab">vkladka 1</li>
		<li id="second" class="tab">vkladka 2</li>
	</ul>

Код:

#first{

}
#second{

}

ололошенько · 23.01.2013, 21:13

была мысль,но потом я вспомнил что те id="tab" связаны с скриптом поэтому их не трогал,если я изменю их то скорее всего перестанут работать вкладки...

Пепел Феникса · 23.01.2013, 22:22

у них класс tab, а не id.

ололошенько · 23.01.2013, 23:35

Цитата:

Сообщение от Пепел Феникса

у них класс tab, а не id.

а ведь точно!спасибо это уже что то,хотя скорее всего мне нужно будет сделать 2 разные вкладки хотя не факт,спасибо за подсказку

ололошенько · 23.01.2013, 23:38

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

Код:

.tab
{
   position:relative;
   display: inline-block;
   background: #777;
   height:20px;
   margin:10px auto;
   color: white;
   cursor: pointer;
}

где отступ у меня 10px от верха и должны распологатся по центру вкладки,но авто написал,отступ есть а центровка не работает...

22.01.2013, 23:33	#31
Пепел Феникса Старожил Регистрация: 28.01.2009 Сообщений: 21,000	по традиции, код в студию. лучше весь. Хорошо поставленный вопрос это уже половина ответа. \| Каков вопрос, таков ответ. Программа делает то что написал программист, а не то что он хотел. Функции/утилиты ждут в параметрах то что им надо, а не то что вы хотите.

22.01.2013, 23:48	#32
ололошенько Заблокирован Регистрация: 10.08.2010 Сообщений: 566	пост #19 от MyLastHit речь идет о строке Код: `<!-- Блок отображения контекта по вкладке --> <div id="content"></div>` я так понял что это и есть тот контент,по крайней мере он отвечает за участок в окне браузера,вот его я и хотел настроить что бы он был таким как мне хочется.Подключил я его к таблице стилей и начал пробовать всякое вот пример Код: `#content { background:black; font-color:white; font-size:18em; }` что то менятся началось...но отображалось неправильно(как и обычно с id),затем я как обычно решил поменять его на class,поменял все и вообще все перестало отображатся,если я неверно мыслю и это не та строка которая отвечает за все елементы контента то так и скажите.

23.01.2013, 19:54	#35
ололошенько Заблокирован Регистрация: 10.08.2010 Сообщений: 566	Вот по ходу работы возникла ещё проблема,немогу настроить каждую кнопку(вкладку)по отдельности. Код: `<ul id="switcher"> <li class="tab">vkladka 1</li> <li class="tab">vkladka 2</li> </ul>` хотя и обе тоже не получается,начал я пробовать с перестановкой местоположения их,но ничего не получилось,пробовал заключать их в отдельные divы но неработает всеравно...switcher настроил так как мне нужно,а вкладки в нем не поддаются моему контролю...

23.01.2013, 20:09	#36
MyLastHit Очень суровый Участник клуба Регистрация: 17.12.2009 Сообщений: 1,988	Код: `#switcher{ margin-left: 20px }` Это чтобы двигать все. А чтобы работать с каждой отдельно, задавай каждой свой id и с ним в css и играйся. Код: `<ul id="switcher"> <li id="first" class="tab">vkladka 1</li> <li id="second" class="tab">vkladka 2</li> </ul>` Код: `#first{ } #second{ }` Ненавижу быть как все, но люблю, чтобы все были как я. Последний раз редактировалось MyLastHit; 23.01.2013 в 20:11.

23.01.2013, 22:22	#38
Пепел Феникса Старожил Регистрация: 28.01.2009 Сообщений: 21,000	у них класс tab, а не id. Хорошо поставленный вопрос это уже половина ответа. \| Каков вопрос, таков ответ. Программа делает то что написал программист, а не то что он хотел. Функции/утилиты ждут в параметрах то что им надо, а не то что вы хотите.

23.01.2013, 00:40	#34
ололошенько Заблокирован Регистрация: 10.08.2010 Сообщений: 566	о спасибо вам обоим все теперь так как нада(покачто)!!

23.01.2013, 21:13	#37
ололошенько Заблокирован Регистрация: 10.08.2010 Сообщений: 566	была мысль,но потом я вспомнил что те id="tab" связаны с скриптом поэтому их не трогал,если я изменю их то скорее всего перестанут работать вкладки...

23.01.2013, 23:38	#40
ололошенько Заблокирован Регистрация: 10.08.2010 Сообщений: 566	ах нет я и забыл...когда я начал с этим всем делом експерементировать я сразу взялся изменять таб в классах,но немогу выставить его по центру,вот написал Код: `.tab { position:relative; display: inline-block; background: #777; height:20px; margin:10px auto; color: white; cursor: pointer; }` где отступ у меня 10px от верха и должны распологатся по центру вкладки,но авто написал,отступ есть а центровка не работает...

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Можно ли каким-то образом определить способ (функцию) хеширования?	zebrazoo	Безопасность, Шифрование	0	20.03.2012 00:26
C++,каким образом доработать программу?	bars.iwan	Помощь студентам	0	11.12.2011 19:08
Каким образом методом класса...	FarmHend	Помощь студентам	1	20.09.2011 07:03
Каким образом связать 2 формы?	Sauber	Помощь студентам	3	27.04.2011 22:14
Каким образом скопировать файл?	Kashp	Общие вопросы Delphi	14	07.08.2007 11:44