Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Позиционирование jpg c с приклеиванием к странице

Автор: initmax 19.8.2009, 16:53

Задача - разместить баннер jpg на странице в левом верхнем углу посредством CSS с привязкой его к самой странице "в момент скролинга страницы увеличить/уменьшить"

1) Сверстал страничку на DIV.
2) Задал верхнем горизонтальному меню и тексту самой страницы margin:auto;
благодаря чему добился позиционированию по центру
3) в левый верхний угол страницы поместил баннер в контейнере DIV с таким id

Код


#box2 {
position:absolute;
top: 50px;
right: 50px;
}

Всё красиво, но при увеличении/уменьшении страницы этот баннер плывёт, а margin:auto
для контейнера с jpg не работает.
Каким образом можно привязать данный баннер с заданным позиционированием на странице?
спасибо за внимание

Автор: artsb 19.8.2009, 17:20

Не совсем понял... Попробуй так:

Код


#box2 {position:absolute;top:0;left:0;margin-top:50px;margin-left:50px}

А вообще, объясни подробнее. Может ссылочку дашь или скрины покажешь...

Автор: initmax 19.8.2009, 21:35

С Вашим примером точно так же

вот скрины:
на первом исходная страница "всё нормально"
на втором верхний баннер сдвигается влево при изменении размера страницы

Первый:

Автор: initmax 19.8.2009, 21:36

Второй:

Автор: artsb 19.8.2009, 21:45

Ну всё логично. Див расположен там где и должен быть. Но как я понял, он должен быть выровнен по левому краю контента?
Тогда нужно смотреть структуру сайта.
А зачем вы делаете абсолютное позиционирование? Там вроде можно засунуть меню вместе с этим дивом в один див (header) и диву поставить float:left, а меню - float:right.

Или там всё сложнее smile

Автор: initmax 19.8.2009, 22:27

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

Автор: Violator 19.8.2009, 23:42

initmax,
у блока с контентом поставьте position: relative; и переместите в него ваш баннер

Автор: artsb 19.8.2009, 23:57

Цитата(Violator @ 19.8.2009, 23:42

)

и переместите в него ваш баннер

Я про то же. И уже потом поставить диву (который слева вверху) либо position:absolute, либо position:relative.

Автор: initmax 20.8.2009, 09:03

Код


.mainlogo {
position: relative;
padding: 0px 0px 0px 30%;

}

или

Код


.mainlogo {
position: relative;
padding: 0px 0px 0px 30px;

}

или

Код


.mainlogo {
position:absolute;
padding: 0px 0px 0px 30%;

}

Всё = если уменьшить страницу баннер сдвигается влево, в случае с процентами меньше с пикселами больше.

Автор: Violator 20.8.2009, 10:36

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

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
    * { margin: 0; padding: 0; }
    html { height: 100%; }
    body { height: 100%; text-align: center; }
    .container { position: relative; width: 600px; height: 100%; margin: 0 auto; background: gray; }
    .banner { position: absolute; top: 50px; left: 50px; background: red; }
  </style>
</head>
<body>
  <div class="container">
    <div class="banner">banner</div>
  </div>
</body>
</html>

Автор: initmax 20.8.2009, 13:44

Цитата(Violator @ 20.8.2009, 10:36

)

{ margin: 0; padding: 0; }
    html { height: 100%; }
    body { height: 100%; text-align: center; }
    .container { position: relative; width: 600px; height: 100%; margin: 0 auto; background: gray; }
    .banner { position: absolute; top: 50px; left: 50px; background: red; }

Да Вы правы, при использовании контейнера сидит как приклеенный.

Автор: artsb 20.8.2009, 20:38

Цитата(initmax @ 20.8.2009, 13:44

)

при использовании контейнера

Об этом я и хотел сказать. Просто не знал как мысль выразить smile

Голова была забита другим...