Не кликабельность

Ergonav · February 28, 2012

В общем проблема такая, не работает виджет от вк "мне нравиться", знаю что намудрил что-то с div`ом, подскажите как решить проблемку.

html

<!DOCTYPE html>
<html>
<head>
	<link type="text/css" rel="stylesheet" href="style.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Заголовок</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="all" type="text/css" href="style.css" />
</head>
<body>

<div id="header">

  </div>

		<ul id="menu" class="grey">
		    <li><a href="#">О нас</a></li>
			<li><a href="#">Контакты</a></li>
			<li><a href="#">Новости</a></li>
			<li><a href="#">Главная</a></li>
		</ul>
</div>

<div id="sidebar">
<img src="images/1.png" border="0"  />
<div id="sidebar2">
<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?48"></script>

<script type="text/javascript">
  VK.init({apiId: 2731691, onlyWidgets: true});
</script>

<!-- Put this div tag to the place, where the Like block will be -->
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script>

</div>

<div id="content">

<p>Этот сайт создан специально для поддержки начинающих игроков. У вас есть возможность ежедневно получать урон не мучая своих друзей просьбами завалить кирпича или сизого!</p>

							<p>Всё что от вас требуется это в виджете "Мне нравится" нажать "Рассказать друзьям", так чтобы ссылка на этот сайт появилась у вас на стене. <strong>В базу игроков, которые получат урон, попадут только те кто выполнил это условие</strong>. Это необходимо для развития сервиса.</p>

							<p>Наш ежедневный рейд начинается в <strong>16:00</strong> по московскому времени. Урон получают все кто нажал рассказать друзьям до <strong>12:00</strong>. Остальные получат урон на следующий день. Своевременно подготовьте ключи для атаки. Рекомендуем нападать на боссов со здоровьем не более 500000.</p>

							<p><font style="color:red;">Внимание!</font> Раз в день база игроков удаляется, виджет "Мне нравится" обнуляется, чтобы и дальше получать урон вам будет нужно опять нажать "Рассказать друзьям". Проверяйте чтобы стояла галочка рядом с надписью "Рассказать друзьям".</p>

</div>

	<div id="footerright">
	Copyright © 2012<br />
	Разработка сайта - <a href="http://ergonav.ru" target="_blank">ergonav</a>



</body>
</html>

css

/* Made by ergonav (ICQ:# 648822) */

body{
background-color:white;
margin:0;
padding:0;
}
#header{
background-image:url(images/1.jpg);
margin:0 auto;
width:900px;
height:150px;
}
#sidebar{
width:900px;
height:375px;
position:absolute;
top:250px;
left:180px;
margin:0;
padding:0 0 0 10px;
}
#sidebar2{
position:absolute;
top:400px;
left:50px;
margin:0;
padding:0 0 0 10px;
}
#content{
width:500px;
position:absolute;
top:10px;
left:270px;
font-family:'Open Sans', sans-serif;
}
#footerright{
height:100px;
width:100%;
position:absolute;
bottom:90;
padding-top:50px;
padding-right:10px;
text-align:right;
font-size:11px;
}
a{
color:#00BFFF;
}
/* Менюшка */
			#menu{
position:absolute;
top:110px;
left:390px;
font-family:Arial, sans-serif;
font-weight:bold;
text-transform:uppercase;
margin:50px 0;
padding:0 0 0 10px;
list-style-type:none;
font-size:13px;
background:#eee;
height:40px;
}
#menu li{
float:right;
margin:0;
}
#menu li a{
text-decoration:none;
display:block;
padding:0 20px;
line-height:40px;
color:#666;
}
#menu li a:hover, #menu li.active a{
background-color:#f5f5f5;
border-bottom:2px solid #DDD;
color:#999;
}

Edited February 28, 2012 by Ergonav

Radiocity · February 28, 2012

Ссылки на ресурс. Не стесняйтесь давать ссылки на страницы с проблемой. Если не желаете, чтобы текст был ссылкой, добавьте подчеркивание перед http, вот так: _http://site.ru
Или делайте работающий прототип примера в http://jsfiddle.net/ и давайте ссылку на него.

На первый взгляд код правильный.

Проблема может быть либо в виджете, либо в неверном apiid.

Edited February 28, 2012 by Radiocity

Ergonav · February 28, 2012

Залил на субдомен

http://blog.ergonav.ru/

Edited February 28, 2012 by Ergonav

Ergonav · February 28, 2012

Виджет рабочий, т.к стоит мне поколдовать с div, всё начинает работать - только все плющит и растягивается в разные стороны

Edited February 28, 2012 by Ergonav

Searcher · February 29, 2012

Зачем все на абсолютном позиционировании то?! Да еще и высоты зачем-то фиксируете! Верстка плывет при разных разрешениях. Все сделано неправильно.

У вас подвал footerright перекрыл часть content и sidebar2 в котором виджет. Вот виджет и некликабельный.

Ergonav · February 29, 2012

Зачем все на абсолютном позиционировании то?! Да еще и высоты зачем-то фиксируете! Верстка плывет при разных разрешениях. Все сделано неправильно.
У вас подвал footerright перекрыл часть content и sidebar2 в котором виджет. Вот виджет и некликабельный.

Насчет подвала понял, как быть с неправильной версткой? как верстать-то?

Ergonav · February 29, 2012

#footerright{
padding-top: 10px;
padding-right: 20px;
text-align: right;
font-size: 11px;
}

А так правильно?

Заглянул кое-куда, так виджет работает.

Верстка плыть не будет?

Searcher · February 29, 2012

У вас обычная блочная верстка, зачем мудрить с абсолютным позиционированием? По умолчанию каждый следующий блок в коде выводится броузером под предыдущим. Для размещения картинки слева от текста достаточно её разместить в блоке с текстом и флоатнуть влево, а блоку задать overfloat:hidden. Под этим блоком описать подвал, а над этим блоком - шапку и меню безо всяких абсолютов. Для ограничения ширины и центрирования содержимого достаточно задать для body ширину и margin: 0 auto.

В такой ситуации верстка будет адекватно реагировать на изменения разрешения и содержимого.

Ergonav · February 29, 2012

Searcher, спасибо, сделал все как ты сказал, осталась маленькая проблема, как позиционировать виджет?

http://vk.ergonav.ru/

html

<!DOCTYPE html>
<html>
<head>
	<link type="text/css" rel="stylesheet" href="style.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Заголовок</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="all" type="text/css" href="style.css" />
</head>
<body>

<div id="header">

  </div>

		<ul id="menu" class="grey">
		    <li><a href="#">О нас</a></li>
			<li><a href="#">Контакты</a></li>
			<li><a href="#">Новости</a></li>
			<li><a href="#">Главная</a></li>
		</ul>
</div>

<img src="images/2.png">
<div id="vk">
<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?48"></script>

<script type="text/javascript">
  VK.init({apiId: 2731691, onlyWidgets: true});
</script>

<!-- Put this div tag to the place, where the Like block will be -->
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script>

</div>


<div id="content">

<p>Этот сайт создан специально для поддержки начинающих игроков. У вас есть возможность ежедневно получать урон не мучая своих друзей просьбами завалить кирпича или сизого!</p>

							<p>Всё что от вас требуется это в виджете "Мне нравится" нажать "Рассказать друзьям", так чтобы ссылка на этот сайт появилась у вас на стене. <strong>В базу игроков, которые получат урон, попадут только те кто выполнил это условие</strong>. Это необходимо для развития сервиса.</p>

							<p>Наш ежедневный рейд начинается в <strong>16:00</strong> по московскому времени. Урон получают все кто нажал рассказать друзьям до <strong>12:00</strong>. Остальные получат урон на следующий день. Своевременно подготовьте ключи для атаки. Рекомендуем нападать на боссов со здоровьем не более 500000.</p>

							<p><font style="color:red;">Внимание!</font> Раз в день база игроков удаляется, виджет "Мне нравится" обнуляется, чтобы и дальше получать урон вам будет нужно опять нажать "Рассказать друзьям". Проверяйте чтобы стояла галочка рядом с надписью "Рассказать друзьям".</p>

</div>

	<div id="footerright">
	Copyright © 2012<br />
	Разработка сайта - <a href="http://ergonav.ru" target="_blank">ergonav</a>



</body>
</html>

css


/* Made by ergonav (ICQ:# 648822) */

body{
width:900px;
background-color:#eee;
margin:0 auto;
padding:0;
}

#header{
background-image:url(images/1.jpg);
margin:0 auto;
height:150px;
}

img {
float: left;
padding: 0 25px 0 25px;
}

#vk{
margin:0;
padding: 0 25px 0 80px;
}

#content{
width:500px;
position:absolute;
top:200px;
left:480px;
font-family:'Open Sans', sans-serif;
}

#footerright{
padding-top: 50px;
padding-right: 20px;
text-align: right;
font-size: 11px;
}

a{
color:#00BFFF;
}

/* Менюшка */
                        #menu{
text-align:center;
margin:5px;
font-family:Arial, sans-serif;
font-weight:bold;
text-transform:uppercase;
padding:0 0 0 10px;
list-style-type:none;
font-size:13px;
background:#eee;
height:40px;
}
#menu li{
float:right;
margin:0;
}
#menu li a{
text-decoration:none;
display:block;
padding:0 20px;
line-height:40px;
color:#666;
}
#menu li a:hover, #menu li.active a{
background-color:#f5f5f5;
border-bottom:2px solid #DDD;
color:#999;
}

пробую через отступы padding, работает только в стороны, вниз-вверх не работает, не подскажешь?

Edited February 29, 2012 by Ergonav

Searcher · February 29, 2012

Простыни кода не нужны, у вас ведь все в сети лежит.

Вы сделали не так как я советовал. Почему content абсолютно?

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

После content пишите уже этот многострадальный счетчик, а за ним подвал.

Тут, вообще, вариантов верстки масса. Зависит от разных деталей в ожидаемом результате. Проблем тут нет, есть незнание предмета. Так что советую почитать самоучители на этом сайте (htmlbook.ru).

Sign In

Не кликабельность

Question

Ergonav

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Radiocity

Link to comment

Share on other sites

Ergonav

Link to comment

Share on other sites

Ergonav

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Ergonav

Link to comment

Share on other sites

Ergonav

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Ergonav

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information