Проблема с свободным пространством при использовании Z-index

[TimLennon]

Всем доброго дня.

Начал верстать себе страничку, пришлось воспользоваться z-index'ом. Пример как работать с ним, посмотрел тут

Вот что получилось

Все классно только вот после использования z-index, начало с низу появляться свободное пространство, от которого не могу избавиться.

Интуиция подсказывает что сама описанная технология работы с z-index через "-top" не совсем корректна.

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

Заранее благодарен.

Edited December 27, 2009 by TimLennon

[psywalker]

Всем доброго дня.

Начал верстать себе страничку, пришлось воспользоваться z-index'ом. Пример как работать с ним, посмотрел тут

Все классно только вот после использования z-index, начало с низу появляться свободное пространство, от которого не могу избавиться.

Интуиция подсказывает что сама описанная технология работы с z-index через "-top" не совсем корректна.

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

Заранее благодарен.

1) Браузеры, в которых проблема?

2) Покажи скрин проблемы, заодно свой код и с подробным объяснением.

[TimLennon]

Спасибо за внимание.

1) Проблема во всех браунзерах.

2) Вот скрин

Еще я в первом сообщении выложил ссылку на сам сайт. Там вы возможно сможете увидить и саму проблему в кодах html и css.

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

[mishka]

проблема у тебя не в z-index. Тебе надо получше понять работу позиционирования. Релейтив, какбы, визуально смещает блок относительно его положения которое он занимает при статическом позиционировании, но блок также продолжает занимать это "статичесское" место.

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

Edited December 27, 2009 by mishka2

[s0rr0w]

Зачем таблице с id="layer1" устанавливается top: -1000px?

[TimLennon]

mishka2

Спасибо, я понял.

Вообще вся мука вышла из-за белой полупрозрачной таблицы. Сделать все остальные элементы страницы дочерними от этой таблици не получилось потому что все остальные элементы в нутри нее естественно становились тоже плоупрозрачными, и убрать мне это не как не удавалось. Пришлось обратиться к z-index'у. В позиционировании практики действительно не имею. Пожскажите как можно исправить или сверстать иначе.

s0rr0w

Как сказал mishka2, я не правильно понял работу позиционирования. В данном случае я использовал relative. Т.к. полупрозрачная таблица 1000 px, чтобы поднять серую полоску в самый верх пришлось соответственно написать -1000px. Я знаю что все это сделано криво и уверен чтоесть способ в 100500 раз проще. Подскажите пожалуйста как.

Всем спасибо за отзывы.

[psywalker]

ТС, а зачем тебе вообще З-индексы в твоей ситуации? Ты, я так понял просто хочешь сайт сверстать, как на картинке? Ну и верстай как обычно, а ещё лучше верстай дивами.

[gordi]

Все классно только вот после использования z-index, начало с низу появляться свободное пространство, от которого не могу избавиться.

Интуиция подсказывает что сама описанная технология работы с z-index через "-top" не совсем корректна.

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

Заранее благодарен.

В таблице стилей для начала закомментируйте все top: -XXX

Указание высоты для #layer2 вызывает известные сомнения

Для #main_table тоже не стоит прописывать высоту.

А далее по месту смотрите, что и как.

[TimLennon]

ТС, а зачем тебе вообще З-индексы в твоей ситуации? Ты, я так понял просто хочешь сайт сверстать, как на картинке? Ну и верстай как обычно, а ещё лучше верстай дивами.

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

Постараюсь обьяснить.

Полупрозрачность делаю через "opacity", т.е. если не использовать z-index, эту полупрозрачную таблицу(див) прейдется сделать материнской, а все остальные дивы внутри его, дочерними.

Я сначала так и поступил. Но у меня не получилось избавиться от прозрачности у внутренних(дочерних) дивах.

Т.е. у меня все было полупрозрачным )))

В таблице стилей для начала закомментируйте все top: -XXX

Указание высоты для #layer2 вызывает известные сомнения

Для #main_table тоже не стоит прописывать высоту.

А далее по месту смотрите, что и как.

Спасибо за внимание )))

По поводу всех минус топов обьяснил в сообщении выше. Высоту в main_table и дуйствитльно, убрал. спасибо.

Edited December 27, 2009 by TimLennon

[psywalker]

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

Постараюсь обьяснить.

Полупрозрачность делаю через "opacity", т.е. если не использовать z-index, эту полупрозрачную таблицу(див) прейдется сделать материнской, а все остальные дивы внутри его, дочерними.

Я сначала так и поступил. Но у меня не получилось избавиться от прозрачности у внутренних(дочерних) дивах.

Т.е. у меня все было полупрозрачным )))

Вот тебе избавление http://www.psywalker.ru/Forum/opacity/main-2.html

[TimLennon]

Вот тебе избавление http://www.psywalker.ru/Forum/opacity/main-2.html

Спасибо огромнейшее ))) получилось! ))

