Joomla 1.5 DIVная верстка

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем Arks, 13.03.2010.

  1. Offline

    Arks Недавно здесь

    Регистрация:
    13.03.2010
    Сообщения:
    19
    Симпатии:
    0
    Пол:
    Мужской
    Пожалуйста подскажите:

    Делаю свой шаблон для 1.5 сейчас, столкнулся со странной проблемой.

    При табличной верстке все отлично - создаются таблицы, мы их заполняет модулями и т.п.

    При верстке div'ами они почему-то не создаются на странице если мы не помещает в них содержимое(модуль, компонент и т.п.) и вообще вложенные div'ы ведут себя крайне странно

    В данном случае например проблема в создании закругленных элементов - при реализации таблицами все отлично, div'ы же упорно не хотят нормально отображаться. :'(
    Проще говоря не могу создать ни одного div'а на странице(ну к примеру серый квадрат в заданном месте) хотя в коде возвращаемом браузером div присутствует. Прямо мистика!
     
    Последнее редактирование: 13.03.2010
  2.  
  3. Offline

    Дикий Кошак Недавно здесь

    Регистрация:
    09.03.2009
    Сообщения:
    111
    Симпатии:
    12
    Пол:
    Мужской
    http://www.htmlbook.ru/

    Вот тебе в помощь...
    Сначала чуть разберись в целом в способах верстки со слоями
     
  4. Offline

    Arks Недавно здесь

    Регистрация:
    13.03.2010
    Сообщения:
    19
    Симпатии:
    0
    Пол:
    Мужской
    А подробнее можно? Просто не вижу связи между моим вопросом и данным ресурсом. Дело не в том что у меня проблема с версткой div'ами а в том как их обрабатывает joomla в качестве шаблона. Со версткой статичных страничек у меня проблем нет.

    Пример:
    такой код
    Код (PHP):
    1. <div class="test"></div>

    обрабатывает некорректно(нет фона присвоенного классу test) а вот этот вполне нормально, выводится содержимое модуля на фоне класса test:
    Код (PHP):
    1. <div class="test"><jdoc:include type="modules" name="footer" /></div>
     
    Последнее редактирование: 13.03.2010
  5. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    Arks, Джумле пофигу на верстку. Отображает шаблон браузер, который руководствуется правилами css.
    Так фон прописали?
    .test{
    background:#000;
    }
    А Вы не забыли о том, что пустой див и не будет показан? Нужно задать высоту и ширину в таком случае. Или заполнить контентом, что Вы во втором случае и делаете.
     
  6. Offline

    Arks Недавно здесь

    Регистрация:
    13.03.2010
    Сообщения:
    19
    Симпатии:
    0
    Пол:
    Мужской
    .test {
    background-color: #FF0;
    position: absolute;
    height: 200px;
    width: 200px;
    left: 100px;
    top: 100px;
    }

    говорю же мистика((
     
  7. Offline

    Arks Недавно здесь

    Регистрация:
    13.03.2010
    Сообщения:
    19
    Симпатии:
    0
    Пол:
    Мужской
    хотя с непрерывным пробелом тоже нормально работает
     
  8. Gronpipmaster
    Offline

    Gronpipmaster специалист

    Регистрация:
    21.01.2009
    Сообщения:
    1 392
    Симпатии:
    62
    Пол:
    Мужской
    Arks, точно мистика, или где-то косяк, пробел не выход(не кошерно), может без абсолюта его просто маргином
     
  9. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    Arks, вставил в редактор... работает. Я что-то не правильно делаю?
     
  10. Offline

    Arks Недавно здесь

    Регистрация:
    13.03.2010
    Сообщения:
    19
    Симпатии:
    0
    Пол:
    Мужской
    Fanamura, хорошо что хоть у Вас работает.

    Все видели приведенный код css, смысл в том что div ведет себя странно:
    Код (html):
    1. <div class="test"><jdoc:include type="modules" name="footer" /></div>

    - В этом варианте div почему-то игнорирует свойства height и weight размер ровно на модули выведенные в позиции footer(менюшка из трех пунктов по размеру много меньше 200х200)+снизу какой-то непонятный отступ от div'а(где-то в 20px)
    Код (html):
    1. <div class="test"><jdoc:include type="modules" name="footer" />&nbsp;</div>

    - В этом варианте свойства height и weight учитываются но также этот ненужный пробел сдвигает модуль внутри div'а что не очень хорошо.

    Я что-то не правильно делаю? Или вы дальше будете говорить что Джумле пофиг на верстку? Попробую поковыряться в скрипте вывода модулей
     
  11. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    Arks, буду, ибо верстаю уже 3 года и такого не замечал. Вы Firebug устанавливали? А знаете, что модули можно выводить в разной оболочке? А читали документацию и FAQ?
     
  12. Offline

    Arks Недавно здесь

    Регистрация:
    13.03.2010
    Сообщения:
    19
    Симпатии:
    0
    Пол:
    Мужской
    Ладно спишем это на причуды Chrome'а, открыл в IE - стало все ОК(после перекэширования странички Chrome тоже стал нормально открывать)
     
  13. Offline

    Arks Недавно здесь

    Регистрация:
    13.03.2010
    Сообщения:
    19
    Симпатии:
    0
    Пол:
    Мужской
    Ага, кстати понял в чем проблема была:

    Т.к. в отличие от штатного режима таблиц div начинает загружаться сразу то пока сервер обрабатывает <jdoc:include type="modules" name="footer" /> браузер уже посчитал наш тэг div "пустым" и решил его не рисовать. Как можно этого избежать?
     
  14. Offline

    _voland_ специалист

    Регистрация:
    12.04.2008
    Сообщения:
    2 173
    Симпатии:
    102
    Пол:
    Мужской
    Полная чушь - пока index.php не сформируется, она не начнет отдаваться браузеру, это ж не аякс
     
  15. Offline

    Arks Недавно здесь

    Регистрация:
    13.03.2010
    Сообщения:
    19
    Симпатии:
    0
    Пол:
    Мужской
    Полностью согласен, но тут дело в том что в версии 1.5 вывод модулей идет как html-тэг

    Убедиться можно на простом примере-верстаем несколько дивов:

    1.любой, например размером 20%*100
    2.справа от первого, размером 80%*auto, в нем выводим компонент(и чтобы по вертикали чтоб был больше первого)
    3.тоже любой размером 50%*100

    И что же мы увидим?
    Что 3-ий div будет расположен не там где закончится div с выведенным компонентом а что он будет строго под 1-ым div'ом, причем наедет на div с компонентом. Вот вам пример.

    Если реализовывать это таблицей то все будет ОК - сначала полностью сформируется компонент и только потом руль перейдет к следующему элементу. В посте выше я это имел в виду
     
    Последнее редактирование: 14.03.2010
  16. Gronpipmaster
    Offline

    Gronpipmaster специалист

    Регистрация:
    21.01.2009
    Сообщения:
    1 392
    Симпатии:
    62
    Пол:
    Мужской
    Arks, а флоат? не понял с размерами сначала 20 потом 80, естествен в низ уползать будет 3(20% +80% уже 100, а вы еще 50% лепите). таблицы=зло. только форумная верстка
     
  17. Offline

    Arks Недавно здесь

    Регистрация:
    13.03.2010
    Сообщения:
    19
    Симпатии:
    0
    Пол:
    Мужской
    Вопрос не в том что будет уползать а в том куда будет уползать.
    Для наглядности:
    вместо того чтобы получить
    [​IMG]
    будет
    [​IMG]

    Браузер не дождался окончания вывода компонента в правый div и уже начал рисовать следующий(он автоматически попал под первый т.к. у него фиксирована высота)
     
    Последнее редактирование: 15.03.2010
  18. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    Arks, верстайте float'ами
     
  19. Gronpipmaster
    Offline

    Gronpipmaster специалист

    Регистрация:
    21.01.2009
    Сообщения:
    1 392
    Симпатии:
    62
    Пол:
    Мужской
    Arks, оно и должно туда уползти, с чего в друг будет под 1-ровно. По мойму так верстать не правильно. Я по рукам бью обычно за такое.
     
  20. Offline

    Arks Недавно здесь

    Регистрация:
    13.03.2010
    Сообщения:
    19
    Симпатии:
    0
    Пол:
    Мужской
    так float'ы по левому краю присутствуют

    А как надо? Если у правого div'а(там где компонент) высоту задать принудительно то будет как на верхней картинке но мы ж не знаем сколько займет компонент поэтому выставляем auto. Как вариант поместил все в таблицу из трех строк но это же лишнее загромождение кода
     
  21. Gronpipmaster
    Offline

    Gronpipmaster специалист

    Регистрация:
    21.01.2009
    Сообщения:
    1 392
    Симпатии:
    62
    Пол:
    Мужской
    Arks,
    Код (html):
    1. <div left>
    2. <div 1>
    3. <div 2>
    4. </div left>
    5. <div component>
    6. </div>

    какие еще тут могут быть проблемы, представ те что вы вообще не знаете что такое таблицы и шкодить станет легче)
     

Поделиться этой страницей

Загрузка...