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

Question

[Александр Кузнецов]

Помогите пожалуйста оформить спойлер правильно. Код написал, все работает. Не могу сделать так, чтобы при нажатии на кнопку, контент появлялся точно под картинкой. И по макету, появляющийся по нажатию блок, должен находить на нижележащий блок с контентом. И должен быть полупрозрачным. Вот ссылка jsfiddle.net/298u3ete

Спасибо, заранее

Answer 1

[Глюкъ Виртуален]

"Во-1 никогда не используй отвертку"
"Во-2 никогда не используй молоток"
"В-3 никогда..."
"В-4 всегда..."
Настолько категоричные советы обычно приходят от тех, кто никогда не использует мозг. Да еще и путает transparent с opacity ;)

Замените у себя:

.spoiler .text {
position: absolute;
bottom: -5px;
		font-family:"gotham_probold", sans-serif;
		font-size: 16px;
		text-transform: uppercase;
		background: #def;
		padding: 10px;
		color: #9c9c9c;
		border-bottom: 1px solid #f0f0f0;
		clear: both;
opacity: 0.6;
	}

Это то что вы хотели?
И второе: нестандартные шрифты нужно сначала откуда-то загрузить, но с этим вы справитесь самостоятельно, если погуглите.

Comments

[Александр Кузнецов]

Большое спасибо за ответ. Видимо я не совсем корректно задал вопрос. Попробовал Ваш код и стало ближе к истине. Есть одно но. Далее после блока со спойлером идет другой div. Так вот мне надо, чтобы при нажатии на кнопку, содержимое спойлера открывалось поверх заголовка jsfiddle.net/298u3ete/1

Буду признателен за любую помощь.
Спасибо

[Глюкъ Виртуален]

Александр Кузнецов: ну так и перенесите его туда.

[Александр Кузнецов]

Большое спасибо. Все сработало

[Глюкъ Виртуален]

Александр Кузнецов: тогда нажмите "отметить как решение", а то вопрос до сих пор считается нерешенным.

Answer 2

[Andrew Ghostuhin]

Во-первых никогда не используй absolute, бей себя по рукам за такое, потом будет житься лучше
Во-вторых, оборачивай элементы в родительский враппер для дальнейшего позиционирования и прочих извращений
В-третьих я не вижу у тебя нигде transparent…для прозрачности…