суббота, 6 июня 2009 г.

Изображения слева и справа от заголовка

Как разместить изображения слева и справа от заголовка блога?

– ответы на вопросы читателей.


Приведу пример с использованием абсолютного позиционирования (CSS).


Что должно получиться

Роботы



Первая часть похожа на размещение баннера в заголовке блога.



  1. В редакторе HTML шаблона найди строки:
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='RBB (заголовок)' type='Header'/>
    </b:section>
    </div>

  2. Добавь блоки div с изображениями:
    <div id='header-wrapper'>
    <div id="head-left"><img src="public/robot1.jpg" /></div>
    <div id="head-right"><img src="public/robot2.jpg" /></div>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='RBB (заголовок)' type='Header'/>
    </b:section>
    </div>

  3. Задай стили CSS:
    #head-left {
    position:absolute;
    margin-left:-201px;/* ширина изображения + ширина бордюра шапки */
    _margin-left:-206px;/* IE fix */
    }
    #head-right {
    position:absolute;
    margin-left: 661px; /* ширина шапки + бордюр */
    }

  4. Сохрани шаблон.

Смотри так же: Баннера в заголовке блога;
Смешной текст про роботов взят из пасхалки Firefox.


13 Комментариев :

Ingward комментирует...

Ух ты, блин! Спасибо, Croaker, за отзывчивость! :) Буду пробовать...

Metallen Einkläng комментирует...

Я добавил баннер сверху заголовка, а сам заголовок сместил влево и изменил его размеры. А теперь не могу добавить рисунок справа, но очень хочу))

Croaker комментирует...

«Правый» рисунок можно прописать сразу после заголовка и отпозиционировать как в примере с #head-right. Т.е. задать атрибут style="position:absolute; margin-left: 661px;". Только размер отступа выбрать экспериментально.

Den3er комментирует...

Спасибо, пригодилось. Только рамка белого цвета просто убивает, можно ее как нибудь убрать?

Croaker комментирует...

Den3er, создай правило CSS для шаблона
#header-wrapper img {
background-color: transparent;
padding:0;
border-width:0;
}

Den3er комментирует...

Спасибо, теперь благовония и порядок :) Тут на одном сайте на интересную идею наткнулся: при обновлении, боковые картинки меняются. Может заинтересует .. http://www.battlefieldheroes.com/

Анонимный комментирует...

А горизонтальный скролл в браузерах будет игнорировать это решение?

Croaker комментирует...

Горизонтальный скролл будет обрабатывать по-умолчанию – словно страница стала шире. Так ведь оно и есть на самом деле ;).

Ingward комментирует...

Привет, Croaker! Один мой вопрос здесь уже обсуждался - задам еще один... :)

Возникла странная проблема в нестандартном шаблоне Блоггера... Нужна была таблица с картинками для поста. Создал ее на стандартных html-тегах и получилась какая-то необъяснимая ерунда: почему-то возникает большой отступ от того, что сверху, до таблицы... Причем, чем больше строк в таблице, тем отступ больше. Уже перепроверял CSS шаблона, сами теги и т.п. - не помогло... И тут вспомнил тебя, как знатока в этой сфере :). Посмотри, пожалуйста, если будет время: http://mala-ptashka.blogspot.com (делаю сайт-визитку знакомой девушке).

Croaker комментирует...

Привет, Ingward!
Здесь все гораздо проще. В настройках блога есть одна довольно полезная опция Преобразовывать разрывы строк. Переносы строк, заданные в редакторе сообщений, заменяются в блоге тегами <br />. Эта опция как правило включена.

Поэтому, когда ты внутри поста задаешь форматированный HTML код таблицы все переносы строк преобразуются в блоге в теги <br /> (перенос строки).

Поскольку тег <br /> между тегами table и tr, tr и td не валиден, все лишние br-теги выносятся за пределы таблицы (так например делает Firefox). Это и дает отступ сверху.

Чтобы избежать «лишних» тегов <br /> нужно в редакторе сообщений вытягивать код таблицы в одну строку.

Ingward комментирует...

Блин, а я ведь заметил эти бр-ки в первую очередь, но не знал о таком глюке...:))

Croaker, большое тебе спасибо! :)

Жанна комментирует...

Здравствуйте)..я еще чайник в ведении блогов, но все, чему я научилась, взято с вашего сайта, плюс догадливость и другие ресурсы..Проблема вот в чем- хочу поставить кнопку rss сбоку от шапки блока..но не получаеться...Подскажите помогите чайнику)мой блог -http://zorinkamama.blogspot.com/
Заранее спасибо)

Croaker комментирует...

Жанна, пардон муа — пропустил ваш вопрос. Если проблема еще не решена, то гляну

Отправить комментарий

Жги!