Позиционирование Google +1

Jekis · November 17, 2011

Всем добрый вечер. У меня проблема мучаюсь уже 3 день никак не могу её решить. Мне необходимо выровнять кнопку google +1 остальными. Но в разных браузерах всегда разное позиционирование данной кнопки.

Вот так отображается в GChrome и FireFox

А так в Opera и IE.

Код картинок рядом.

	position:absolute;
	top:69px;
	width:108px;
	height:24px;
	right:0px;

Код самой кнопки:

position: absolute; right:111px; top:59px;

Когда меняешь top в Opera и IE отображается как надо а в GChrome и FireFox наоборот съезжает.

Edited November 17, 2011 by Jekis

ShumNo · November 17, 2011

я конечно не знаю, но быть может не использовать position:absolute; а разместить в потоке

Jekis · November 17, 2011

Если не использовать position:absolute кнопка прыгает по углам вообще!

sammasati · November 17, 2011

Судя по

top:69px;
top:59px;

в хроме и фф где-то вылезают 10 пикселей, на которые опера и ие забили болт.

Попробуй переместить код кнопки +1 рядом с кодом остальных кнопок.

Ну и неплохо было бы посмотреть на весь код страницы.

gurylyov · November 17, 2011

Это не решение проблемы, но могу посоветовать вместо кода кнопки сделать ссылку. Правда, функционал разный. Кнопка делает +1, а ссылка будет отправлять в ленту гугл+. Адрес ссылки _http://plusone.google.com/_/+1/confirm?hl=ru&url=АДРЕС_СТРАНИЦЫ Её в разы проще выравнивать. К тому же, если не ошибаюсь, все остальные кнопки соц. сетей реализованы у вас также.

Если это "решение" не подходит, нужно видеть код всего блока, в котором у вас находятся социокнопки. Желательно ещё и весь файл css. На случай, если есть какие-то глобальные стили, образно говоря. К примеру, если кнопка реализована тегом <a> и есть какой-то на этот тег стиль. В общем, мало информации.

наткнулся только что в гугл плюсе)))

1%25D1%258E%25D0%25BE%25D0%25B7%25D0%25BF.jpg

Edited November 17, 2011 by gurylyov

Jekis · November 18, 2011

Вот код блока где находятся кнопки:


/*===== header =====*/
.logo { 
		position:absolute;
		left:-46px;
		top:-30px;
		width:320px;
		height:100px;
}

.share { ([b]СТИЛЬ КНОПОК РЯДОМ[/b])
	position:absolute;
	top:69px;
	width:108px;
	height:24px;
	right:0px;
}

.gp  {  ([b]СТИЛЬ КНОПКИ G+[/b])
	position:absolute;
	right:111px;
	top:59px;

}
header nav {
	position:absolute;
	left:0;
	top:95px;
}
	header nav ul li {
		font-size:16px;
		line-height:1.2em;
		text-transform:uppercase;
		float:left;
		margin-left:13px;
		padding-left:14px;
		background:url(../images/divider.gif) no-repeat left 9px;
	}
	header nav ul li:first-child {
		background:none;
		margin-left:0;
		padding-left:0;
		width:140px;
	}
		header nav ul li a {
			text-decoration:none;
			width:141px;
			text-align:center;
			display:block;
			behavior:url(../js/PIE.htc);
			position:relative;
			padding:20px 0 26px 0;
		}
		header nav ul li a:hover,
		header nav ul li.current a {
			color:#0c0c0c;
			background:url(../images/nav-act-tail.gif) repeat-x left top;
			border-radius:8px;
			-moz-border-radius:8px;
			-webkit-border-radius:8px;
		}
header .top-links {
	position:absolute;
	right:281px;
	top:44px;
}
	header .top-links li {
		border-left:1px solid #3d6ca7;
		font-size:.917em;
		line-height:1.2em;
		padding-left:13px;
		margin-left:13px;
		float:left;
	}
	header .top-links li:first-child {
		border:none;
	}
		header .top-links li a {
			color:#3d6ca7;
			text-decoration:none;
		}
		header .top-links li a:hover {
			text-decoration:underline;
			color:#6b6b6b;
		}
header .title {
	position:absolute;
	top:187px;
}
header p.text {
	font-weight:bold;
	position:absolute;
	right:234px;
	top:295px;
	width:273px;
	color:#000;
}
header .buttons {
	position:absolute;
	width:204px;
	height:173px;
	background:url(../images/buttons-wrapper.jpg) no-repeat left top;
	top:185px;
	right:0;
}
	header .buttons ul {
		padding:14px 0 0 14px;
	}
		header .buttons ul li {
			padding-bottom:4px;
		}

Edited November 18, 2011 by Jekis

sammasati · November 18, 2011

Это стили кнопок, а не их код.

Код кнопки +1 выглядит как-то так:

<g:plusone annotation="none"></g:plusone>

Его нужно поставить рядом с остальными кнопками, чтобы он находился в одном с ними контейнере (блоке-родителе). Ну и задаеть ему "top: 69px" как у других кнопок.

Jekis · November 18, 2011