Осталось только на словах понять, как это работает))

[psywalker]

Спасибо огромнейшее ))) получилось! ))

Осталось только на словах понять, как это работает))

Да там всё просто, обман зрения Создаётся как раз слой полупрозрачный, который и тянется на всю высоту, а уже на него накладывается сам контент, только уже другим слоем. И конечноже всё это дело лежит в главном контейнере, вот и всё.

[TimLennon]

Все гениальное просто

Спасибо)))

[psywalker]

Все гениальное просто

Спасибо)))

Да не за что, обращайся если чё

[mishka]

В данном случае самое простое и гиниальное решение - бекграунд полупрозрачной белой картинкой png

[psywalker]

В данном случае самое простое и гиниальное решение - бекграунд полупрозрачной белой картинкой png

Если нужно будет менять прозрачность, тогда возникнут проблемы и лишние движения

[mishka]

переделать картинку несложно, зато правильная логика порезки.

[psywalker]

переделать картинку несложно, зато правильная логика порезки.

Ну вообще да, я бы такую штуку делал именно фоном пнг. Удобнее намного, не надо использовать тяжёлое оружие и кода меньше.

[TimLennon]

Ну вообще да, я бы такую штуку делал именно фоном пнг. Удобнее намного, не надо использовать тяжёлое оружие и кода меньше.

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

А вообще да, я всегда делал такое с помощью ПНГ. Спасибо за замечание

Вот что получилось: клац

Помоему чудесно.

Эх, впереди еще столько чего не знаю )))

Edited December 27, 2009 by TimLennon

[psywalker]

Мне показалось вначале: Страница Артема Лебедева

А сделал нормал, каким путём пошёл всё же?

[TimLennon]

Спасибо. Пошел Вашим путем.

Ходил пол часа бредил, "как я мог не додуматься"))

Но даже елси бы и додумался, то далеко не сразубы понял как сделать это:

div.wrap { 
		  width: 926px;
		position: relative;
		margin-bottom:50px;

	}
div.opacity{
		  width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		background-color:#FFFFFF;


		filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); /* IE 5.5+*/
		  filter:alpha(opacity=30); /* IE +*/
		  -moz-opacity: 0.3; /* Mozilla 1.6 и ниже */
		  -khtml-opacity: 0.3; /* Konqueror 3.1, Safari 1.1 */
		  opacity: 0.3; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
	}


div.content { 
		background-color: #333333;
		text-align:left;
		height: 26px;
		width: 900px;
		margin-left:13px;
		margin-right:13px;
		color:#FFFFFF;
		font-size:12px;

		position: relative; 
		z-index: 1;
		}

Все еще не выучил на изусть о всех позиционированиях, и теряюсь )))

Впереди еще во флеше нарисовать мониторчик. Ну эт не тяжело.

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

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

Палитру можно увидить в верхнем левом углу. Т.е. подготовить PNGшки градиенты, и каким-то образом за скриптить так, что бы по нажатию в палитре по соответствующем цвету, менялась PNGшка.)))

Изначально я представлял это себе так - Сразу все градиенты(фоны) выложить на сайт (Весит то градиент ПНГ всего 3кб)) пустяк), задать им z-index'ы, а потом дать возможность скриптом менять их з-индексы. Реально сотворить нечто подобное ?

Edited December 27, 2009 by TimLennon

[psywalker]

Да всё реально конеш, но я к сожалению в этом сам не смыслю ничерта, а так бы помог

[mishka]

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

А вообще да, я всегда делал такое с помощью ПНГ. Спасибо за замечание

Вот что получилось: клац

Помоему чудесно.

Эх, впереди еще столько чего не знаю )))

Абсолютно невижу препятствий в том что это будет CMS. Так как ненадо вырезать огромную картинку под размер странички. Достаточно квадратик 10х10 пикселей и репитить его.

С точки зрения того что это будет CMS нет никакой разницы между этими двумя подходами.

[psywalker]

Абсолютно невижу препятствий в том что это будет CMS. Так как ненадо вырезать огромную картинку под размер странички. Достаточно квадратик 10х10 пикселей и репитить его.

С точки зрения того что это будет CMS нет никакой разницы между этими двумя подходами.

Ага и очень удобно

[TimLennon]

Абсолютно невижу препятствий в том что это будет CMS. Так как ненадо вырезать огромную картинку под размер странички. Достаточно квадратик 10х10 пикселей и репитить его.

С точки зрения того что это будет CMS нет никакой разницы между этими двумя подходами.

Хехе, действительно, так и нужно было делать ))) Все настолько просто, что хочется материться)))

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

Спасибо, переделал на png 5х5px.

Edited December 27, 2009 by TimLennon

[psywalker]

Хехе, действительно, так и нужно было делать ))) Все настолько просто, что хочется материться)))

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

Спасибо, переделал на png 5х5px.

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