Jump to content
  • 0

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

TimLennon

Asked by TimLennon,

 Share

Question

TimLennon Explorer

TimLennon

Posted
Posted (edited)

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

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

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

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

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

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

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

Edited by TimLennon
Link to comment
Share on other sites

25 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted
  TimLennon said:
Всем доброго дня.

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

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
TimLennon Explorer

TimLennon

Posted
  • Author
Posted

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

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

2) Вот скрин

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

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

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)

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

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

Edited by mishka2
Link to comment
Share on other sites
  • 0
TimLennon Explorer

TimLennon

Posted
  • Author
Posted

mishka2

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

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

s0rr0w

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

Link to comment
Share on other sites
  • 0
gordi Explorer

gordi

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

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

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
TimLennon Explorer

TimLennon

Posted
  • Author
Posted (edited)
  psywalker said:
ТС, а зачем тебе вообще З-индексы в твоей ситуации? Ты, я так понял просто хочешь сайт сверстать, как на картинке? Ну и верстай как обычно, а ещё лучше верстай дивами.

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

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

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

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

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

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

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

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

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

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

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

Edited by TimLennon
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

Link to comment
Share on other sites
  • 0
TimLennon Explorer

TimLennon

Posted
  • Author
Posted (edited)
  psywalker said:
Ну вообще да, я бы такую штуку делал именно фоном пнг. Удобнее намного, не надо использовать тяжёлое оружие и кода меньше.

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

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

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

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

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

Edited by TimLennon
Link to comment
Share on other sites
  • 0
TimLennon Explorer

TimLennon

Posted
  • Author
Posted (edited)

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

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

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

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кб)) пустяк:D), задать им z-index'ы, а потом дать возможность скриптом менять их з-индексы. Реально сотворить нечто подобное :)?

Edited by TimLennon
Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

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

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

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

Link to comment
Share on other sites
  • 0
TimLennon Explorer

TimLennon

Posted
  • Author
Posted (edited)
  mishka2 said:
Абсолютно невижу препятствий в том что это будет CMS. Так как ненадо вырезать огромную картинку под размер странички. Достаточно квадратик 10х10 пикселей и репитить его.

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

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

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

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

Edited by TimLennon
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept