Резиновая позиция модуля

  • 19 Ответов
  • 810 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

sword852d

  • Осваиваюсь на форуме
  • ***
  • 184
  • 9
Резиновая позиция модуля
« : 05.03.2015, 19:15:01 »
Подскажите добавил новую позицию в шаблоне protostar - Default, как её сделать резиновой?, а то при разных разрешениях экрана она в разных местах  :(

Добавил так в \ index.php \
<div class="48562"><jdoc:include type="modules" name="12345"/></div>

и в CSS
 #main-wrapper {
  overflow: hidden;
}
.48562
 {
  display: block;
  top: 80px;
  position: absolute;
  left: 1155px;
  background: #fff;
  width: 1120px;
  padding: 0px;
   align:left;}

*

DiabloZet

  • Осваиваюсь на форуме
  • ***
  • 165
  • 4
  • Честь превыше всего!
Re: Резиновая позиция модуля
« Ответ #1 : 06.03.2015, 00:21:42 »
Изучите @media, или у вас статический шаблон?

*

sword852d

  • Осваиваюсь на форуме
  • ***
  • 184
  • 9
Re: Резиновая позиция модуля
« Ответ #2 : 06.03.2015, 06:17:05 »
шаблон у меня  protostar - Default резиновый.

*

ShfVD

  • Живу я здесь
  • ******
  • 874
  • 65
Re: Резиновая позиция модуля
« Ответ #3 : 07.03.2015, 17:56:44 »
Хотелось бы понять логику стиля вывода позиции
Код: css
display: block;
Блочный элемент на всю ширину родительского блока (надо понимать экрана)
Код: css
top: 80px;
Сдвигаете его вниз
Код: css
  position: absolute;
?
Код: css
 left: 1155px;
Сдвинул вправо ( практически в конец экрана), при том ширину задали
Код: css
width: 1120px;
т.е. виден только на панорамном мониторе
?
О какой резине может идти речь?

*

midav

  • Живу я здесь
  • ******
  • 927
  • 113
Re: Резиновая позиция модуля
« Ответ #4 : 07.03.2015, 18:02:33 »
Хотелось бы понять логику стиля вывода позиции
;D я тоже не понял логики

В какое место хоть добавили эту позицию ? И где она должна быть по задумке ? :)
Ответы на вопросы по CSS . Откройте для себя Firebug

*

sword852d

  • Осваиваюсь на форуме
  • ***
  • 184
  • 9
Re: Резиновая позиция модуля
« Ответ #5 : 07.03.2015, 18:22:55 »
Добавил новую позицию в неё поставил модуль форму входа.
.48562
 {
  display: block;
  top: 80px;
  position: absolute;
  left: 1155px;
  background: #fff;
  width: 1120px;
  padding: 0px;
   align:left;}  А этим просто задал координаты позиции с модулем, но так как мой шаблон резиновый и при изменении разрешения экрана моя позиция с модулем ползает по экрану...
Вот я и прошу совета как мне прикрутить позицию в определенное место, чтобы при изменении размера экрана она оставалось на том же месте.




*

DiabloZet

  • Осваиваюсь на форуме
  • ***
  • 165
  • 4
  • Честь превыше всего!
Re: Резиновая позиция модуля
« Ответ #6 : 07.03.2015, 18:30:41 »
Цитировать
Хотелось бы понять логику стиля вывода позиции
Что как змеи? не гнобите новичка! а то он в один прекрасный день, узнает ваш IP и сломает веник на компе!! сломает ваш сайт и спи.... себе!!
sword852d вроде вместо left используется margin-left: 10px; у меня лично на статическом держит все нормально...
А вообще я уже говорил, учи @media, резиновый не значит что все за тебя делает... резину нужно написать ручками

*

ShfVD

  • Живу я здесь
  • ******
  • 874
  • 65
Re: Резиновая позиция модуля
« Ответ #7 : 07.03.2015, 18:30:51 »
А что Вам мешает просто сделать нужный отступ сверху и просто прижать его вправо, навскидку
Код: css
display: inline-block;
float: right;

*

sword852d

  • Осваиваюсь на форуме
  • ***
  • 184
  • 9
Re: Резиновая позиция модуля
« Ответ #8 : 07.03.2015, 18:55:31 »
Мне бы хотя бы один пример рылся в стандартном шаблоне чтобы выдернуть от туда пример как там в protostar это организовано, просто xz не могу понять как мои параметры координат позиции связать с этим @media

