Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Дивы relative и absolute (https://javascript.ru/forum/misc/37768-divy-relative-i-absolute.html)

Masterli 06.05.2013 16:45

Дивы relative и absolute
 
Во всех случаях подходит absolute, кроме того, когда неизвестно количество слоёв (например в зависимости от количества записей)

relative по мне работает кривовато, чтобы достичь нужного результата, нужно создавать много лишних слоёв и выглядит так
<div id="lot_stroka1" style="position:relative; top: 0; left: 0;"> \
<div id="lot_igra" style="position:relative; top: 0; left: 5;">'+igra+'</div> \
<div id="lot_sait" style="position:absolute; top: 0; left: 150;">'+sait+'</div> \
<div id="lot_server" style="position:absolute; top: 0; left: 280;">'+server+'</div> \
<div id="lot_storona" style="position:absolute; top: 0; left: 350;">'+storona+'</div> \
<div id="lot_nazvanie" style="position:absolute; top: 0; left: 450;">'+nazvanie+'</div>

Причём всё это объединяется в слой, для того чтобы вставлялись блоки.

1 Страница работает хорошо.

Вопрос. Например я хочу реализовать другую страницу и чтобы отсчёт опять начинался занова от точки 0;0
Даже простым слоям absolute уже не обойтись. Программа считает, что это абсолютные координаты от уже имеющегося слоя.

Как объяснить программе, что это новый слой и не относится к всем перечисленным.
Спасибо

skrudjmakdak 06.05.2013 16:58

попробуйте еще задавать width and height

edison 06.05.2013 23:10

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

<div style="position:relative; top: 0; left: 0;">
<div style="position:absolute; top: 0; left: 0;">
<div id="lot_stroka1" style="position:relative; top: 0; left: 0;"> \</div>
<div id="lot_igra" style="position:relative; top: 0; left: 5;">'+igra+'</div> \
<div id="lot_sait" style="position:absolute; top: 0; left: 150;">'+sait+'</div> \
<div id="lot_server" style="position:absolute; top: 0; left: 280;">'+server+'</div> \
<div id="lot_storona" style="position:absolute; top: 0; left: 350;">'+storona+'</div> \
<div id="lot_nazvanie" style="position:absolute; top: 0; left: 450;">'+nazvanie+'</div>
</div>
<div style="position:absolute; top: 0; left: 0;">
<div id="lot_stroka1" style="position:relative; top: 0; left: 0;"> \</div>
<div id="lot_igra" style="position:relative; top: 0; left: 5;">'+igra+'</div> \
<div id="lot_sait" style="position:absolute; top: 0; left: 150;">'+sait+'</div> \
<div id="lot_server" style="position:absolute; top: 0; left: 280;">'+server+'</div> \
<div id="lot_storona" style="position:absolute; top: 0; left: 350;">'+storona+'</div> \
<div id="lot_nazvanie" style="position:absolute; top: 0; left: 450;">'+nazvanie+'</div>
</div>
</div>
думаю так разберешься... но честно хз что там у тебя и какой результат нужен в итоге. А ну и я див закрыл, он у тебя не закрыт и хз где должен закрываться, остальное яя не стал править, т.к. хз для чего оно )

Masterli 07.05.2013 09:08

нужно понимать что бок relative занимает пространство, а absolute не занимает

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

На счёт что я хочу.
Мне надо строку с данными (каждое данное на одной строке, для этого все эти данные должны быть absolute ), а каждую новую строку нужно смещать ниже (для этого берём их в общий слой и делаем его relative )

А вопрос был как начать заново отмерять от точки 0,0

следущий новый слой absolute , всё равно начнётся уже с точки 100,400 (например).
Можно конечно было бы написать что то типа
<div id="lot_nazvanie" style="position:absolute; top: -100; left: -400;">'+nazvanie+'</div>

но это как то неправильно(да и не работает), Может нужно использовать какие то спецальные теги?
Спасибо

skrudjmakdak 07.05.2013 10:07

ну вот небольшой примерчик:
<html>
	<head>
		<style type="text/css">

.content
{
position: relative;
width: 400px;
border: 1px solid black;
overflow: hidden;
padding: 10px;
}

.block
{
width: 100%;
margin-top: 10px;
height: 60px;
border: 1px solid red;
#float: left;
position: relative;
}

.f
{
position: aboslute;
width: 200px;
top: 0px;
left: 0px;
}

.i
{
position: aboslute;
width: 200px;
top: 25px;
left: 0px;
}

.o
{
position: aboslute;
width: 200px;
top: 40px;
left: 0px;
}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="block">
				<div class="f">иванов</div>
				<div class="i">иван</div>
				<div class="o">ольгович</div>
			</div>
			<div class="block">
				<div class="f">иванов</div>
				<div class="i">иван</div>
				<div class="o">ольгович</div>
			</div>
			<div class="block">
				<div class="f">иванов</div>
				<div class="i">иван</div>
				<div class="o">ольгович</div>
			</div>
		</div>
	</body>
