3 авг. 2008 г.

Резиновому сайту - резиновые баннеры!

Сегодня я опубликую небольшой трючок, который позволит размещать в шапке сайта баннеры, ширина которых меняется вместе с разрешением экрана. Достигается это с помощью довольно простых средств, а эффект достаточно хорош. Надо только грамотно нарисовать баннер.
К примеру, у нас есть такой баннер:


Для того, чтобы сделать его резиновым, мы разрежем его вот так:






И сделаем "резину".
Если вы верстаете таблицами, листинг будет выглядеть так:

CSS:

td.tab {
background-color: #ff9a2f;
}

td.menu {
background-color: #ffffff;
}

th.logoheader {
margin 0px;
padding: 0px;
background : url(banner.jpg) no-repeat bottom;
background-color: #ffffff;
background-position: left;
height : 50px;}

HTML:

<body>
<table width="80%" height="50" border="0" cellpadding="5" cellspacing="0">
<tr>
<th colspan="2" class="logoheader"><img src="logo.jpg" align="right"></th>
</tr>
<tr>
<td class="tab">Апельси́н (от нидерл. appelsina – «китайское яблоко») — плод апельсинного дерева (Citrus sinensis), родом из Китая. Гибрид, полученный ещё в древности, по видимому смешением мандарина (Citrus reticulata) c помелом (Citrus maxima). Дерево привезено португальцами в Европу и растёт теперь хорошо по всему побережью Средиземного моря, а также в Центральной Америке.

Довольно высокое дерево, относится к семейству Рутовые (Rutaceae) и к его подсемейству Цитрусовые(Citroideae). Цельные многолетние листья апельсина соединяются со своими крылатыми черешками посредством промежуточного широкого сочленения. Белые цветы сидят по 6, кистями и состоят из 5-раздельного малораскрывающегося околоцветника с толстыми долями, множества тычинок и одиночной свободной, или «верхней», завязью (известные «fleurs d’orange»).</td>
<td class="menu">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
</ul>
</td>
</tr>
</table>
</body>

Если вы верстаете DIV'ами, листинг приобретет такой вид:

CSS:

body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}

#main {
background-color: #ff9a2f;
width: 80%;
}


#banner {
position: relative;
margin 0px;
padding: 0px;
background: url(banner.jpg) no-repeat;
background-color: #ffffff;
background-position: left ;
height : 50px;
}

#text {
position: relative;
float: left;
width: 80%;
background-color: #ff9a2f;
padding: 5px;
}

#menu {
position: relative;
float: right;
}

HTML:

<body>
<div id="main">
<div id="banner">
<div id="logo">
<img src="logo.jpg" align="right">
</div>
</div>
<div id="text">
Апельси?н (от нидерл. appelsina – «китайское яблоко») — плод апельсинного дерева (Citrus sinensis), родом из Китая. Гибрид, полученный ещё в древности, по видимому смешением мандарина (Citrus reticulata) c помелом (Citrus maxima). Дерево привезено португальцами в Европу и растёт теперь хорошо по всему побережью Средиземного моря, а также в Центральной Америке.

Довольно высокое дерево, относится к семейству Рутовые (Rutaceae) и к его подсемейству Цитрусовые(Citroideae). Цельные многолетние листья апельсина соединяются со своими крылатыми черешками посредством промежуточного широкого сочленения. Белые цветы сидят по 6, кистями и состоят из 5-раздельного малораскрывающегося околоцветника с толстыми долями, множества тычинок и одиночной свободной, или «верхней», завязью (известные «fleurs d’orange»).

</div>
<div id="menu">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
</ul>
</div>
</body>

В принципе, код достаточно понятен безо всяких лишних пояснений. Отсюда можно скачать архив с html-файлами и посмотреть, как это работает "вживую".

10 комментариев:

  1. Привет, извини за оффтоп, но вопрос возник.
    Вот тут: http://www.ctrlc.ru/?p=137#comment-4049

    ты написал что на комментарии трансляционной ленты в ЖЖ "можно следить только по подписке".

    Я не понял, что ты имел в виду - по какой именно подписке? Подписываться на каждое новое сообщение чтоли?

    ОтветитьУдалить
  2. Привет, ничего страшного. С комментами тут негусто:-)

    Да. Там надо нажать кнопочку "Track This" и комменты с фида будут сыпаться на ящик, указанный у тебя в ЖЖ-аккаунте.

    Других способов я не знаю.

    ОтветитьУдалить
  3. Да... Дико неудобно.

    ЖЖ выигрывает у блоггера только системой ветвей комментариев, вот и всё, кажется..

    ОтветитьУдалить
  4. Только ветвями, да. В блоггере еще и шаблон можно под себя переписывать. Что я радостно и сделал:-)

    ОтветитьУдалить
  5. Ну, я не настолько крут чтоб всё переписывать. CSS я вообще не понимаю; в хтмл что ясно переделываю по мере надобности.

    Вот то, чего бы я очень сильно хотел на блоггере - так это то, когда можно будет делать так, чтоб оставляющий коммент человек (не зарегестрированный на блоггере) мог оставить своий имейл дабы ему о следующих ответах приходили уведомления, как в комментах на wordpress-блогах.

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

    ОтветитьУдалить
  6. "CSS я вообще не понимаю;"
    А чего его понимать? Вот объект, или класс, а в фигурных скобках их свойства. Самое геморройное - кроссбраузерная совместимость.

    "дабы ему о следующих ответах приходили уведомления, как в комментах на wordpress-блогах"
    Так можно подписку на комменты по рсс сделать. Вон, как у меня. Настройка->Элемент страницы->Добавить элемент страницы и там будут "Ссылки подписки".

    "чтобы можно было комментить сразу, не переходя на другую страницу"
    Честно ковырял и не нашел. Скорее всего шаблон не позволяет. А перейти на новый шабло и все заново настраивать я пока не готов:-)

    ОтветитьУдалить
  7. *Скорее всего шаблон не позволяет. А перейти на новый шаблон и все заново настраивать я пока не готов:-)

    - скорее всего он всё позволяет!!
    Ты главное переключись на blogger.draft!
    Вот тут подробнее:

    http://blogohelp.blogspot.com/2008/06/bloggercom.html


    "Ссылки подписки" - если ты это говоришь об общей ленте комментов всего блога, то это не особо удобно, другого я что-то не находил... Возможно плохо смотрел (?)

    *кроссбраузерная совместимость.
    - ну, думаю что если я в рсс начну даже врубаться, то разбираться стану не раньше чем через год. Пока это для меня как заморская азбука.

    ОтветитьУдалить
  8. Тфу, какой нафиг рсс, я имел в виду css X_))

    ОтветитьУдалить
  9. Благодарю за наводку. Прочитал, поменял.

    ЗЫ. Заслушал твою музыку, кстати. Довольно интересно.

    ОтветитьУдалить