Новости Joomla

Quantum Manager нужен сообществу, а автору нужна ваша поддержка!

Quantum Manager нужен сообществу, а автору нужна ваша поддержка!Файловый менеджер Quantum — одно...

Файловый менеджер Quantum — одно из самых популярных решений для Joomla, созданное разработчиком из сообщества Joomla, Дмитрием Цымбалом (@tsymbalmitia). Он делает Quantum удобным, безопасным и современным, обновляет его, исправляет уязвимости и отвечает пользователям — всё это в свободное от основной работы время.

Теперь настал момент для следующего шага: развитие проекта требует больше времени и ресурсов.

Русский язык для плагина N3T Cookie consent

Вставка VK VIDEO v.1.2.4 - плагин для Joomla

1   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 26 Ответов
  • 5755 Просмотров
*

val674

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
2 фоновых изображения по двум сторонам сайта
« : 11.12.2011, 14:35:36 »
Здравствуйте уважаемые форумчане! Сразу извеняюсь за свою терминологию, но думаю вам будет понятно. Хочу сделать 2 картинки и разместить их слева и справа соответственно от сайта, но также оставить при этом основной фон сайта(он у меня идет заполнением одной маленькой картинки). Вот такая у меня проблема, чесно посидел на вашем форуме, но ответа не нашел. Спасибо.
Записан
*

Taatshi

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #1 : 11.12.2011, 15:50:36 »
шаблон резиновый или фиксированный? На таблицах или на дивах?

Принцип такой:делаете два дополнительных дива вокруг основного контейнера с отступами в ширину картинок и вставляете бэкграунды - один слева, другой справа.
Записан
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

val674

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #2 : 11.12.2011, 16:02:40 »
Шаблон фиксированный на div. Я еще пока не знаю как добавить div, но попробую это сделать. А можно просто через CSS добавить две картинки с отступом от центра?
Записан
*

Taatshi

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #3 : 11.12.2011, 17:37:06 »
Цитата: val674 от 11.12.2011, 16:02:40
Шаблон фиксированный на div. Я еще пока не знаю как добавить div, но попробую это сделать.

покажите шаблон - помогу. Или сайт, или хотя бы название шаба.

Цитата: val674 от 11.12.2011, 16:02:40
А можно просто через CSS добавить две картинки с отступом от центра?

Я такого способа не знаю.
Записан
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

val674

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #4 : 11.12.2011, 18:59:31 »
Шаблон называется S5_Sportopolis.

http://www.shape5.com/demo/sportopolis/

Спасибо Taatshi.
« Последнее редактирование: 11.12.2011, 19:09:42 от val674 »
Записан
*

val674

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #5 : 12.12.2011, 09:44:09 »
Вчера немного (2часа) покапавшись , вот что у меня получилось:

Мой шаблон состоит в сокращенном варианте:

<body id="s5_body">
    
    <div id="s5_top_bar">
          <div id="s5_top_wrap" style="width:925px">
              <div id="s5_date">....</div>
              <div id="s5_navv">....</div>
          </div>
    </div>
    
<div id="s5_outer">
    
     <div id="s5_logo_banner_wrap">...</div>
     <div id="s5_top_modules">...</div>
     <div id="s5_main_bar_wrap">...</div>
     <div id="s5_main_body_wrap">...</div>
     <div id="s5_row_wrap">...</div>
     <div id="s5_bot_row_wrap">...</div>
     <div id="s5_footer">...</div>

</div>

</body>


Я сделал вот так:


<body id="s5_body">
 
 <div id="full"> (добавил общий блок)
  
    <div id="leftbar">"левый блок"</div> (добавил левый блок)
    
    <div id="s5_top_bar">
          <div id="s5_top_wrap" style="width:925px">
              <div id="s5_date">....</div>
              <div id="s5_navv">....</div>
          </div>
    </div>
    
    <div id="s5_outer">
    
     <div id="s5_logo_banner_wrap">...</div>
     <div id="s5_top_modules">...</div>
     <div id="s5_main_bar_wrap">...</div>
     <div id="s5_main_body_wrap">...</div>
     <div id="s5_row_wrap">...</div>
     <div id="s5_bot_row_wrap">...</div>
     <div id="s5_footer">...</div>

    </div>

   <div id="rightbar">"Правый блок"</div> (добавил правый блок)
 </div>
</body>

Я понимаю что нужно добавить стили к этим блокам.
Но сначала я должен убидиться в правильности своих действий описанных выше.


Записан
*

Taatshi

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #6 : 12.12.2011, 09:46:11 »
Я смотрела Ваш шаблон. Если я не ошибаюсь, насколько помню по аналогичному от этой фирмы, настройки его ширины задаются в панели управления. Что Вы там поставили?

Для начала вынесите левый и правый свои блоки за full и задайте им ширину Ваших картинок. высоту - автоматом, примерно так:

width:200px;
height:auto;
outline:1px solid #f03;


outline:1px solid #f03; - будет задавать красную рамочку Вашим блокам - для наглядности, что получилось. Когда все сделаете - сотрете

