проблема с спойлером - HTML и CSS

RomaVitiuk · 31.01.2013, 03:25

Создал на сайте блок "Кнопка сайта"
туда закинул саму кнопку и спойлер где должен быть код к ней!!
но когда открываешь спойлер там не код а готовая кнопка!!!
а да еще сама кнопка спойлера не по центру стоит!!!!
кто может помогите решить проблему!!!

код:

<div align="center"><a href="http://www.bratkozak.com.ua" target="_blank"><img src="http://www.bratkozak.com.ua/_ph/26/2/640384704.gif" title="Козацьке Стрілецьке Братство" /></a></div>
<button onclick="HideIt();">Отримати код кнопки</button>
<div id="HideMe" style="display: none;"><a href="http://www.bratkozak.com.ua" target="_blank"><img src="http://www.bratkozak.com.ua/_ph/26/2/640384704.gif" title="Козацьке Стрілецьке Братство" /></a></div>
<script>
function HideIt () {
var e = document.getElementById('HideMe');
if (!e.shown) {
e.shown = true;
e.style.display = 'block';
}
else {
e.shown = false;
e.style.display = 'none';
}
} // .function HideIt
</script>

yearmix · 31.01.2013, 13:11

Попробуй так
CSS

Код:

/*Этот див двигай куда хочеш*/
div.button	{
	margin-bottom:2em; 
	margin-top:2em; 
	margin-left: 22px;
	}
/*Этот будет привязан к нему*/
#yr {
	font-size:.75em;
	display:none;
	z-index:1000;
	position:absolute;
	top:50px;
	right:1;
	border:1px solid #ccc;
	border-top:none;
	border-right:none;
	background-color:white;
	width:300px;
	}

HTML

Код:

<div class="button">
<a href="#yd"
onclick="document.getElementById('yr').style.display=document.getElementById('yr').style.display=='none'?'block':'none';
return(false)">
Линка или кнопка
</a>
<div id="yr" style="display:none">
<p class="yr">Something content</p>
<div class="image"><span style="color:#555555;"><img src="" alt="" width="110" height="110" border="0" /></span></div>
<p>
Something content
</p>
<div id="tagrule"><span style="color:#555555;"><img src="" /></span></div>
<p class="yr">
<a href="#yd"
onclick="document.getElementById('yr').style.display=document.getElementById('yr').style.display=='none'?'block':'none'; return(false)">закрыть</a>
</p>
</div>
</div>

RomaVitiuk · 31.01.2013, 13:28

Не подходит!!
Такая же ситуация!!

yearmix · 31.01.2013, 13:56

Цитата:

Сообщение от RomaVitiuk

Не подходит!!
Такая же ситуация!!

Ой ошибся в position:relative;
Попробуй так

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
body{
	background-color: #666;
	}
/*Этот див двигай куда хочеш*/
div.button	{
	margin-bottom:2em; 
	margin-top:10em; 
	margin-left: 22px;
	}
/*Этот будет привязан к нему*/
#yr {
	font-size:0.75em;
	display:none;
	z-index:1000;
	position:relative;
	top:50px;
	right:1;
	border:1px solid #ccc;
	border-top:none;
	border-right:none;
	background-color:#9C3;
	width:300px;
}
</style>
<body>
<div class="button">
<a href="#yd"
onclick="document.getElementById('yr').style.display=document.getElementById('yr').style.display=='none'?'block':'none';
return(false)">
Линка или кнопка
</a>
<div id="yr" style="display:none">
<p class="yr">Something content</p>
<div class="image"><span style="color:#555555;"><img src="" alt="" width="110" height="110" border="0" /></span></div>
<p>
Something content
</p>
<div id="tagrule"><span style="color:#555555;"><img src="" /></span></div>
<p class="yr">
<a href="#yd"
onclick="document.getElementById('yr').style.display=document.getElementById('yr').style.display=='none'?'block':'none'; return(false)">закрыть</a>
</p>
</div>
</div>
</body>
</html>

Naive · 31.01.2013, 15:50

Замени угловые скобки "<" и ">" на спецсимволы "<" и ">"

RomaVitiuk · 31.01.2013, 16:05

Цитата:

Сообщение от yearmix

Ой ошибся в position:relative;
Попробуй так

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
body{
	background-color: #666;
	}
/*Этот див двигай куда хочеш*/
div.button	{
	margin-bottom:2em; 
	margin-top:10em; 
	margin-left: 22px;
	}
