Форум Joomla! Україна
  • Головна
  • Пошук
  • Користувачі
  • Команда форуму
  • Реєстрація
  • Увійти
    Увійти
    Ім’я користувача
    Пароль:
    Забули пароль?
     
  • Реєстрація
  • Увійти
Форум Joomla! Україна Шаблони та дизайн, сайти на Joomla Шаблони для Joomla — дизайн, верстка, модифікації v
« Попереднє 1 … 6 7 8 9 10 Наступне »
"Гумова" шапка сайту


 
  • 0 голос(ів) - 0 у середньому
"Гумова" шапка сайту
Besedin
Не в мережі

Модератор

Дописів: 372
Тем: 15
Приєднався: 19.05.2007, 01:29 PM
Репутація: 0
#1
01.11.2007, 01:48 PM
Підкажіть будь ласка як можна зробити розтяжну шапку сайту.

Є 3 малюнки:

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

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

З повагою, Саша
Знайти спільну мову з людиною можна навіть не погоджуючись з нею
shaman
Не в мережі

Модератор

Дописів: 287
Тем: 44
Приєднався: 07.05.2007, 07:44 PM
Репутація: 0
#2
01.11.2007, 02:09 PM
Ну, щоб шапка розтягувалась, ширина її таблиці повинна бути не у пікселях, а в процентах.
У 2 секції (td), куди ти хочеш вставити малюнок, пропиши код:

Код:
background="http://www.адреса до малюнку"
.
BitsyBay - Магазин авторських розширень за BitCoin | OpenCart - Україна | Fork me on Github
Besedin
Не в мережі

Модератор

Дописів: 372
Тем: 15
Приєднався: 19.05.2007, 01:29 PM
Репутація: 0
#3
01.11.2007, 02:49 PM
дякую.Wink треба буде спробувати
Знайти спільну мову з людиною можна навіть не погоджуючись з нею
Besedin
Не в мережі

Модератор

Дописів: 372
Тем: 15
Приєднався: 19.05.2007, 01:29 PM
Репутація: 0
#4
03.11.2007, 10:57 AM
В шаблоні прописав

Код:
<?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
Не в мережі

Адміністратор

Дописів: 1,190
Тем: 59
Приєднався: 28.10.2006, 04:49 PM
Репутація: 4
#5
05.11.2007, 01:08 AM
Такі речі краще робити на чистому CSS Smile
Хостинг для Joomla
Besedin
Не в мережі

Модератор

Дописів: 372
Тем: 15
Приєднався: 19.05.2007, 01:29 PM
Репутація: 0
#6
08.11.2007, 12:10 PM
Пробував інший спосіб

Код:
....
<?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>
.....

  Дещо стало подібне на те що мені потрібно, але заважають інтервали між малюнками (у вкладенні малюнок) Sad Дивився у кількох книжках по ЦСС. але нічого подібного не знайшов як воно робиться. Дививився і в інтернеті, також нічого.
  У верстанні шаблонів поки що мало знаю. На все просто часу не вистачає. Буду вдячний за підказку у вирішенні мого питання Wink
Внизу прикріпив

     


Файли вкладень Мініатюра(и)
   
Знайти спільну мову з людиною можна навіть не погоджуючись з нею
Dutch
Не в мережі

Адміністратор

Дописів: 1,190
Тем: 59
Приєднався: 28.10.2006, 04:49 PM
Репутація: 4
#7
08.11.2007, 01:07 PM
Вариант на чистому 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 - права частина шапки.
Хостинг для Joomla
Besedin
Не в мережі

Модератор

Дописів: 372
Тем: 15
Приєднався: 19.05.2007, 01:29 PM
Репутація: 0
#8
08.11.2007, 01:50 PM
Дякую Dutch за допомогу +
Все вийшло. Але не зрозумію одне. Чому коли я вставляю твоє CSS в template_css.css то нічого не показує, а лише коли я вставив у index.php тоді запрацювало?

І все таки невеличкий перехід залишився.
Знайти спільну мову з людиною можна навіть не погоджуючись з нею
Dutch
Не в мережі

Адміністратор

Дописів: 1,190
Тем: 59
Приєднався: 28.10.2006, 04:49 PM
Репутація: 4
#9
08.11.2007, 02:21 PM
ну якщо у тебе в шаблоні є папка для цсс і папка для графіки, то мало б працювати.
Тоді пропиши вірний шлях до графіки, висоту та ширину!!!

Є ще один спосіб - вкладення дівів один в одний.
Тоді потрібно забрати float та дати для всіх дівів однакову висоту та ширину + додати параметр background-position який буде визначати з якої сторони розташовувати праву та ліву картинку.
Хостинг для Joomla
Besedin
Не в мережі

Модератор

Дописів: 372
Тем: 15
Приєднався: 19.05.2007, 01:29 PM
Репутація: 0
#10
08.12.2007, 10:39 AM
Не буду створювати нву тему, так як маю подібну ситуацію знову.

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

Мені вдалось поставити цей малюнок, але правий малюнок відображається нижче
Знайти спільну мову з людиною можна навіть не погоджуючись з нею
« Попередня | Наступна »

Переглядають цю тему: Гості: 1



  • Версію для друку
  • Підписатися на цю тему
Швидкий перехід:

  • Команда форуму
  • Зв’яжіться з нами
  • Joomla! Україна
  • Повернутись на початок
  • Легкий режим
  • Позначити всі форуми прочитаними
  • RSS канал
Лінійний режим
Каскадний режим