VPF::Позиционирование jpg c с приклеиванием к странице

initmax

Дата 19.8.2009, 16:53 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 165
Регистрация: 24.7.2009

Репутация: нет
Всего: нет

Задача - разместить баннер 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 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2280
Регистрация: 17.7.2007
Где: центр Вселенной

Репутация: нет
Всего: 64

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

Код


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

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

--------------------

Чем отличается умный человек от мудрого?
Умный - выпутается из любой ситуации.
Мудрый - просто в неё не попадёт.

initmax

Дата 19.8.2009, 21:35 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 165
Регистрация: 24.7.2009

Репутация: нет
Всего: нет

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

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

Первый:

Это сообщение отредактировал(а) initmax - 19.8.2009, 21:37

Присоединённый файл ( Кол-во скачиваний: 9 )

1.png 167,23 Kb

initmax

Дата 19.8.2009, 21:36 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 165
Регистрация: 24.7.2009

Репутация: нет
Всего: нет

Второй:

Это сообщение отредактировал(а) initmax - 19.8.2009, 21:38

Присоединённый файл ( Кол-во скачиваний: 9 )

2.png 147,57 Kb

artsb

Дата 19.8.2009, 21:45 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2280
Регистрация: 17.7.2007
Где: центр Вселенной

Репутация: нет
Всего: 64

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

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

--------------------

initmax

Дата 19.8.2009, 22:27 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 165
Регистрация: 24.7.2009

Репутация: нет
Всего: нет

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

Violator

Дата 19.8.2009, 23:42 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

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

artsb

Дата 19.8.2009, 23:57 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2280
Регистрация: 17.7.2007
Где: центр Вселенной

Репутация: нет
Всего: 64

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

)

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

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

--------------------

initmax

Дата 20.8.2009, 09:03 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 165
Регистрация: 24.7.2009

Репутация: нет
Всего: нет

Код


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

}

или

Код


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

}

или

Код


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

}

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

Это сообщение отредактировал(а) initmax - 20.8.2009, 09:04

Violator

Дата 20.8.2009, 10:36 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

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

Код


<!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 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 165
Регистрация: 24.7.2009

Репутация: нет
Всего: нет

Цитата(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 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2280
Регистрация: 17.7.2007
Где: центр Вселенной

Репутация: нет
Всего: 64

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

)

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

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

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

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »