помогите с позиционированием

lin0ks · January 28, 2013

Здраствуйте!

Помогите разместить 2 картинки на разных слоях, чтобы 2-я(меньшая, находится на другом слое) позиционировалась относительно первой (большей)

сейчас все выглядит так:

http://jsfiddle.net/zzhBL/9/

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

Вот код:


<p> </p>
<div><img src="images/logo-rus.gif" border="0" alt="" style="display: block; margin-left: auto; margin-right: auto; position: relative;" />
<div><img src="images/logo03-ru.png" border="0" style="margin: -20px 175px; vertical-align: top; left: 20px; top: 20px; width: 201px; height: 191px; position: absolute; z-index: 1;" /></div>
</div>

Сайт делаю на Джумла, код сгенерирован редактором TinyMCE... Только начал разбираться в верстке, так как визуальные редакторы перестали удовлетворять требования. Прочел кучу материалов по позиционированию, но никак не пойму как все должно быть в данном случае.. Если можно готовый кусок кода, чтобы посмотреть и сравнить, если нет пните хоть ссылкой чтобы я все же попробовал разобраться.. спасибо

a1rborn · January 28, 2013

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

html


<body>
<p> </p>
<img src="http://www.sitedemo.pppc.com.ua/images/logo03-ru.png" border="0" style="position: relative; left: 20px; top: 20px; width: 201px; height: 191px; z-index: 1;" /></div>
<div><img src="http://www.sitedemo.pppc.com.ua/images/logo-rus.gif" border="0" alt="" style="position:relative; margin-top:-200px;" />
<div>
</div>
</body>

css


body {width: 1024px; margin: auto;}

Выноси обязательно все стили в css, в html это не гуд

Edited January 28, 2013 by a1rborn

lin0ks · January 28, 2013

ну как один из вариантов, быстро наклепал
html
<body>
<p> </p>
<img src="http://www.sitedemo.pppc.com.ua/images/logo03-ru.png" border="0" style="position: relative; left: 20px; top: 20px; width: 201px; height: 191px; z-index: 1;" /></div>
<div><img src="http://www.sitedemo.pppc.com.ua/images/logo-rus.gif" border="0" alt="" style="position:relative; margin-top:-200px;" />
<div>
</div>
</body>
css
body {width: 1024px; margin: auto;}
Выноси обязательно все стили в css, в html это не гуд

спасибо, только все равно плывет меньшая картинка, если смотреть на мониторе с другим разрешением экрана...

вот пример работы - http://sitedemo.pppc.com.ua/index.php/ru/

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

ну как один из вариантов, быстро наклепал
html
<body>
<p> </p>
<img src="http://www.sitedemo.pppc.com.ua/images/logo03-ru.png" border="0" style="position: relative; left: 20px; top: 20px; width: 201px; height: 191px; z-index: 1;" /></div>
<div><img src="http://www.sitedemo.pppc.com.ua/images/logo-rus.gif" border="0" alt="" style="position:relative; margin-top:-200px;" />
<div>
</div>
</body>
css
body {width: 1024px; margin: auto;}
Выноси обязательно все стили в css, в html это не гуд
спасибо, только все равно плывет меньшая картинка, если смотреть на мониторе с другим разрешением экрана...
вот пример работы - http://sitedemo.pppc...a/index.php/ru/
цель- заставить логотип быть всегда в одном и том же месте(не смотря на размер монитора) относительно большой картинки...

на русском варианте сайта использован Ваш способ, на англ. и укр. мой старый способ.

Sensei · January 28, 2013

Подставите значения, какие нужны

http://jsfiddle.net/sensei/zzhBL/11/

lin0ks · January 28, 2013

Подставите значения, какие нужны
http://jsfiddle.net/sensei/zzhBL/11/

Sensei

Спасибо огромное, все получилось! :yahoo:

Sign In

помогите с позиционированием

Question

lin0ks

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

a1rborn

Link to comment

Share on other sites

lin0ks

Link to comment

Share on other sites

Sensei

Link to comment

Share on other sites

lin0ks

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information