Berg How To

**Yallo** » 08 апр 2009, 11:07

Подскажите пожалуйста, мне нужен блок с катинкой и текстом, который должен всегда быть снизу и виден разумеется )), не зависимо от разрешения экрана пользователя - такой "плавающий", все это еще должно автоцентироваться по горизонтали - тоже чтоб быть всегда посередине, в независимости от размера окна - как такой можно сделать? :wall:

**soft** » 08 апр 2009, 12:19

эээ, попробуйте height:100% при позиционирования этого блока с картинками

Просмотреть · **Moonlight** » 08 апр 2009, 12:21

CSS

#contain
{
     position:fixed;
     bottom:0;
     left:50%
}
#float
{
     position:relative;
     left:-50%
}

HTML

<div id="contain">
     <div id="float">
          <img src="ya_kartinko.jpg"  alt="ya_kartinko"><br />
          Йа_плавающий_блок
     </div>
</div>

Со стилями для текста и рисунка, я думаю, как-нибудь уж разберётесь

2soft: height:100% срабатывает не всегда, это зависит от DOCTYPE.

З.Ы. Эх, чувствую, беру грех на душу, ибо участвую в рождении очередной popup-рекламы =)

Просмотреть · **Berg** » 08 апр 2009, 12:24

Не совсем понял...
Вы хотите чтоб этот блок был внизу именно на экране? - тут не обойтись без Явы
Или же внизу самой странички ? страничка может быть сгенирирована так что не помещается в экран.. например

**soft** » 08 апр 2009, 12:29

Moonlight писал(а):это зависит от DOCTYPE.

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

Просмотреть · **Moonlight** » 08 апр 2009, 12:38

тут не обойтись без Явы

Вот тут я не согласен, мой вариант как раз без Явы и обходится. Блок, как от него и требуется, "плавает" внизу клиентской области браузера. По крайней мере, в Опере и ФФ3, в IE пока не решился проверить)

З.Ы. Ява == Java != JavaScript ;)

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

soft, вы меня не так поняли. Просто эта конструкция нормально отображается во всех браузерах только в HTML 4.01 Transitional, а это не всегда приемлемо.

Просмотреть · **Berg** » 08 апр 2009, 13:29

Moonlight писал(а):Вот тут я не согласен, мой вариант как раз без Явы и обходится. Блок, как от него и требуется, "плавает" внизу клиентской области браузера. По крайней мере, в Опере и ФФ3, в IE пока не решился проверить)

Не силен в верстке на столько чтоб спорить

, а пробовать нет времени

Moonlight писал(а):З.Ы. Ява == Java != JavaScript ;)

Согласен - наверное плохая привычка просто называть все явой думая что пользовательсам понимает о чем речь.... будем исправлять

**soft** » 08 апр 2009, 13:48

Moonlight, я попробовал, идея интересная, но если фон под текстом или картинками, будет другим?

Просмотреть · **Moonlight** » 08 апр 2009, 13:52

Нда... как я и опасался, position:fixed в IE не работает. Надо переопределить стиль для элемента contain:

body, html {height: 100%; margin: 0;padding: 0}
/*IE*/
body {overflow: auto;}

#contain {position:absolute; left:50%; bottom:0}

/*W3C*/
div[id=contain] {
	position: fixed !important;
}
html > body {
	overflow: visible !important;
}

2soft: извиняюсь, был неправ)
И в начале документа прописать:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ну или

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Прочее оставить без изменений. В ИЕ (по крайней мере в седьмом) работает.

я попробовал интересная идея, но если фон под текстом или картинками, будет другим?

И в чём вы видите тут проблему? По-моему, как раз так и должно быть, с прозрачным фоном эта конструкция будет теряться на фоне всего остального.

**Yallo** » 08 апр 2009, 14:05

Moonlight писал(а):
З.Ы. Эх, чувствую, беру грех на душу, ибо участвую в рождении очередной popup-рекламы =)

Не )), всего лишь портфолио с карикатурами, у подруги разрешение монитора под 2 000, хочет видеть у себя красиво )))
разъяснения не проходят, что у обычных юзеров гораздо меньше ))

Moonlight, спасибо большое - буду стараться пристроить правильно код ))

**Yallo** » 08 апр 2009, 14:07

Berg писал(а):Не совсем понял...
Вы хотите чтоб этот блок был внизу именно на экране? - тут не обойтись без Явы

Во! вот именно это ))), значит надо скрипт искать (( Был у меня когда-то скрипт, но он не центрировал по горизонтали, а вобще сначала попробую, что Moonlight посоветовал ))

Просмотреть · **Moonlight** » 08 апр 2009, 14:20

Ну, за скриптами далеко ходить не надо - зайдите на любую страничку, где есть реклама с pop-under.ru, откройте код и изучайте на здоровье)
Но использовать CSS в данном случае, имхо, всё же лучше.

**soft** » 08 апр 2009, 14:28

я вот таким макаром подключаю

Код: выделить все: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

вот что изменил в коде

Код: выделить все: #contain { background-color: #cccccc; width: 300px; position:fixed; bottom:0; left:50%; border: 1px #000 solid; } #float { background-color: #999999; position:relative; left:-50%; border: 1px #000 solid; }

что вышло

1.jpg

получается у нас при центровки элемента, появляется лишний блок #contain, ну он не лишний, скажем промежуточный,
а как смотрите на такую центровку

Код: выделить все: margin: 0px auto 0px;

я канечно понимаю что в ИЕ 6 и ниже он не будет работать, но я забил на эти браузеры, пусть качают ФФ или Оперу

Просмотреть · **Moonlight** » 08 апр 2009, 14:40

1. #contain не лишний, а нужен как раз для того, чтобы расположить блок точно по центру (иначе было бы справа/слева от центра).
2. "margin: 0px auto 0px;" == "margin: 0 auto"
3.

но я забил на эти браузеры, пусть качают ФФ или Оперу

Поздравляю. Вы исключительный счастливчик, если можете решать, какие браузеры должны быть у ваших пользователей =)
З.Ы. А работать не будет не только в ИЕ 6, но и в 7 тоже;)

**soft** » 08 апр 2009, 14:48

Moonlight писал(а):Нда... как я и опасался, position:fixed в IE не работает.

у меня в 7 работает этот пример

Moonlight писал(а):Поздравляю. Вы исключительный счастливчик, если можете решать, какие браузеры должны быть у ваших пользователей =)
З.Ы. А работать не будет не только в ИЕ 6, но и в 7 тоже;)

работает в ИЕ 7 ;)
дело не в счастье, посчитайте процент пользователей которые пользуются ИЕ6, сколько 1% 2% ? , кто таким браузером пользуется, те кому два года назад виндовс поставили?
простите но это здравый смысл.

Berg How To

Блок с картинками и текстом- всегда снизу

Блок с картинками и текстом- всегда снизу

Re: Блок с картинками и текстом- всегда снизу

Re: Блок с картинками и текстом- всегда снизу

Re: Блок с картинками и текстом- всегда снизу

Re: Блок с картинками и текстом- всегда снизу

Re: Блок с картинками и текстом- всегда снизу

Re: Блок с картинками и текстом- всегда снизу

Re: Блок с картинками и текстом- всегда снизу

Re: Блок с картинками и текстом- всегда снизу

Re: Блок с картинками и текстом- всегда снизу

Re: Блок с картинками и текстом- всегда снизу

Re: Блок с картинками и текстом- всегда снизу

Re: Блок с картинками и текстом- всегда снизу

Re: Блок с картинками и текстом- всегда снизу

Re: Блок с картинками и текстом- всегда снизу

Кто сейчас на форуме