Позиционирование элемента

salikoff · October 1, 2009

Здравствуйте. Помогите, пожалуйста, решить задачу - расположить элемент html (например, картинку <img>) с некоторым заранее определенным смещением относительно центра по горизонтали.

Конкретный пример - 400 пикселей влево от центра. Единственное, что приходит в голову - использование отрицательного margin-left. Но в этом случае картинка исчезает с клиентской части окна браузера при изменении его размеров (сжатии) ниже критического уровня. Картинка как бы уплывает за край браузера. Как сделать, чтобы картинка не уплывала, а если и уплывала, то чтобы ее можно было "достать" с помощью полосы прокрутки.

Понятно, что задачу можно решить с помощью java script, но хотелось бы найти решение на чистом html\css

3ABAPKA · October 2, 2009

Надо код

Great Rash · October 2, 2009

position: absolute;

left: 400;

???

salikoff · October 2, 2009

position: absolute;
left: 400;
???

LEFT:400 означает позиционирование относительно левой стороны браузера. Естественно, это совсем не то, о чем писалось в начале топика.

Нужно позиционировать элемент относительно центра.

Если бы нужно было поставить ровно по центру, то код мог быть например таким:

тра-ля-ля

</div>

Но мне необходимо смещение относительно центра.

psywalker · October 3, 2009

LEFT:400 означает позиционирование относительно левой стороны браузера. Естественно, это совсем не то, о чем писалось в начале топика.
Нужно позиционировать элемент относительно центра.
Если бы нужно было поставить ровно по центру, то код мог быть например таким:
<div align=center> 
<div style="margin: 0px auto;">
тра-ля-ля 
</div>
</div>
Но мне необходимо смещение относительно центра.

родителю абсолюта поставь релатив, тогда абсолют будет позиционироваться относительно него

salikoff · October 3, 2009

родителю абсолюта поставь релатив, тогда абсолют будет позиционироваться относительно него

Вижу, что вы совсем не понимаете, что мне нужно. Попробую изобразить это графически:

