Как пустить текст полной новости поверх картинки?

[trianon14 7]

Задача простейшая на первый взгляд. Но возникли трудности. Все свойства в css указаны верно, но сам текст новости всё равно идёт под картинкой, а не поверх неё, ведь z-index указан для всего блока full-story и картинка всё перекрывает. Кто-нибудь может подсказать, где ошибка и как реализовать задуманное? Вот кусок стилей full-story на всякий случай. (z-index:0 в свойствах картинки результата не дал).

/* NEWS POST */

.story{

width:670px;

padding-bottom:20px;

margin:320px 0 0 -255px;

position:relative;

z-index:1000;

}

.full-story{

width:650px;

padding:0 10px 10px 10px;

color:#333;

font-size:14px;

line-height:130%;

border: 0px solid #cfd1d4;

margin:0px 0px 0px 0px;

position:relative;

z-index:1000;

}

.full-story a {

color:#286eb1;

font-size:13px;

}

.full-story a:hover {

color:#303030;

text-decoration:none;

}

.full-story img {

margin:-660px 10px 10px -325px;

max-width:990px;

position:fixed;

}

.full-story ul, .full-story ol {

margin-left:15px;

}

.post-title{

font-size:35px !important;

color:#fff;

text-decoration:none;

font-family:"Arial";

line-height:30px;

margin-bottom:5px;

position:relative;

font-weight:bold;

text-align:center;

text-shadow: rgba(0, 0, 0, 0.2) 2px 4px 0;

z-index:1000;

}

.post-title h1, post-title a h1{

font-size:18px !important;

display:inline;

}

.post-title a{

font-weight:bold;

color:#286eb1;

font-size:18px !important;

text-decoration:underline;

font-family:"Arial";

}

.post-title a:hover{

color:#303030;

text-decoration:underline;

}

[odys 384]

Дай ссылку на сайт или покажи код, сложно в догадки играть как прописан сам html...

[trianon14 7]

Дай ссылку на сайт или покажи код, сложно в догадки играть как прописан сам html...

Вот ссылка на страницу. Я сократил main.tpl и fullstory.tpl до скелета. Мне необходимо, чтобы текст полной новости шёл по z-оси выше, чем картинка. Что только не перепробовал. Но он всегда идёт под картинкой. Не могу найти ошибку. В самой новости картинка идёт самой первой. После неё текст. Причём только текст полной новости не хочет идти поверх картинки, все остальные блоки отрабатывают свойство z-index корректно.

http://gadgeting.ru/...hi-molodec.html

Изменено 15 октября 2014 пользователем trianon14

[alex32 942]

вы неправильно работаете с z-index. Насандалили его куда не попадя и непонятно как. У картинки z-index должен быть меньше, чем у текста. То есть, сейчас надо разделить заголовок, текст и картинку, и им уже задавать z-index. сделайте у заголовка например 100, у картинки 10, у текста полной новости тоже 100, тогда будет так как вы хотите

[trianon14 7]

вы неправильно работаете с z-index. Насандалили его куда не попадя и непонятно как. У картинки z-index должен быть меньше, чем у текста. То есть, сейчас надо разделить заголовок, текст и картинку, и им уже задавать z-index. сделайте у заголовка например 100, у картинки 10, у текста полной новости тоже 100, тогда будет так как вы хотите

Не смотрите код css в посте. Смотрите вебинспектором страницу. Там всё верно. Однако текст под картинкой.

[alex32 942]

Смотрите вебинспектором страницу.

я там и смотрел. где z-index у картинки?

Там всё верно. Однако текст под картинкой.

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

[trianon14 7]

Смотрите вебинспектором страницу.

я там и смотрел. где z-index у картинки?

Там всё верно. Однако текст под картинкой.

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

Так и есть у картинки отдельно. Я даже цифры выставил по вашей рекомендации.

Вот так это выглядит сейчас. И ничего не меняется.

/* NEWS POST */

.story{

width:670px;

padding-bottom:20px;

margin:320px 0 0 -255px;

}

.full-story{

width:650px;

padding:0 10px 10px 10px;

color:#333;

font-size:14px;

line-height:130%;

border: 0px solid #cfd1d4;

margin:0px 0px 0px 0px;

}

.full-story a {

color:#286eb1;

font-size:13px;

position:relative;

z-index:100;

}

.full-story a:hover {

color:#303030;

text-decoration:none;

}