</html>


должно выглядеть так:

Masterli 07.05.2013 10:25

Наверное задам просто мега тупые вопросы.

1. Зачем вообще теги хтмл, боди, и прочее.
(Я их вообще не пишу, может поэтому у меня большая каша получается)

2. Вопрос был про новую страницу (т.к. я не понимаю что делают теги, из вашего примера, догадывая, стиль для всей страницы).
Про моё.
У меня же все 30 страниц находятся на одной, просто управляется скрытие и показ элементов.
Понимаю, что подход создание и удаление элементов правильнее, но он и более не удобен, более грамосток для логики и требует контроля, что есть, а чего не существует.

Эту проблему я могу решить, но не уверен, правильно ли.

3. Кажется я не понимаю основ html. Понятно, для чего это было нужно вначале. Непонятно, как это использует JS, нужны ли JS у теги.

4. А может проблема то и не в бабине....

skrudjmakdak 07.05.2013 11:11

отвечать буду также по пунктам..

1. тэги html, body - это обязательные тэги. зайдите на любой сайт и посмотрите они есть везде. вот например, взять русский язык. можно писать без запятых, с ошибками.. ведь мы можем понять что написано даже с ошибками. но однако есть правила и мы их предерживаемся. так и здесь можно и не написать html body.. но есть правила, и их нужно придерживаться!!

2. вы говорите, что не понимайте мой пример.. вот все таки настаиваю его разобрать.. иначе дело дальше вряд ли пойдет. есть css стили в инете много лит-ры, почитайте.. вот ссылка http://htmlbook.ru/css

что вы там делайте, я честно говоря толком и не понял..

>>>У меня же все 30 страниц находятся на одной
вопрос: зачем "на одной странице 30 страниц"??

3. >>>Кажется я не понимаю основ html. отвечаю: будете заниматься - поймете.

Masterli 07.05.2013 12:23

Не грамотные ответы, не по существу, но всё же спасибо.

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

2. Вы в примере показываете, что можно отделить стиль от дива, это понятно, вопрос в том, удобно ли мне это и ещё больший вопрос, что сейчас для меня важна только функциональность (чтобы работало).
Лит-ру можно читать, ещё можно курить или пить. Простое прочтение мало даст ясности, особенно, когда читаешь не нужный на данный момент материал.

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

3. Если буду заниматься то пойму, но тогда я не буду заниматься другим (возможно более важным) и не пойму его.

zebra 07.05.2013 12:59

Причем здесь javascript?

Hekumok 07.05.2013 14:13

я один не понимаю, что нужно Masterli? :blink:

edison 07.05.2013 14:40

Цитата:

У меня же все 30 страниц находятся на одной, просто управляется скрытие и показ элементов.
так скрывайте
document.getElementById('el').style.display='none' ;
и будет вам счастье, т.к. элемент не будет участвовать в формировании страницы.
А остальное вообще к js не относится.

skrudjmakdak 07.05.2013 21:21

>>>Правила только для того, чтобы соблюдать это не правила.
Ответ:
И все таки правила нужны для того что бы их соблюдать!!
возьмем простую строку:
var a = 1;
все просто var говорит, о том что мы инициализируем переменную
a - это имя переменной.
после чего идет знак равно и потом тому чему она должна равна, тобишь 1.

вот теперь давайте выйдем за границы правил? ну например так:
a = 1 var;
запустите.. выбьет с ошибкой. а все почему? ПРАВИЛА. конечно это не законы физики, которые нам даны не известно откуда.
а эти правила придумали люди. но их тоже нужно соблюдать.. и если сказано нужно делать так, то нужно делать именно так и не иначе..

>>>Вы в примере показываете, что можно отделить стиль от дива, это понятно, вопрос в том, удобно ли мне это
Ответ: я считаю так. вы видите это (мой код) впервые, поэтому непривычно. как говорится свое "говницо" роднее. вам нужно привыкнуть. а насчет удобности, конечно удобно.. еще лучше вообще в другой файл это кидать.

>>>сейчас для меня важна только функциональность (чтобы работало).
Ответ: сейчас для вас научится писать небольшие программки. это все равно что какой нибудь дрыщь захочет поднимать штанги по 200кг..

>>>Лит-ру можно читать, ещё можно курить или пить
Ответ: вы строите свою жизнь, выбор завами...

>>>Простое прочтение мало даст ясности, особенно, когда читаешь не нужный на данный момент материал.
Ответ: могу поискать ссылки, книги по javascript, вот форум.. есть вопросы задавайте...