вот у меня контейнер (он может быть body или может быть просто div'ом):

Схема

Внутри контейнера у меня объект O, который смещен от центральной осевой линии на определенное расстояние x.

На самой осевой линии расположить легко, если для контейнера установить свойство align=center.

А вот как его сместить с осевой линии на определенное расстояние, не пользуясь margin ?

gesandte · October 3, 2009

ну можно вначале расчленить экран по 50% 2мя блоками, и относительно левого блока уже задавать смещение....правда не очень красивый код

psywalker · October 3, 2009

Это не то?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv='content-type' content='text/html; charset=windows-1251' />
<style type='text/css'>
	* { margin: 0;}
	body,html { height: 100%;}
	div.left { position: relative; float: left; width: 49%; border-right: 1px solid #000;}
	div.right { float: right; width: 50%;}
		span { position: absolute; right: 100px; top: 50%; width: 100px; background: red;}
</style>
</head>
<body>


<div class="left"><span>Объект</span>Right</div>
<div class="right">Right</div>
</body>
</html>

salikoff · October 3, 2009

Это не то?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv='content-type' content='text/html; charset=windows-1251' />
<style type='text/css'>
	* { margin: 0;}
	body,html { height: 100%;}
	div.left { position: relative; float: left; width: 49%; border-right: 1px solid #000;}
	div.right { float: right; width: 50%;}
		span { position: absolute; right: 100px; top: 50%; width: 100px; background: red;}
</style>
</head>
<body>


<div class="left"><span>Объект</span>Right</div>
<div class="right">Right</div>
</body>
</html>

Внешне, это именно то, что мне надо. Но тут и вылазит та проблема, о которой я писал в самом первом топике. А именно, элемент Объект при изменении ширины окна браузера исчезает. Смотрите сами. Я взял ваш код и без изменений положил на хостинг (Смотрите). Теперь возьмите мышкой правый край браузера и тяните его влево до упора. Слова Right так и останутся, а вот объект исчезнет. При этом никакие полосы прокрутки не возникнут и увидеть его невозможно.

Предвижу возможные возражения - мол, никто не сжимает браузер так узко. Но ведь и смещение у меня не маленькое. Хотелось бы, чтобы при любых разрешениях экрана элемент можно было видеть, пусть хоть с помощью скролбара.

P.S. Кстати, я пытался с помощью css свойства min-width ограничить изменение размеров клиентской области браузера - не помогает

Edited October 3, 2009 by salikoff

psywalker · October 3, 2009

Внешне, это именно то, что мне надо. Но тут и вылазит та проблема, о которой я писал в самом первом топике. А именно, элемент Объект при изменении ширины окна браузера исчезает. Смотрите сами. Я взял ваш код и без изменений положил на хостинг (Смотрите). Теперь возьмите мышкой правый край браузера и тяните его влево до упора. Слова Right так и останутся, а вот объект исчезнет. При этом никакие полосы прокрутки не возникнут и увидеть его невозможно.
Предвижу возможные возражения - мол, никто не сжимает браузер так узко. Но ведь и смещение у меня не маленькое. Хотелось бы, чтобы при любых разрешениях экрана элемент можно было видеть, пусть хоть с помощью скролбара.
P.S. Кстати, я пытался с помощью css свойства min-width ограничить изменение размеров клиентской области браузера - не помогает

Не знаю, я сделал так

body,html { min-width: 500px; }

*html body { width:expression(document.documentElement.clientWidth < 600 ? "600px" : "auto");}

и мне это помогло во всех браузерах, странно что тебе нет

mishka · October 3, 2009

div{
	position:absolute;
	top:0;
	left:50%;
	margin-left:400px;
}

либо

div{
	position:absolute;
	top:0;
	right:50%;
	margin-right:400px;
}

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

Наверное этот элемент придется делать в пределах минимальной ширины родителя.

Edited October 3, 2009 by mishka2

psywalker · October 3, 2009

div{
	position:absolute;
	top:0;
	left:50%;
	margin-left:400px;
}
либо
div{
	position:absolute;
	top:0;
	right:50%;
	margin-right:400px;
}
мдя... извини сразу не проверил... залазит за пределы окна
Наверное этот элемент придется делать в пределах минимальной ширины родителя.

Мишка, я не пойму, почему у меня минимальная ширина спасает ситуацию, а у вас нет?

Офтоп:

Не забудь сюда зайти http://forum.htmlbook.ru/index.php?showtopic=16410

Edited October 3, 2009 by psywalker

salikoff · October 3, 2009

Мишка, я не пойму, почему у меня минимальная ширина спасает ситуацию, а у вас нет?
Офтоп:
Не забудь сюда зайти http://forum.htmlbook.ru/index.php?showtopic=16410

Убедитесь сами СИТУАЦИЮ НЕ СПАСАЕТ, хотя body,html { min-width: 1007px; } установлено.

Исчезает эмблема в виде щита.

Если экран меньше 1007 пикселей, то возникает полоса прокрутки, но с ее помощью можно увидеть лишь то, что пропадает справа,

а то, что исчезает слева совершенно недоступно

Edited October 3, 2009 by salikoff

mishka · October 3, 2009

Мишка, я не пойму, почему у меня минимальная ширина спасает ситуацию, а у вас нет?

Я и неговорил что минимальная ширина не спасает. Я даже не пробовал. Но предположил что должна помочь.

Убедитесь сами СИТУАЦИЮ НЕ СПАСАЕТ, хотя body,html { min-width: 1007px; } установлено.
Исчезает эмблема в виде щита.
Если экран меньше 1007 пикселей, то возникает полоса прокрутки, но с ее помощью можно увидеть лишь то, что пропадает справа,
а то, что исчезает слева совершенно недоступно

Почему то у меня все ок. Эмблема на месте при любой ширине. Браузер ff3.0.13

psywalker · October 3, 2009

Убедитесь сами СИТУАЦИЮ НЕ СПАСАЕТ, хотя body,html { min-width: 1007px; } установлено.
Исчезает эмблема в виде щита.
Если экран меньше 1007 пикселей, то возникает полоса прокрутки, но с ее помощью можно увидеть лишь то, что пропадает справа,
а то, что исчезает слева совершенно недоступно

Аа,ты так, тогда сделай этот щит с процентным отступом слева, а не справа

span { position: absolute; left: 30%; background: red;}

mishka · October 3, 2009

Не забудь сюда зайти http://forum.htmlbook.ru/index.php?showtopic=16410

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

salikoff · October 3, 2009

Аа,ты так, тогда сделай этот щит с процентным отступом слева, а не справа
span { position: absolute; left: 30%; background: red;}

Спасибо, переделал согласно вашим рекомендациям, щит теперь не прячется за экран.

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

неизменное расстояние.

Возможно ли его сохранять все время независимо от размеров окна? Теперь щит хоть и не прячется за край окна, но машинка на него "наезжает" при сильном сжатии

psywalker · October 3, 2009

Спасибо, переделал согласно вашим рекомендациям, щит теперь не прячется за экран.
Что касается процентного отступа слева - это не подходит, так как щит должен быть "приклеен" к картинке спозиционированной по центру, между ним и машинкой
неизменное расстояние.
Возможно ли его сохранять все время независимо от размеров окна? Теперь щит хоть и не прячется за край окна, но машинка на него "наезжает" при сильном сжатии

Возьми и объедени машинку и щит чтобы они были в одном блоке, а ему уже задай отступ левый либо сделай один общий рисунок, машинки и щита, и также отступ им задай левый

salikoff · October 3, 2009

Возьми и объедени машинку и щит чтобы они были в одном блоке, а ему уже задай отступ левый либо сделай один общий рисунок, машинки и щита, и также отступ им задай левый

Благодарю всех, кто откликнулся на мое сообщение. Все получилось, объединил все картинки в единый блок

Отдельная благодарнасть Вам, psywalker Подпись под сообщением вызвала бурный смех

Edited October 3, 2009 by salikoff

psywalker · October 3, 2009

Благодарю всех, кто откликнулся на мое сообщение. Все получилось, объединил все картинки в единый блок
Отдельная благодарнасть Вам, psywalker Подпись под сообщением вызвала бурный смех

Да не за что дружище, пиши если чё, а подпись дааа

Sign In

Позиционирование элемента

Question

Link to comment

Share on other sites

19 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

Join the conversation

Обсуждения

Important Information