Это стили кнопок, а не их код.
Код кнопки +1 выглядит как-то так:
<g:plusone annotation="none"></g:plusone>
Его нужно поставить рядом с остальными кнопками, чтобы он находился в одном с ними контейнере (блоке-родителе). Ну и задаеть ему "top: 69px" как у других кнопок.

Почитайте посты выше.

Jekis · November 18, 2011

Пытался поставить top 0px; чтобы кнопки располагались выше поиска, в итоге в ie и opera всё ровно в ряд, а firefox и chrome кнопка G+ спустилась чуть ниже остальных. (

sammasati · November 18, 2011

Почитал. Кода страницы как не было, так и нету.

Вот код блока где находятся кнопки:

Это стиль! Чтобы понять в чем проблема, нам нужен исходный код самой страницы.

Пытался поставить top 0px; чтобы кнопки располагались выше поиска, в итоге в ie и opera всё ровно в ряд, а firefox и chrome кнопка G+ спустилась чуть ниже остальных. (

Так я тебе и пытаюсь объяснить, что один из родительских блоков кнопки +1 смещен, поэтому кнопка прыгает. Абсолютная позиция - она не совсем абсолютная.

Edited November 18, 2011 by sammasati

Softlink · November 18, 2011

Jekis, может вы, в конце концов, уже ссылку на страницу дадите? Или еще пару дней погадаем как вам помочь?

Jekis · November 18, 2011

Jekis, может вы, в конце концов, уже ссылку на страницу дадите? Или еще пару дней погадаем как вам помочь?

Ссылки нету, сайт находится в разработке.

Softlink · November 18, 2011

Jekis, может вы, в конце концов, уже ссылку на страницу дадите? Или еще пару дней погадаем как вам помочь?
Ссылки нету, сайт находится в разработке.

Закиньте нужный кусок сайта сюда http://jsfiddle.net/ или на тестовый какой-нибудь хостинг. Очевидно же, что проблему методом тыка не решить.

Jekis · November 18, 2011

Jekis, может вы, в конце концов, уже ссылку на страницу дадите? Или еще пару дней погадаем как вам помочь?
Ссылки нету, сайт находится в разработке.
Закиньте нужный кусок сайта сюда http://jsfiddle.net/ или на тестовый какой-нибудь хостинг. Очевидно же, что проблему методом тыка не решить.

Тестовая страница (http://www.excel.repairtoolbox.com/)

Softlink · November 18, 2011

Добавил инлайн-стиль для <div class="gp"> top:-10px; и получился такой результат.

Jekis · November 18, 2011

Добавил инлайн-стиль для <div class="gp"> top:-10px; и получился такой результат.

У меня только в Chrome и Firefox так, в IE и Opere кнопка уехала вверх.

Edited November 18, 2011 by Jekis

Softlink · November 18, 2011

У вас есть доступ к стилям div id="plusone"? Уберите inline-block у него и оставьте позиционирование сверху нулевое. Вроде бы заработало как надо и в Опере и в ИЕ(9)

Jekis · November 18, 2011

Убрал inline-block поставил топ 0. Так же всё только теперь наоборот. (У вас есть доступ к стилям div id="plusone"?) не много не понял Вас, какой доступ, непосредственно напрямую к кнопке через google?

Softlink · November 18, 2011

Вы не убрали. Переопределите стиль его с инлайн-блока на просто блок с !important. Просто я не знаю, может стили генерятся скриптом.

Jekis · November 18, 2011

Вы не убрали. Переопределите стиль его с инлайн-блока на просто блок с !important. Просто я не знаю, может стили генерятся скриптом.

Может быть кеш не обновился посмотрите ещё раз.

Softlink · November 18, 2011

Вы не убрали. Переопределите стиль его с инлайн-блока на просто блок с !important. Просто я не знаю, может стили генерятся скриптом.
Может быть кеш не обновился посмотрите ещё раз.

Вы файрбагом или другими средствами разработчика-то пользуетесь? http://clip2net.com/s/1kqCa

Jekis · November 18, 2011

Вы не убрали. Переопределите стиль его с инлайн-блока на просто блок с !important. Просто я не знаю, может стили генерятся скриптом.
Может быть кеш не обновился посмотрите ещё раз.
Вы файрбагом или другими средствами разработчика-то пользуетесь? http://clip2net.com/s/1kqCa

Стиль скриптом генерируется.

Softlink · November 18, 2011

Пробуйте его переопределять с !important. Или див тоже генерируется?

Jekis · November 18, 2011

Не генерируется только <div class="gp">.

.gp {
        position:absolute;
        right:111px;
		top:0px;

<div id="___plusone_0"> полностью скриптом.

Softlink · November 18, 2011

Беда, тогда остальные кнопки не позиционируйте и задайте всем одинаковые обертки, например, инлайн-блок. Больше выходов я не вижу.

Jekis · November 18, 2011

Беда, тогда остальные кнопки не позиционируйте и задайте всем одинаковые обертки, например, инлайн-блок. Больше выходов я не вижу.

Спасибо попробую.

Sign In

Позиционирование Google +1

Question

Link to comment

Share on other sites

28 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information