Скорее всего, нужно будет еще их позиционировать - левому, правому и full  добавить

float:left;
position:relative;

Пока это, сделаете - посмотрим дальше. Я эти шаблоны не разбирала, понятия не имею, как он себя поведет)) Думаю, нужно будет добавить еще один див - в котором будут левый, правый и full - и ему задавать margin:0 auto  и ширину, в зависимости от того, что Вы проставили в панели для всего шаба

И сделайте бэкап, прежде чем эксперименты проводить)))


« Последнее редактирование: 12.12.2011, 09:56:33 от Taatshi »
Записан
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

val674

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #7 : 12.12.2011, 11:14:47 »
Правильно - ширина шаблона задается в админке.
Хорошо Taatshi, я сделаю как вы сказали, потом отпишусь...
Записан
*

Taatshi

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #8 : 12.12.2011, 11:40:11 »
думаю, высоту блокам тоже нужно задать явно - по высоте картинок. бэкграунд блоки не растягивает...
Записан
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

val674

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #9 : 12.12.2011, 13:33:42 »
1) Вынес левый и правый  блоки за full и задал им ширину вручную
2) Добавить еще один див - в котором левый, правый и full. - назвал  full2

Стиль full и full2 - пока не задавал.

Пока получилось так, что левый и правый блоки прижимаются не к основному контенту, а к левой и правой стороне экрана.
Причем правый прижимается к нижнему правому углу ниже footer....Чего то я не так сделал...

#leftbar {
width:200px;
height:200px;
outline:1px solid #f03;   
float:left;
position:relative;
}

#rightbar {
width:200px;
height:200px;
outline:1px solid #f03;   
float:right;
position:relative;   
}




« Последнее редактирование: 12.12.2011, 13:38:19 от val674 »
Записан
*

Taatshi

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #10 : 12.12.2011, 13:52:10 »
1. для full2

full2{
margin:0 auto;
width: не знаю что стоит в вашей админке + 400px;
height:auto;
}

Записан
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #11 : 12.12.2011, 14:02:47 »
Цитата: val674 от 11.12.2011, 16:02:40
А можно просто через CSS добавить две картинки с отступом от центра?
css 3 спасет мир. ну а пока надо извращаться...
Записан
【Мегапак Virtuemart】:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

val674

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #12 : 12.12.2011, 17:52:14 »
Сделал, вот как получилось.



потом я исправил

#leftbar {
width:280px;
height:700px;
outline:1px solid #f03;   
float:left;
position:absolute;
}
но мне position:absolute не подходит


а вот правый блок не хочет занимать нужную позицию, наверно я неправильно вставил div


« Последнее редактирование: 12.12.2011, 17:57:27 от val674 »
Записан
*

Taatshi

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #13 : 12.12.2011, 19:06:22 »
блин... я не настолько хорошо разбираюсь в верстке, чтобы вслепую писать)) сайт в сети? Приведите ВСЕ стили, что прописали для full full2 leftbar и rightbar
Записан
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

val674

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #14 : 12.12.2011, 19:57:30 »
Вот:

#full2
{
margin:0 auto;
width: 1500px;
height:auto;
}

#full

{
ничего нет
}



#leftbar {
width:280px;
height:700px;
outline:1px solid #f03;  
float:left;
position:absolute;
}

#rightbar {
width:280px;
height:700px;
outline:1px solid #f03;  
float:right;
position:relative;
}
мне кажется я накосячил в index
« Последнее редактирование: 12.12.2011, 20:07:16 от val674 »
Записан
*

Taatshi

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #15 : 12.12.2011, 20:06:32 »
пробуем так

full2
{
margin:0 auto;
width: 1500px;
height:auto;
}

full
{
float:left;
width: что в админке;
height:auto;
}

#leftbar {
width:280px;
height:700px;
outline:1px solid #f03;  
float:left;
}

#rightbar {
width:280px;
height:700px;
outline:1px solid #f03;  
float:right;
}

и покажите код куда дивы вставляли
Записан
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

val674

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #16 : 12.12.2011, 20:28:48 »
#full { float:left; width: 1000px;height:auto;}

#full2{margin:0 auto; width: 1400px;height:auto;}

#leftbar {width:200px; height:700px; outline:1px solid #f03; float:left;position:relative;}

#rightbar {width:200px; height:700px; outline:1px solid #f03; float:right; position:relative;}

я нашел ошибку и сделал вот так:

<body id="s5_body">
   <div id="full2">
       <div id="leftbar"></div>
         <div id="full">.......</div>
         <div id="rightbar"></div>
    </div>
</body>


Записан
*

val674

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #17 : 12.12.2011, 21:02:14 »
Taatshi, огромное вам человеческое спасибо! Благодаря вам, сделал то что нужно и так как надо...Перенес изменения на сайт, небольшая подгонка и все получилось.. Спасибо!
Записан
*

Taatshi

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #18 : 12.12.2011, 21:49:05 »
не за что)) приятно было повозиться с соображающим человечком))

Это что))) теперь в эти позиции если понадобится - можно и модули вставлять. Если понадобится)) пропишете так:

