Новости Joomla

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

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
В index.php прописаны таблицы стилей
 
Код
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo$this->template?>/css/style.css">
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo$this->template?>/css/template.css" type="text/css" />
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo$this->template?>/css/stylemobil.css">
Таблицей stylemobil.css вношу свои поправки в шаблон.
В style.css имеем
Код
.container,.row{
   width: 1000px;
}
в stylemobil.css переопределяю
Код
.container {
max-width: 1000px !important;
}
.row {
width: 100% !important;
}
тем не менее браузер не понимает, или я, ведь по моим понятиям таблицы стилей обрабатываются по порядку,
сначала  style.css, затем stylemobil.css
Помогите разобраться
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
А ссылку на сайт можно? Записи верны, не должно быть ошибки.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Переопределять, кстати, лучше увеличением специфичности, и не надеяться на порядок подключения. IE, например, раньше плевал на порядок подключения таблиц стилей. Как сейчас — не знаю, но пишу всегда более тяжёлые селекторы чтоб наверняка.
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
да на локалке пока,
Цитировать
Переопределять, кстати, лучше увеличением специфичности,
куда уж выше, container, остается только body?
А может это проблема
width -> max-width?
строго говоря это разные теги,
кстати margin-left: 30рх; -> margin-left: 0;
перопределился на раз.
Да и сайт свой я с протостара так сверстал, работает
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
body .container {}. Да, почему бы и нет?
Для .row вы max-width не задавали, соответственно, блок будет шириной 100% = ширине контейнера, у которого ширина 1000px. Всё верно показывает инспектор.
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Похоже решил,
.container {
   max-width: 1000px !important;
   width: 100%;
}
Но воспользуюсь
Цитировать
body .container {}. Да, почему бы и нет?
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
я этоеще раньше сделал
.row {
   width: 100% !important;
}
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Я бы посоветовал ещё не злоупортеблять использованием !important. Сам юзаю только тогда, когда надо переопределить инлайновские стили. Уж очень высокая у него специфичность. Потом отлавливать тяжело. Правда вот так можно и !important переопределить: body .container {…!important}, но это уже изврат ^-^
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Смотрите, у вас тот случай, когда оба блока имеют ширину 1000px фиксированную. Тут max-width вообще лишняя запись, она не работает. А инспектор я что-то не признал. Файрбаг показывает удобно: все стили, переопределённые зачёркнутыми.
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Да и на скрине видно, что инспекторe на row наплевать - бледный очень
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Да как-то подсел на Chrome, уже привык,
тоже перечеркивает
http://bit.ly/1dkOPtE
 
Цитировать
Тут max-width вообще лишняя запись, она не работает
Почему лишняя, она же определяет максимальную ширину отображения
а без нее растянется все.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
В style.css же уже определена ширина:
Код: css
.container,.row{
   width: 1000px;
}
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
В style.css же уже определена ширина:
Код: css
.container,.row{
   width: 1000px;
}
Так верстка не адаптивная! Нужно чтобы контейнер уменьшался!
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Я чёт туплю наверное, не пойму, что у вас не получается конкретно? Можно сперва обнулить первую запись так:

Код: css
body .container, body .row{
   width: auto;
}

теперь у этих блоков нет ширины. А далее, ещё увеличив специфичность, верстать спокойно так:

Код: css
html body .container {}
HTML body .row {}

Или, ещё лучше, присвоить body класс или id. Тогда вообще красиво будет:

Код: css
#container .container {}
#container .row {}
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Я чёт туплю наверное, не пойму, что у вас не получается конкретно? Можно сперва обнулить первую запись так:

Код: css
body .container, body .row{
   width: auto;
}
При этом ширина страницы будет равна ширине окна браузера, и все прекрасно, пока не достигнем ширины 1000рх (так сфазирована схема - рисунок такой) и на любом мониторе страничка будет во всю ширину, а нам по бокам пустота нужна.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Код: css
body .container, body .row{
   width: auto;
   max-width: 1000px;
   min-width: 600px;
   margin: auto;
}
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Это «полурезина» получится. А адаптивный так тогда:
Код: css
@media (min-width: 980px) and (max-width: 1200px) {
 body .container, body .row{
  …
 }
}
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Код: css
body .container, body .row{
   width: auto;
   max-width: 1000px;
   min-width: 600px;
   margin: auto;
}
где-то так и сделаю, только не катит - надо бы от 320рх охватить, придется кучу @media насоздавать :)
печаль в том что шаблон на Bootstrap 3, а там такого накрутили!
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Да всё нормуль получается. Сперва общие правила:

Код: css
body .container, body .row{
   width: auto;
   margin: auto;
}

…потом частные:

Код: css
@media (min-width: 980px) and (max-width: 1200px) {
 body .container{
  width: 800px; /*на больших мониторах блок фиксированный*/
 }
 body .row{
  width: 100%;
 }
}

@media (min-width: 600px) and (max-width: 980px) {
 body .container {
  width: 75%; /*на средних тянется*/
  min-width: 600px;
 }
 body .row{
  width: 100%;
 }
}

@media (min-width: 320px) and (max-width: 600px) {
 body .container {
  width: 100%; /*на мелких 100%*/
  min-width: 320px;
 }
 body .row{
  width: 100%;
 }
}

Всё просто и логично.
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
да по @media вопросов как раз нет,
там они с сеткой другое учудили,
привязали к размерам монитора
.col-xs- (<768px)
col-sm-  (>768px) схлопывается когда меньше 720px
.col-md- (>992px) схлопывается когда меньше 940px
.col-lg- (>1200px) схлопывается когда меньше 1140px
но вот куча девайсов имеют (<768px), и я, обладая уже слабым зрением, на своей шкуре вижу кривую верстку, придется извращаться   :(
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Да, с бутстрапом беда. Сам не люблю и не понимаю всеобщего ажиотажа вокруг него. Вариант отключения не рассматривали? Фёдор Власенко даже плагин запилил для этого.
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
Цитировать
@media (min-width: 600px) and (max-width: 980px) {
 body .container {
  width: 75%; /*на средних тянется*/
  min-width: 600px;
 }
как то Неправильно экран маленький, а мы ему 75% показываем?
В бутстрапе там width:~ 750px; точно не помню, но фиксируется
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Я для примера написал. Полностью задачи вашей не знаю.
*

ShfVD

  • Давно я тут
  • 871
  • 65 / 0
На самом деле он не лучше и не хуже многих фреймверков.
Я на него подсел больше года назад по одной простой причине:
Создатели умудрились процентов на 75 сделать нормальное, структурированное описание с кучей примеров, которые работают.
Посему начал, где можно отказываться от сторонних плагинов и модулей, - и код получается зачастую меньше/чище, да и знаю где что и откуда.
 
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Добавление класса в список доступных классов шаблона

Автор Wishmaster_64

Ответов: 0
Просмотров: 1275
Последний ответ 22.11.2015, 11:03:49
от Wishmaster_64
Как сделать переопределение стилей для syperfish menu?

Автор Panchito

Ответов: 2
Просмотров: 1372
Последний ответ 18.11.2014, 12:47:27
от effrit
Можно ли присвоить несколько классов объекту?

Автор Hufflepuff

Ответов: 7
Просмотров: 2046
Последний ответ 08.02.2014, 16:06:00
от dynamit
Что-то я туплю... перечисление классов

Автор PashkaRu

Ответов: 17
Просмотров: 6170
Последний ответ 15.06.2010, 19:52:33
от PashkaRu
Указание классов CSS в шаблоне

Автор Toliman

Ответов: 2
Просмотров: 1971
Последний ответ 11.03.2010, 16:48:35
от Toliman