Логотип не стоит на месте

[Sperc]

Обычная страница. Background и div белого цвета, куда заключен текст. Div с текстом в обрамлении двух девчонок png с прозрачностью, а так же логотип сверху. Все эти элементы дочерние для div. У div position relative, у остальных - absolute. Но при отдалении девчонки остаются на месте, а логотип съезжает вправо. У всех дочерних элементов абсолютно одинаковые стили, разница только в координатах. Тем не менее проблемы именно с логотипом. Скрины прилагаю.

 

Нормально

 

 

При отдалении

 

[cyklop77]

не скрины надо прилагать, а код

[Sperc]

.container {

display: block;

width: 67%;

margin: 18% 16%;;

background-color: #fff;

border-radius: 4px;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

box-shadow: 0 0 10px rgba(0,0,0,0.5);

position: relative;

}

.container h3 {

padding: 100px;

padding-top: 100px;

padding-bottom: 0;

}

.container p {

padding: 7%;

padding-top: 3%;

padding-bottom: 0;

}

.logo {

position: absolute;

left:350px; top:-210px;

}

.image {

position: absolute;

left:-200px; top:-20px;

}

.image2 {

position: absolute;

right:-200px; top:-35px;

[Galaxy]

так лого же абсолютно спозиционировано

[Veseloff]

Что такое «при отдалении»? Первый раз слышу такой термин.

[Sperc]

так лого же абсолютно спозиционировано

Верно, именно за счет этого я добился, что картинки двух девчонок по бокам не трогаются с места. Почему с лого не так?

 

 

Что такое «при отдалении»? Первый раз слышу такой термин.

Имеется в виду ctrl + крутить колесо мышки назад

[cyklop77]

 

так лого же абсолютно спозиционировано

Верно, именно за счет этого я добился, что картинки двух девчонок по бокам не трогаются с места. Почему с лого не так?

 

 

Что такое «при отдалении»? Первый раз слышу такой термин.

Имеется в виду ctrl + крутить колесо мышки назад

 

потому что левая девочка спозиционирована относительно ленвого края экрана(left: ), а правая - относительно правого(right:). лого спозиционировано относительно левого края экрана(left:)

 

тут даже не css, а логика

Edited July 18, 2014 by cyklop77

[Sperc]

 

 

так лого же абсолютно спозиционировано

Верно, именно за счет этого я добился, что картинки двух девчонок по бокам не трогаются с места. Почему с лого не так?

 

 

Что такое «при отдалении»? Первый раз слышу такой термин.

Имеется в виду ctrl + крутить колесо мышки назад

 

потому что левая девочка спозиционирована относительно ленвого края экрана(left: ), а правая - относительно правого(right:). лого спозиционировано относительно левого края экрана(left:)

 

тут даже не css, а логика

 

А возможно ли спозиционировать ее относительно центра?

[Switch74]

margin:0px auto;

[cyklop77]

margin:0px auto;

ТС, только width задай явно

[Sperc]

Это не помогло - как с заданием width, так и без него. Возможно, лучше его сделать не дочерним от основного блока?

margin:0px auto;

 

 

margin:0px auto;

ТС, только width задай явно

 

Это не помогло - как с заданием width, так и без него. Возможно, лучше его сделать не дочерним от основного блока?

Edited July 18, 2014 by Sperc

[cyklop77]

а ты position: absolute убрал?

 

и вообще, если хочешь оперативной помощи, то выкладывай jsfiddle

[Sperc]

а ты position: absolute убрал?

 

и вообще, если хочешь оперативной помощи, то выкладывай jsfiddle

После того, как убрал absolute, сразу же он оказался в левом верхнем углу и попытки его сместить не представлялись возможным.

 

jsfiddle полезная штука, но я не знаю, как добавить картинки, которые использую

[cyklop77]

http://jsfiddle.net/aLvtz/1/

Edited July 18, 2014 by cyklop77

[Sperc]

http://jsfiddle.net/aLvtz/1/

http://jsfiddle.net/WdN6z/

[Switch74]

display:block;

[Sperc]

display:block;

Switch, а что не так с display:block?

[Switch74]

поставить его нужно, чтобы по центру img был в данном примере http://jsfiddle.net/WdN6z/