<div id="leftbar">
<jdoc:include type="modules" name="leftbar" style="rounded" />
</div>

аналогично для правого)
Записан
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

val674

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #19 : 12.12.2011, 23:05:09 »
Спасибо! ^-^
Записан
*

Taatshi

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #20 : 12.12.2011, 23:09:44 »
а... да... еще в файле templateDetails.xml дописать позиции - чтобы из админки выбирать

<position>leftbar</position>
<position>rightbar</position>

что-то меня понесло))) спать пойду))
Записан
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

val674

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #21 : 14.12.2011, 22:54:39 »
Здравствуйте уважаемые форумчане. Новую тему не стал начинать, впрнципе это все продолжение старой. При непосредственной помощи Taatshi в решении моей проблемы, мне удалось таки сделать два блока div под фоновые рисунки по обоим сторонам от основного контента. Вставил рисунки, все нормально... но рисунки у меня 400px в ширину.

Проблема в следующем: На маленьких мониторах или при небольших разрешении экрана(при изменении масштаба), основной контент сайта уходит вправо. Т.к. выравнивание идет полевой границе левого блока leftbar. Сначала думал сам справлюсь, но что то не получается. Знающие люди, дайте совет..Спасибо.

Записан
*

Taatshi

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #22 : 14.12.2011, 23:14:29 »
Слушайте, я вот тут подумала... если у Вас шаблон фиксированной ширины - нафиг вам вставлять туда две картинки в блоки? Это для резины. Для фиксированного просто сделайте общий фон какой надо и все.
Записан
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

val674

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #23 : 14.12.2011, 23:18:12 »
Taatshi, у меня есть общий фон. Просто Я хочу поставить 2 картинки (боксеров) слева и справа.

А можно добавить еще один фон поверх предыдущего? - z-index - ?
« Последнее редактирование: 14.12.2011, 23:25:14 от val674 »
Записан
*

Taatshi

  • Гуру
  • 5258
  • 481 / 2
  • Верстаем и кодим. Обращайтесь ;)
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #24 : 15.12.2011, 09:13:39 »
Цитата: val674 от 14.12.2011, 23:18:12
Taatshi, у меня есть общий фон. Просто Я хочу поставить 2 картинки (боксеров) слева и справа.

А можно добавить еще один фон поверх предыдущего? - z-index - ?

Да нет, так нельзя, уже писала. Так сделайте общий фон с боксерами - одной картинкой и замените тот, что есть.

Иначе сайт так и будет считать Ваши картинки рабочими дивами и учитывать их при отображении сайта..
Записан
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3, ОБНОВЛЕНИЕ  |  ОТЗЫВЫ 
Связь: telegram - Taatshi, почта - Taatshi на яндексе, Skype - Taatshi
*

val674

  • Осваиваюсь на форуме
  • 18
  • 0 / 0
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #25 : 17.12.2011, 00:48:58 »
Спасибо, я теперь все понял и сделал.
Записан
*

dmonco

  • Осваиваюсь на форуме
  • 28
  • 0 / 0
  • http://dmitryboruk.com
Re: 2 фоновых изображения по двум сторонам сайта
« Ответ #26 : 14.03.2012, 00:41:55 »
Цитата: val674 от 12.12.2011, 20:28:48
#full { float:left; width: 1000px;height:auto;}

#full2{margin:0 auto; width: 1400px;height:auto;}

#leftbar {width:200px; height:700px; outline:1px solid #f03; float:left;position:relative;}

#rightbar {width:200px; height:700px; outline:1px solid #f03; float:right; position:relative;}

я нашел ошибку и сделал вот так:

<body id="s5_body">
   <div id="full2">
       <div id="leftbar"></div>
         <div id="full">.......</div>
         <div id="rightbar"></div>
    </div>
</body>



Реально хороший пример построения. Работает отлично.
Только у меня возникла проблема. В данном примере ширина блоков фиксированная. А как сделать, чтобы блоки растягивались по ширине одинаково слева и справа в зависимости от разрешения монитора?
Я уже пробовал и проценты прописывать, не помогает. Фиксированная часть сайта начинает слезать либо влево либо вправо либо блоки появляются вверху и внизу.
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Некорректное отображение сайта на смартфоне

Автор Bazilio_69

 Ответов: 0
Просмотров: 1335 		Последний ответ 04.09.2024, 20:36:06
от Bazilio_69
Изменить заголовок в шапке сайта

Автор kunsaid

 Ответов: 0
Просмотров: 2777 		Последний ответ 03.12.2022, 18:34:32
от kunsaid
Позиция фонового изображения

Автор Forgiving

 Ответов: 2
Просмотров: 1154 		Последний ответ 30.03.2020, 10:58:49
от beliyadm
Рамка вокруг изображения (настройка)

Автор KingSnake

 Ответов: 10
Просмотров: 2339 		Последний ответ 12.08.2019, 14:48:41
от KingSnake
Адаптивное меню для сайта на CSS

Автор YuliaOks

 Ответов: 1
Просмотров: 1371 		Последний ответ 02.06.2019, 19:31:23
от Taatshi