/*Этот будет привязан к нему*/
#yr {
	font-size:0.75em;
	display:none;
	z-index:1000;
	position:relative;
	top:50px;
	right:1;
	border:1px solid #ccc;
	border-top:none;
	border-right:none;
	background-color:#9C3;
	width:300px;
}
</style>
<body>
<div class="button">
<a href="#yd"
onclick="document.getElementById('yr').style.display=document.getElementById('yr').style.display=='none'?'block':'none';
return(false)">
Линка или кнопка
</a>
<div id="yr" style="display:none">
<p class="yr">Something content</p>
<div class="image"><span style="color:#555555;"><img src="" alt="" width="110" height="110" border="0" /></span></div>
<p>
Something content
</p>
<div id="tagrule"><span style="color:#555555;"><img src="" /></span></div>
<p class="yr">
<a href="#yd"
onclick="document.getElementById('yr').style.display=document.getElementById('yr').style.display=='none'?'block':'none'; return(false)">закрыть</a>
</p>
</div>
</div>
</body>
</html>

а можно попроще?? Это нужно в блок сайта вставить на укозе!!!

RomaVitiuk · 31.01.2013, 16:08

Цитата:

Сообщение от Naive

Замени угловые скобки "<" и ">" на спецсимволы "<" и ">"

зделал получился такой вот код:

<div align="center"><a href="http://www.bratkozak.com.ua" target="_blank"><img src="http://www.bratkozak.com.ua/_ph/26/2/640384704.gif" title="Козацьке Стрілецьке Братство" /></a></div>
<button onclick="HideIt();">Отримати код кнопки</button>
<div id="HideMe" style="display: none;"><a href="http://www.bratkozak.com.ua" target="_blank"><img src="http://www.bratkozak.com.ua/_ph/26/2/640384704.gif" title="Козацьке Стрілецьке Братство" /></а></div>
<script>
function HideIt () {
var e = document.getElementById('HideMe');
if (!e.shown) {
e.shown = true;
e.style.display = 'block';
}
else {
e.shown = false;
e.style.display = 'none';
}
} // .function HideIt
</script>

при нем показывает только половину кода тоесть вот так

<a href="http://www.bratkozak.com.ua" target="_blank

Naive · 01.02.2013, 07:09

Замени все угловые скобки "<" и ">" на спецсимволы "<" и ">"

RomaVitiuk · 04.02.2013, 18:20

Цитата:

Сообщение от Naive

Замени все угловые скобки "<" и ">" на спецсимволы "<" и ">"

Большое спасибо вам)))

31.01.2013, 03:25	#1
RomaVitiuk Регистрация: 30.01.2013 Сообщений: 5	проблема с спойлером Создал на сайте блок "Кнопка сайта" туда закинул саму кнопку и спойлер где должен быть код к ней!! но когда открываешь спойлер там не код а готовая кнопка!!! а да еще сама кнопка спойлера не по центру стоит!!!! кто может помогите решить проблему!!! код: <div align="center"><a href="http://www.bratkozak.com.ua" target="_blank"><img src="http://www.bratkozak.com.ua/_ph/26/2/640384704.gif" title="Козацьке Стрілецьке Братство" /></a></div> <button onclick="HideIt();">Отримати код кнопки</button> <div id="HideMe" style="display: none;"><a href="http://www.bratkozak.com.ua" target="_blank"><img src="http://www.bratkozak.com.ua/_ph/26/2/640384704.gif" title="Козацьке Стрілецьке Братство" /></a></div> <script> function HideIt () { var e = document.getElementById('HideMe'); if (!e.shown) { e.shown = true; e.style.display = 'block'; } else { e.shown = false; e.style.display = 'none'; } } // .function HideIt </script>

01.02.2013, 07:09	#8
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Замени все угловые скобки "<" и ">" на спецсимволы "<" и ">" Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Неблокирующий сокет Си проблема с закрытием, проблема с закрытием сокетов в цикле	mnx_vol	C/C++ Сетевое программирование	0	06.11.2012 13:57
Проблема с рамами/Проблема с ЖД	DRAGGER	Компьютерное железо	6	04.01.2009 23:37

31.01.2013, 13:28	#3
RomaVitiuk Регистрация: 30.01.2013 Сообщений: 5	Не подходит!! Такая же ситуация!!

31.01.2013, 15:50	#5
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Замени угловые скобки "<" и ">" на спецсимволы "<" и ">" Alar, верни репу!