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

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

Код HTML:

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

		.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>

так чтоль?

ололошенько · 24.01.2013, 00:31

Пепел Феникса

что то я не понял,а что ты изменил?нужно что бы сами вкладки в окне switcher были в центре окна.

Пепел Феникса · 24.01.2013, 00:52

Код:

#switcher{
			list-style: none;
			margin: 0;
			padding: 0;
			text-align: center;//её добавил.
		}

вкладки по центру терь.

MyLastHit · 24.01.2013, 00:56

ололошенько, открывай http://htmlbook.ru/ и начинай потихоньку вникать в веб. Сначала нужно создать красный квадрат, потом зеленый прямоугольник, потом список, меню и тд, а только потом уже через недельку приступать ко вкладкам.
Ты пытаешься с места в карьер. У тебя не получится.

ололошенько · 24.01.2013, 03:01

Пепел Феникса

нетъ...всеравно,вот что сделал,а эффекта 0,всеравно вслева вверху елемента switcher.

MyLastHit

я до этого поверхностно обучался хтмл в универе,теперь занялся серьёзно,сделал уже приличное кол-во,и в ксс и хтмл уже мало что впечетляет,моя цель не обучатся,я поэтому и бросил обучени яваскрипту так как нету времени даже недели,последний сложный елемент на моем сайта это как раз эти вкладки,поэтому обратился сюда,и теперь когда проблема фактически решена,меня отделяет шаг от окончательной победы над этими вкладками,и я точно не буду тратить недели на обучение чемулибо при этом зная что ответа могу ненайти в том что учу,такое и раньше было,пишу маргин:110пх ауто и отступ сверху есть,а авто неработает,и теперь я немогу вспомнить где я такое встречал у себя,причем недавно,и надеюсь что вы мне поможете))а то недай бог не вспомню.Именно авто неработает,если напишу 0пх 30пх то отступ будет слева 30пх,это напоминает мне то как я будучи апсолютнешим новичком захотел написать auto у елемента,в надежде что автоматические отступы будут не только слева/справа но и сверху/снизу,но потом узнал что это невозможно,теперь немогу понять почему немогу я задать ауто на эти елементы...в крайнем случае придется по пикселю сдвигать всеравно фиксированый сайт...

MyLastHit · 24.01.2013, 04:00

Смотри, конструкция стиля

Код:

margin: 0 auto;

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

ололошенько · 24.01.2013, 10:27

Код:

#switcher
{
   list-style: none;
   margin:10px auto;
   width:600px;
   height:150px;
   border:1px solid black;
}

.tab
{
   list-style: none;
   position:relative;
   display: inline-block;
   background: #777;
   height:20px;
   width:150px;
   margin:0px;
   color: white;
   cursor: pointer;
   text-align: center;
}

говорю же до елементарных вещей я и сам давно додумался,ширину ставил и ничего,всеравно

MyLastHit · 24.01.2013, 13:57

У меня #switcher в центре страницы. Все правильно.

ололошенько · 24.01.2013, 15:27

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

и auto неработает тут как бы я не старался...

MyLastHit · 24.01.2013, 15:35

Не говорил ты этого. Тебе нужно было "выровнять по центру, а маргин не работает!"

Код:

#switcher{
  text-align:center
}

24.01.2013, 00:52	#43
Пепел Феникса Старожил Регистрация: 28.01.2009 Сообщений: 21,000	Код: `#switcher{ list-style: none; margin: 0; padding: 0; text-align: center;//её добавил. }` вкладки по центру терь. Хорошо поставленный вопрос это уже половина ответа. \| Каков вопрос, таков ответ. Программа делает то что написал программист, а не то что он хотел. Функции/утилиты ждут в параметрах то что им надо, а не то что вы хотите.

24.01.2013, 00:56	#44
MyLastHit Очень суровый Участник клуба Регистрация: 17.12.2009 Сообщений: 1,988	ололошенько, открывай http://htmlbook.ru/ и начинай потихоньку вникать в веб. Сначала нужно создать красный квадрат, потом зеленый прямоугольник, потом список, меню и тд, а только потом уже через недельку приступать ко вкладкам. Ты пытаешься с места в карьер. У тебя не получится. Ненавижу быть как все, но люблю, чтобы все были как я.

24.01.2013, 04:00	#46
MyLastHit Очень суровый Участник клуба Регистрация: 17.12.2009 Сообщений: 1,988	Смотри, конструкция стиля Код: `margin: 0 auto;` будет выравнивать по центру твой элемент тогда и только тогда, когда ты задал ширину самому элементу и его родителю. Ненавижу быть как все, но люблю, чтобы все были как я.

24.01.2013, 13:57	#48
MyLastHit Очень суровый Участник клуба Регистрация: 17.12.2009 Сообщений: 1,988	У меня #switcher в центре страницы. Все правильно. Ненавижу быть как все, но люблю, чтобы все были как я.

24.01.2013, 15:35	#50
MyLastHit Очень суровый Участник клуба Регистрация: 17.12.2009 Сообщений: 1,988	Не говорил ты этого. Тебе нужно было "выровнять по центру, а маргин не работает!" Код: `#switcher{ text-align:center }` Ненавижу быть как все, но люблю, чтобы все были как я.

24.01.2013, 00:31	#42
ололошенько Заблокирован Регистрация: 10.08.2010 Сообщений: 566	Пепел Феникса что то я не понял,а что ты изменил?нужно что бы сами вкладки в окне switcher были в центре окна.

24.01.2013, 03:01	#45
ололошенько Заблокирован Регистрация: 10.08.2010 Сообщений: 566	Пепел Феникса нетъ...всеравно,вот что сделал,а эффекта 0,всеравно вслева вверху елемента switcher. MyLastHit я до этого поверхностно обучался хтмл в универе,теперь занялся серьёзно,сделал уже приличное кол-во,и в ксс и хтмл уже мало что впечетляет,моя цель не обучатся,я поэтому и бросил обучени яваскрипту так как нету времени даже недели,последний сложный елемент на моем сайта это как раз эти вкладки,поэтому обратился сюда,и теперь когда проблема фактически решена,меня отделяет шаг от окончательной победы над этими вкладками,и я точно не буду тратить недели на обучение чемулибо при этом зная что ответа могу ненайти в том что учу,такое и раньше было,пишу маргин:110пх ауто и отступ сверху есть,а авто неработает,и теперь я немогу вспомнить где я такое встречал у себя,причем недавно,и надеюсь что вы мне поможете))а то недай бог не вспомню.Именно авто неработает,если напишу 0пх 30пх то отступ будет слева 30пх,это напоминает мне то как я будучи апсолютнешим новичком захотел написать auto у елемента,в надежде что автоматические отступы будут не только слева/справа но и сверху/снизу,но потом узнал что это невозможно,теперь немогу понять почему немогу я задать ауто на эти елементы...в крайнем случае придется по пикселю сдвигать всеравно фиксированый сайт...

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Можно ли каким-то образом определить способ (функцию) хеширования?	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