@media (max-width: 767px) {
   div.modal {
      position: fixed;
      top: 20px;
      left: 20px;
      right: 20px;
      width: auto;
      margin: 0;
   }
   
}  Пробовал примерно так позиция прикрепляется к экрану, но мои размеры перестают действовать(((((

*

DiabloZet

  • Осваиваюсь на форуме
  • ***
  • 165
  • 4
  • Честь превыше всего!
Re: Резиновая позиция модуля
« Ответ #9 : 07.03.2015, 19:03:22 »
Потому что нужно прописывать на все разрешения экранов...
Пропишите сразу 5-6 разрешений под разные экраны, и все будет нормально.
Кстати
Код
@media screen and (min-width: 600px) and (max-width: 900px)
устанавливай минимальный размер и максимальный для указанного стиля

*

ShfVD

  • Живу я здесь
  • ******
  • 874
  • 65
Re: Резиновая позиция модуля
« Ответ #10 : 07.03.2015, 19:08:22 »
Что вы имеете ввиду под
Цитировать
а то при разных разрешениях экрана она в разных местах
разрешения под мобильные, или разные размеры экрана на десктопе?
Если сайт на локалке, то хотя бы покажите на скришотах что не так, но лучше ссылку.
Медиа запросы актуальны когда Вы делаете адаптивный шаблон, а это не совсем резиновый.
Адаптивный (используя медиазапросы) подстраивает под определенные разрешения (дискретно), а резиновый просто подстраивается под экран.

*

sword852d

  • Осваиваюсь на форуме
  • ***
  • 184
  • 9
Re: Резиновая позиция модуля
« Ответ #11 : 07.03.2015, 19:17:23 »
Сайт на денвере. Пробую на 4-х разных мониторах 15, 17, 19, 22,5 дюймов и везде позиция в разных местах, так же если в Opera менять размер окна браузера моя самодельная позиция ездит по экрану. Под мобильные мне не обязательно. Просто хочу научится прикреплять позиции к резиновому шаблону protostar(((

Сейчас с планшета через часок выложу скрины!
« Последнее редактирование: 07.03.2015, 19:42:33 от sword852d »

*

ShfVD

  • Живу я здесь
  • ******
  • 874
  • 65
Re: Резиновая позиция модуля
« Ответ #12 : 07.03.2015, 19:33:40 »
Скрины выложите

*

midav

  • Живу я здесь
  • ******
  • 927
  • 113
Re: Резиновая позиция модуля
« Ответ #13 : 07.03.2015, 19:55:15 »
Сайт на денвере. Пробую на 4-х разных мониторах 15, 17, 19, 22,5 дюймов и везде позиция в разных местах, так же если в Opera менять размер окна браузера моя самодельная позиция ездит по экрану. Под мобильные мне не обязательно. Просто хочу научится прикреплять позиции к резиновому шаблону protostar(((

Просто пропишите эту позицию в нужном месте шаблона . Где она должна быть ? В шапке или в блоке с контентом, или в боковой колонке ?
Зачем к этой позиции применять стили position:fixed или position:absolute ?
Конечно она будет плавать по экрану как хочет при изменении разрешения .
Что вот это за чудо стили ? :
Код
  div.modal {
      position: fixed;
      top: 20px;
      left: 20px;
      right: 20px;
      width: auto;
      margin: 0;
   }

Или может мы просто не понимаем чего хотите добиться . Оъясните словами где этот модуль должен быть ? А ещё лучше нарисуйте картинку .
Ответы на вопросы по CSS . Откройте для себя Firebug

*

sword852d

  • Осваиваюсь на форуме
  • ***
  • 184
  • 9
Re: Резиновая позиция модуля
« Ответ #14 : 07.03.2015, 20:07:36 »
Цитировать
Просто пропишите эту позицию в нужном месте шаблона .
Покажите пример как прописать позицию например в правом верхнем углу сайта?


*

ShfVD

  • Живу я здесь
  • ******
  • 874
  • 65
Re: Резиновая позиция модуля
« Ответ #15 : 07.03.2015, 20:14:37 »
Покажите пример как прописать позицию например в правом верхнем углу сайта?


Вопрос некорректен: а что должно быть слева?
Если пустое место это одно ( но тогда модуль не "плавал" бы) если какой-то блок, то опять же - равный по высоте (в одну строку с модулем, или обтекает).
Такое впечатление что информацию от вас нужно выдавливать. Слов/постов море - толку ноль.

*

DiabloZet

  • Осваиваюсь на форуме
  • ***
  • 165
  • 4
  • Честь превыше всего!
Re: Резиновая позиция модуля
« Ответ #16 : 07.03.2015, 20:17:20 »
Вот небольшой пример под мой экран...
Код
<div style="margin-left: 398px; height: 100px; position: fixed; background: #000; width: 100px; color: #F00; font-family: fantasy; zoom: 2; text-align: center;">Тут позиция</div>

*

sword852d

  • Осваиваюсь на форуме
  • ***
  • 184
  • 9
Re: Резиновая позиция модуля
« Ответ #17 : 07.03.2015, 20:26:56 »
Цитировать
<div style="margin-left: 398px; height: 100px; position: fixed; background: #000; width: 100px; color: #F00; font-family: fantasy; zoom: 2; text-align: center;">Тут позиция</div>

Спасибо огромное это, то что нужно!

*

DiabloZet

  • Осваиваюсь на форуме
  • ***
  • 165
  • 4
  • Честь превыше всего!
Re: Резиновая позиция модуля
« Ответ #18 : 07.03.2015, 20:31:07 »
 ;D

*

midav

  • Живу я здесь
  • ******
  • 927
  • 113
Re: Резиновая позиция модуля
« Ответ #19 : 07.03.2015, 20:37:44 »
 :laugh:
Ответы на вопросы по CSS . Откройте для себя Firebug