.full-story img {

margin:-660px 10px 10px -495px;

max-width:990px;

position:fixed;

left:50%;

width:990px;

height:670px;

z-index:10;

}

.full-story ul, .full-story ol {

margin-left:15px;

}

.post-title{

font-size:35px !important;

color:#fff;

text-decoration:none;

font-family:"Arial";

line-height:30px;

margin-bottom:5px;

position:relative;

font-weight:bold;

text-align:center;

text-shadow: rgba(0, 0, 0, 0.2) 2px 4px 0;

z-index:100;

}

.post-title h1, post-title a h1{

font-size:18px !important;

display:inline;

}

.post-title a{

font-weight:bold;

color:#286eb1;

font-size:18px !important;

text-decoration:underline;

font-family:"Arial";

}

.post-title a:hover{

color:#303030;

text-decoration:underline;

}

Изменено 15 октября 2014 пользователем trianon14

[alex32 942]

опять неправильно. Отрываем и видим, что у картинки z-index вообще нет. надо не .full-story img а .fstory img Во вторых, у текста полной новости ни в коде, ни у вас в представленных здесь стилях z-index нет. full-story a - тут он вообще не нужен

[trianon14 7]

опять неправильно. Отрываем и видим, что у картинки z-index вообще нет. надо не .full-story img а .fstory img Во вторых, у текста полной новости ни в коде, ни у вас в представленных здесь стилях z-index нет. full-story a - тут он вообще не нужен

У меня нет такого пункта fstory img. У меня есть full-story img, где и фиксируется картинка и задаются её размеры. И не понял вот эту фразу - у текста полной новости ни в коде, ни у вас в представленных здесь стилях z-index нет. full-story a - тут он вообще не нужен

Изменено 15 октября 2014 пользователем trianon14

[alex32 942]

У меня нет такого пункта fstory img. У меня есть full-story img

а должен быть. Иерархия полной новости блок full-story, в нем блок fstory, в нем уже картинка и текст.

у текста полной новости ни в коде, ни у вас в представленных здесь стилях z-index нет

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

[trianon14 7]

Ну вот переименовал я full-story img в fstory img и добавил z-index самому тексту. И всё тщетно. Я уже все эти варианты за 5 дней борьбы с этой ошибкой перепробовал.

/* NEWS POST */

.story{

width:670px;

padding-bottom:20px;

margin:320px 0 0 -255px;

}

.full-story{

width:650px;

padding:0 10px 10px 10px;

color:#333;

font-size:14px;

line-height:130%;

border: 0px solid #cfd1d4;

margin:0px 0px 0px 0px;

position:relative;

z-index:100;

}

.full-story a {

color:#286eb1;

font-size:13px;

}

.full-story a:hover {

color:#303030;

text-decoration:none;

}

.fstory img{

margin:-660px 10px 10px -495px;

max-width:990px;

position:fixed;

left:50%;

width:990px;

height:670px;

z-index:10;

}

Изменено 15 октября 2014 пользователем trianon14

[master27 38]

.fstory img {

height: 670px;

left: 50%;

margin: -660px 10px 10px -495px;

max-width: 990px;

position: fixed;

width: 990px;

z-index: -1;

}

[trianon14 7]

master27! Спасибо огромное! И всем, кто откликнулся спасибо. Изменено 15 октября 2014 пользователем trianon14

[odys 384]

master27! Спасибо огромное! И всем, кто откликнулся спасибо.

на будущее чтобы проблем не было, пойми одну вещь, чтобы корректно работал z-index, у объектов, где он используется должно быть абсолютное, фиксированное позиционирование, тогда всё будет гуд. а z-index:-1; не выход т.к. для текста позиционирование не делаешь, а это уже ошибка, может и не критичная, но со временем они накопятся...

Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

вот подробнее: http://htmlbook.ru/css/z-index

Изменено 15 октября 2014 пользователем odys

[trianon14 7]

master27! Спасибо огромное! И всем, кто откликнулся спасибо.

на будущее чтобы проблем не было, пойми одну вещь, чтобы корректно работал z-index, у объектов, где он используется должно быть абсолютное, фиксированное позиционирование, тогда всё будет гуд. а z-index:-1; не выход т.к. для текста позиционирование не делаешь, а это уже ошибка, может и не критичная, но со временем они накопятся...

Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

вот подробнее: http://htmlbook.ru/css/z-index

