Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 27.04.2013, 02:58   #1
SKS
Форумчанин
 
Аватар для SKS
 
Регистрация: 05.01.2009
Сообщений: 242
По умолчанию подробнее о представляемом материале

Всем привет!
Все мы видели сводки новостей на сайтах, как правило пара абзацев новостей видны, а остальное скрыто за ссылкой "подробнее" или "читать дальше" и т.д.
У меня вопрос:
как реализовать в HTML подобное?
Сейчас я использую спойлер, но при раскрытии спойлера в самом спойлере не поучается применить текстуру страницы и в общем когда пользователь "чакает" по кнопке "подробнее" открывается пойлер с белым фоном.
вот мой код:
Код:
<div style="margin: 5px 1px 1px;">
	<div class="smallfont" style="margin-bottom: 2px;">
		<h4 style="color: #000000;">
		26 апреля проводился субботник
		</h4><input style="font-size: 12px; margin: 0px; padding: 0px; width: 100px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Скрыть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Подробнее'; }" type="button" value="Подробнее" />
	</div>
	<div class="alt2" style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-size: auto auto; background-attachment: scroll; background-color: whitesmoke; background-image: none; background-position: 0% 50%; background-repeat: repeat; border: 1px inset; line-height: 1.5em; margin: 0px; padding: 0px;">
		<div style="display: none;">
			<p><span style="color: #000000;">данное мероприятие ...</span>
			</p>
		</div>
	</div>
Если есть варианты реализации, подскажите пожалуйста!
заранее благодарю!
SKS вне форума Ответить с цитированием
Старый 27.04.2013, 04:13   #2
SKS
Форумчанин
 
Аватар для SKS
 
Регистрация: 05.01.2009
Сообщений: 242
По умолчанию

Малость доработал. Сделал чтобы фон у спойлера был и убрал границы, вроде что-то похоже.
Код:
<div style="margin: 5px 1px 1px;">
	<div class="smallfont" style="margin-bottom: 2px;">
		<h4 style="color: #000000;">
		26 апреля проводился субботник
		</h4><input style="font-size: 12px; margin: 0px; padding: 0px; width: 100px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Скрыть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Подробнее'; }" type="button" value="Подробнее" />
	</div>
	<div class="alt2" style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-size: auto auto; background-attachment: scroll; background-color: whitesmoke; background-image: url('images/1.png'); background-position: 0% 50%; background-repeat: repeat; border: 0px inset; line-height: 1.5em; margin: 0px; padding: 0px;">
		<div style="display: none;">
			<p><span style="color: #000000;">данное мероприятие ...</span>
			</p>
		</div>
	</div>
SKS вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
реализация random подробнее внутри... zyxel-md Помощь студентам 12 14.01.2013 18:33
Объснить код калькулятора по подробнее! serverrulit Помощь студентам 2 15.11.2012 02:16
Компонент - кнопка(подробнее в теме) MeTeOpA Компоненты Delphi 4 05.09.2010 00:08
расскажите подробнее об operator Пепел Феникса Общие вопросы C/C++ 8 09.11.2009 00:09