"Гумова" шапка сайту

Обговорення тем про дизайн та верстка нових шаблонів та редагування. Доопрацювання та модифікації клубних шаблонів.
Besedin
Команда підтримки
Команда підтримки
Повідомлень: 379
З нами з: 19 травня 2007, 15:29
Звідки: Київ - Дубно

"Гумова" шапка сайту

Повідомлення Besedin » 01 листопада 2007, 14:48

Підкажіть будь ласка як можна зробити розтяжну шапку сайту.

Є 3 малюнки:

1. Логотип (зліва)
2. Малюнок для розтяжності шапки (середина)
3. Додтковий малюнок (зправа)

Як мені вставити це все в шаблон і чи потрібно щось в css?
Припустимо що я знаю як вставити ці малюнки. Як мені зробити щоб 2 малюнок повторювався від першого по третій?

З повагою, Саша

shaman
Команда підтримки
Команда підтримки
Повідомлень: 287
З нами з: 07 травня 2007, 21:44
Звідки: Україна, Київ

Re: "Гумова" шапка сайту

Повідомлення shaman » 01 листопада 2007, 15:09

Ну, щоб шапка розтягувалась, ширина її таблиці повинна бути не у пікселях, а в процентах.
У 2 секції (td), куди ти хочеш вставити малюнок, пропиши код:

Код: Виділити все

background="http://www.адреса до малюнку"
.
Besedin
Команда підтримки
Команда підтримки
Повідомлень: 379
З нами з: 19 травня 2007, 15:29
Звідки: Київ - Дубно

Re: "Гумова" шапка сайту

Повідомлення Besedin » 01 листопада 2007, 15:49

дякую.;) треба буде спробувати
Besedin
Команда підтримки
Команда підтримки
Повідомлень: 379
З нами з: 19 травня 2007, 15:29
Звідки: Київ - Дубно

Re: "Гумова" шапка сайту

Повідомлення Besedin » 03 листопада 2007, 11:57

В шаблоні прописав

Код: Виділити все

<?php $picture_path = $mosConfig_live_site.'/images/';?>
<body>
<div align="center" id="logo">
    <table>
      <tr>
       <td><img src="<?php echo $picture_path;?>logo.gif" width=357 height=120>
       <td width="100%"><background="<?php echo $picture_path;?>logo2addr.gif">
       <td><img src="<?php echo $picture_path;?>adress.gif" width=210 height=120>
      </tr>
    </table>
...
...
В результаті відображається тільки перий і третій малюнок по краях. logo2addr.gif не відображається.
Аватар користувача
Dutch
Адміністратор
Адміністратор
Повідомлень: 1166
З нами з: 28 жовтня 2006, 18:49
Звідки: Київ
Дякував (ла): 2 рази
Подякували: 12 рази
Контактна інформація:

Re: "Гумова" шапка сайту

Повідомлення Dutch » 05 листопада 2007, 02:08

Такі речі краще робити на чистому CSS :)

Besedin
Команда підтримки
Команда підтримки
Повідомлень: 379
З нами з: 19 травня 2007, 15:29
Звідки: Київ - Дубно

Re: "Гумова" шапка сайту

Повідомлення Besedin » 08 листопада 2007, 13:10

Пробував інший спосіб

Код: Виділити все

....
<?php $picture_path = $mosConfig_live_site.'/images/';?>
<style type="text/css">
#logo {
  background:url(<?echo("$picture_path")?>logo2addr.jpg) repeat-x;
  width:100%;
  height:120px;}
</style>

<body>
<div align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td>
    <div><img src="<?php echo("$picture_path")?>logo.jpg"></div>
  </td>
  <td width="100%"><div id="logo"><div></td>
  <td>
    <div><img src="<?php echo("$picture_path")?>address.jpg"></div>
  </td>
  </div>
</tr>
</table>
.....
  Дещо стало подібне на те що мені потрібно, але заважають інтервали між малюнками (у вкладенні малюнок) :( Дивився у кількох книжках по CSS. але нічого подібного не знайшов як воно робиться. Дививився і в інтернеті, також нічого.
  У верстанні шаблонів поки що мало знаю. На все просто часу не вистачає. Буду вдячний за підказку у вирішенні мого питання ;)
Внизу прикріпив

     
Аватар користувача
Dutch
Адміністратор
Адміністратор
Повідомлень: 1166
З нами з: 28 жовтня 2006, 18:49
Звідки: Київ
Дякував (ла): 2 рази
Подякували: 12 рази
Контактна інформація:

Re: "Гумова" шапка сайту

Повідомлення Dutch » 08 листопада 2007, 14:07

Вариант на чистому CSS:

Код: Виділити все

css:
div.bg{
   background:url(../images/background.jpg) repeat-x;
   width:100%;
   height:120px;
}
div.left{
   background:url(../images/left.jpg) no-repeat;
   width:200px;
   height:120px;
   float: left;
}
div.right{
   background:url(../images/right.jpg) no-repeat;
   width:200px;
   height:120px;
   float: right;
}

html:
<div class="bg">
   <div class="left">
   </div>
   <div class="right">
   </div>
</div>
де:
background.jpg - це тло шапки;
left.jpg - ліва частина шапки з лого;
right.jpg - права частина шапки.
Besedin
Команда підтримки
Команда підтримки
Повідомлень: 379
З нами з: 19 травня 2007, 15:29
Звідки: Київ - Дубно

Re: "Гумова" шапка сайту

Повідомлення Besedin » 08 листопада 2007, 14:50

Дякую Dutch за допомогу +
Все вийшло. Але не зрозумію одне. Чому коли я вставляю твоє CSS в template_css.css то нічого не показує, а лише коли я вставив у index.php тоді запрацювало?

І все таки невеличкий перехід залишився.
Востаннє редагувалось 08 листопада 2007, 14:53 користувачем Anonymous, всього редагувалось 1 раз.
Аватар користувача
Dutch
Адміністратор
Адміністратор
Повідомлень: 1166
З нами з: 28 жовтня 2006, 18:49
Звідки: Київ
Дякував (ла): 2 рази
Подякували: 12 рази
Контактна інформація:

Re: "Гумова" шапка сайту

Повідомлення Dutch » 08 листопада 2007, 15:21

ну якщо у тебе в шаблоні є папка для CSS і папка для графіки, то мало б працювати.
Тоді пропиши вірний шлях до графіки, висоту та ширину!!!

Є ще один спосіб - вкладення дівів один в одний.
Тоді потрібно забрати float та дати для всіх дівів однакову висоту та ширину + додати параметр background-position який буде визначати з якої сторони розташовувати праву та ліву картинку.
Besedin
Команда підтримки
Команда підтримки
Повідомлень: 379
З нами з: 19 травня 2007, 15:29
Звідки: Київ - Дубно

Re: "Гумова" шапка сайту

Повідомлення Besedin » 08 грудня 2007, 11:39

Не буду створювати нву тему, так як маю подібну ситуацію знову.

Чи можливо у вищезгаданому варіанті поставити посередині ще один малюнок?
Якщо так, то як його вирівняти по центру?

Мені вдалось поставити цей малюнок, але правий малюнок відображається нижче


  • Similar Topics
    Відповіді
    Перегляди
    Останнє повідомлення

Повернутись до “Шаблони для Joomla — дизайн, верстка, модифікації”

Хто зараз онлайн

Зараз переглядають цей форум: 0 і 0 гостей