Принцип работы z-index я знаю. Какой смысл цитировать общеизвестные правила и критиковать решение, если у вас нет альтернативного варианта? Если вы считаете, что z-index:-1 - это не выход, то предложите выход. Я воспользуюсь вашим советом. Он будет?

[celsoft 6 076]

Я воспользуюсь вашим советом. Он будет?

насколько я понял по переписке выше, вам собственно сказали выше ответ http://forum.dle-news.ru/index.php?showtopic=66800&view=findpost&p=333177 У вас текст и картинка в блоке .fstory и в вашем CSS что вы привели выше, нет, установленного позиционирования именно для текста. Т.е. отсутствует .fstory { position:relative; } или .fstory { position:absolute; } в зависимости от ситуации. А присутствовало позиционирование только для картинки .fstory img{...} а должно быть и для текста и для картинки, после чего z-index корретно применяется и к тексту и к картинке.

[trianon14 7]

Я воспользуюсь вашим советом. Он будет?

насколько я понял по переписке выше, вам собственно сказали выше ответ http://forum.dle-new...ndpost&p=333177 У вас текст и картинка в блоке .fstory и в вашем CSS что вы привели выше, нет, установленного позиционирования именно для текста. Т.е. отсутствует .fstory { position:relative; } или .fstory { position:absolute; } в зависимости от ситуации. А присутствовало позиционирование только для картинки .fstory img{...} а должно быть и для текста и для картинки, после чего z-index корретно применяется и к тексту и к картинке.

Совет давали. Я уже ответил, что это ничего не меняет и текст по-прежнему под картинкой.

И кстати отрицательные значения z-index абсолютно корректны и валидны.

[celsoft 6 076]

Я уже ответил, что это ничего не меняет и текст по-прежнему под картинкой.

В вашем ответе который вы дали и привели в пример код также нет правильного кода CSS о котором вам написали. Поэтому может быть вы и проверяли, но в ответе на данное сообщение опять привели неправильный код.

[trianon14 7]

Я уже ответил, что это ничего не меняет и текст по-прежнему под картинкой.

В вашем ответе который вы дали и привели в пример код также нет правильного кода CSS о котором вам написали. Поэтому может быть вы и проверяли, но в ответе на данное сообщение опять привели неправильный код.

Ну можно вот так, к примеру, сделать и ещё пару вариантов, если в этом ошибка. Можно оставить по 10 основных строк в main и fullstory, можно вообще изменить иерархию, но текст полной новости появится только при отрицательном z-index.

.fstory{

position:relative;

font-size:14px;

margin-bottom:20px;

z-index:100;

}

.fstory img{

margin:-660px 10px 10px -495px;

max-width:990px;

position:fixed;

left:50%;

width:990px;

height:670px;

z-index:10;

}

Изменено 15 октября 2014 пользователем trianon14

[alex32 942]

а где у вас тут написано, что текст имеет z-index выше, чем картинка?

[odys 384]

И кстати отрицательные значения z-index абсолютно корректны и валидны.

я не писал, что он не валиден, я просто написал, что это не выход

<style>

.variant1 {position:relative;width:500px;height:300px;}

.variant1 .img {position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;}

.variant1 .text {position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;}

</style>


<div class="variant1">

    <div class="img"></div>

    <div class="text"></div>

</div>

надеюсь под себя применить уже сможешь?

А вообще, при такой конструкции я-index не нужен и без него отображаться будет корректно

[trianon14 7]

а где у вас тут написано, что текст имеет z-index выше, чем картинка?

Я следовал вашим рекомендациям. У картинки 10, у текста 100.

[alex32 942]

текста 100.

Вы на вопрос не отвеили, в каком месте у вас у текста 100? в этом блоке находится И текст И картинка.

[trianon14 7]

текста 100.

Вы на вопрос не отвеили, в каком месте у вас у текста 100? в этом блоке находится И текст И картинка.

В каком "этом" блоке? Я буду благодарен за помощь с указанием на ошибки вёрстки, но у нас какая-то викторина получается. Если есть желание помочь то всегда рад, а если просто потроллить нужно, то не по адресу.

[alex32 942]

да это у меня уже ощущение, что вы потролить нас решили. вам сто раз одно и тоже пишут, а вы ингорируете и свое талдычите. http://forum.dle-news.ru/index.php?showtopic=66800&view=findpost&p=333197 тут вам все разжевали, я вам все расписал, что где и как, так нет же. Закрывать тему надо.