>>>Зачем 30 страниц на одной? Потому что не происходит ни каких переходов со страницы на страницу и обновления страницы, поэтому и программа не печатает абсолюты сверху.
Ответ: пихать все на одну страницу, имхо извращение.. дело конечно ваше

>>>Если буду заниматься то пойму, но тогда я не буду заниматься другим (возможно более важным) и не пойму его.
Ответ: за двумя зайцами погонишься... дальше думаю знайте..


филосовствовать можно долго на эту тему. вот только была бы польза от всего этого.
как правильно заметил(а) zebra, тут скорей всего вам нужно изучать верстку.. почитайте css, ссылку давал выше.. плюс инет, гугл.. и в том духе.. литературы там много.

вот насчет вашего задания, четно я мало что понял, но вот еще пример(что то на подобии табпанели):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
	<style type="text/css">
.tabpanel
{
position: relative;
width: 600px;
height: 400px;
top: 30px;
left: 30px;
border: 1px solid black;
}

.tabmenu
{
width: 598px;
height: 23px;
border: 1px solid black;
}

.tabmenuitem
{
width: 100px;
font-size: 11px;
font-family: arial;
height: 17px;
border: 1px solid black;
text-align: center;
margin: 2px;
cursor: pointer;
float: left;
}

.tab
{
width: 590px;
border: 1px solid black;
margin: 4px;
height: 366px;
position: absolute;
}

.tab_content
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
	</style>
	<script type="text/javascript">
var openElement = 0;
function openTab(index)
	{
	var tab = document.getElementById('tabs');
	tab.children[openElement].style.display = 'none';
	
	
	tab.children[index].style.display = 'block';
	
	//----
	tab = document.getElementById('menu');
	tab.children[openElement].style.backgroundColor = '';
	tab.children[index].style.backgroundColor = 'green';
	//----
	
	openElement = index;
	}
	
	</script>
	</head>
	<body>
		<div class="tabpanel">
			<div class="tabmenu" id="menu">
				<div class="tabmenuitem" onclick="openTab(0);" style="background-color: green;">нажми меня</div>
				<div class="tabmenuitem" onclick="openTab(1);">таб 2</div>
				<div class="tabmenuitem" onclick="openTab(2);">таб 3</div>
				<div class="tabmenuitem" onclick="openTab(3);">таб таб таб</div>
			</div>
			<div class="tab" id="tabs">
				<div class="tab_content" style="display: block;">
					<div>открыта первая вкладка!! разуемся и машем</div>
				</div>
				<div class="tab_content" style="display: none;">
					<div><input type="button" value="кликни меня" onclick="alert('йопта! меня нажали!!!');"></div>
				</div>
				<div class="tab_content" style="display: none;">
					<div>тутачки третья вкладка</div>
				</div>
				<div class="tab_content" style="display: none;">
					<div>ну тута тоже текст</div>
				</div>
			</div>
		</div>
	</body>
</html>

bes 07.05.2013 23:11

Цитата:

Сообщение от Masterli
Кажется я не понимаю основ html

почитай про xml

Цитата:

Сообщение от Masterli
нужны ли JS у теги

http://es5.javascript.ru/x4.html#x4
Цитата:

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

Masterli 13.05.2013 14:52

skrudjmakdak
Спасибо за расширенный ответ.
Если всё переделать, ошибка скорее всего исчезнет, но я так и не пойму её природы. Ну да ладно.
Основной вопрос не в том, как исправить ошибку, а как выстроить наиболее правильный алгоритм программирования.

Есть конкретный вопрос.
Сразу писать слои в файле (index.html) или создавать слои из JS, а потом их добавлять, удалять?

Я бы почитал про алгоритм программирования, какие есть модели. Модель MVC слишком обобщённая, хотелось бы как можно подробнее понять, что выносить в отдельные файлы.
У меня сейчас Index.html со слоями (дивами), otobrajenie.js с функциями показа и скрытия групп слоёв (управление страницами),
algoritm.js с основным кодом и server.php с ответами сервера, на различные запросы.
А как делать наиболее правильнее и понятнее для других?
Спасибо.
Очень благодарен.

Masterli 13.05.2013 14:56

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

Печально вы меня оцениваете. Никогда не хотел заниматься программированием, но пришлось. Вообще мучаюсь давно, лет 6 по маленьку.
Да и чтобы работало сделать магу, просто требую от себя сделать более правильно. Чтобы работало при любых значениях, чтобы можно было сделать и забыть.

Masterli 15.05.2013 16:45

Честно говоря штанга в 200 кг, даже для становой тяги не мало, не говоря уже про присяд или жим.
Очень не красивое сравнение. Не думал, что я совсем ничего не знаю в программировании и как то слишком быстро вы меня оценили


Часовой пояс GMT +3, время: 09:53.