Помогите пожалуйста привести шаблон в божеский вид.

Тема в разделе "Создание шаблона", создана пользователем sanekmgsu, 17.11.2010.

  1. Offline

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

    Регистрация:
    12.11.2010
    Сообщения:
    21
    Симпатии:
    0
    Пол:
    Мужской
    Прочитал много топиков по созданию шаблонов (в перемешку для версии 1 и 1.5).
    Пишу шаблон под joomla 1.5 + Virtuemart.
    Появились проблемы:
    1. Правильно ли заполнена верхняя часть index.php до <body>?
    2. Joomla не подхватывает template.css 6 строка. Подскажите что вписать вместо "MAV-1".
    Там должн быть по идее php запрос на название шаблона.
    3. Что верно:
    <?php echo mosLoadModules('topcenter',0);?> или
    <jdoc:include type="modules" name="topcenter" />
    при выводе модулей для joomla 1.5 ?
    4. Сильно плывёт шаблон в explorer 6 в отличии от moziilli?

    Заметите ещё ошибки: напишите пожалуйста.

    Код (PHP):
    1. <?php echo '<?xml version="1.0" encoding="utf-8"?' .'>'; ?>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{LANG_TAG}" lang="{LANG_TAG}" dir="{LANG_DIR}" >
    4. <head>
    5. <jdoc:include type="head" />
    6. <link rel="stylesheet" href="templates/MAV-1/css/template.css" type="text/css" />
    7. </head>
    8. <body>
    9. <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#7DC2FD">
    10. <tr align="center"><!--Строка_1-->
    11. <td height="180" class="top_l"><p>логотип</p></td>
    12. <td class="top_cl"><p align="left" valign="top">ISQ</p></td>
    13. <td width="10" class="top_c">&nbsp</td>
    14. <td width="250" class="top_cr"><?php echo mosLoadModules('topcenter',0);?></td>
    15. <td class="top_r" valign="top"><jdoc:include type="modules" name="topright" /></td>
    16. </tr><!--конец_Строки_1-->
    17. <tr align="center"><!--Строка_2-->
    18. <td colspan="5" class="topmenu"><?php echo mosLoadModules('topmenu',0);?></td>
    19. </tr><!--конец_Строки_2-->
    20. <tr align="center"><!--Строка_3-->
    21. <td width="195" class="left"><?php echo mosLoadModules('left',0);?> </td>
    22. <td colspan="3" class="main"><jdoc:include type="component" /> </td>
    23. <td width="195" class="right"><?php echo mosLoadModules('right',0);?></td>
    24. </tr><!--конец_Строки_2-->
    25. <tr align="center"><!--Нижняя_строка-->
    26. <td height="57" colspan="5" class="footer"><?php echo mosLoadModules('footer',0);?></td>
    27. </tr><!--конец_Нижней_строки-->
    28. </table>
    29. </body>
    30. </html>


    И CSS:
    Код (CODE):
    1. body {
    2.     padding:0;
    3.     border:0;
    4.     margin:0;
    5.     font-family:Verdana, Arial, Helvetica, sans-serif;
    6.     color:#000;
    7.     /*background: url(../images/bg.jpg) repeat-x top #494949;*/
    8.     font-size:12px;
    9.     background-color: #7DC2FD;
    10. }
    11. a:link { color: #333; text-decoration: underline; }
    12. a:visited { color: #000; text-decoration: underline; }
    13. a:focus { color:#000; text-decoration:underline; }
    14. a:hover { color: #003A75; text-decoration:none; }
    15. a:active { color: #000; text-decoration:underline; }
    16. /*  ВВЕРХ (header,top)   */
    17. /*         top_l         */
    18. .top_l {
    19.     height: 159px;
    20.     background-position: top left;
    21.     background-color: #494949;
    22.     background-image: url(../images/header_c.jpg);
    23.     background-repeat: repeat-x;
    24. }
    25. /*         top_cl        */
    26. .top_cl {
    27.     height: 159px;
    28.     background-position: top center;
    29.     background-color: #494949;
    30.     background-image: url(../images/header_c.jpg);
    31.     background-repeat: repeat-x;
    32.     font-size:10px;
    33. }
    34. /*         top_c         */
    35. .top_c {
    36.     height: 159px;
    37.     background-position: top center;
    38.     background-color: #494949;
    39.     background-image: url(../images/header_c.jpg);
    40.     background-repeat: repeat-x;
    41.     font-size:10px;
    42. }
    43. /*         top_cr       */
    44. .top_cr {
    45.     height: 159px;
    46.     background-position: top center;
    47.     background-color: #494949;
    48.     background-image: url(../images/header_c.jpg);
    49.     background-repeat: repeat-x;
    50.     font-size:10px;
    51. }
    52. /*       top_r          */
    53. .top_r {
    54.     height: 159px;
    55.     background-position: top right;
    56.     background-color: #494949;
    57.     background-image: url(../images/header_right.jpg);
    58.     background-repeat: no-repeat;
    59.     border-width:0;
    60.     font-size:10px;
    61.     padding-left: 0px;
    62. }
    63.  
    64. .top_r .inputbox {
    65.     text-align: center
    66. }
    67. /************************/
    68. /*          Меню        */
    69. .topmenu {
    70.     background-color:#234988
    71. }
    72. .topmenu {
    73.     text-align: center;
    74.     padding:0;
    75.     margin:0 0 0 1px;
    76.     height:20px;
    77. }
    78. .topmenu ul {
    79.     padding:0;
    80.     margin:0;
    81.     list-style:none;
    82. }
    83. /* основной*/
    84. .topmenu ul li {
    85.     padding:0;
    86.     margin:0;
    87.     border-right:1px solid #fff;
    88.     float:left;
    89.     height:25px;
    90. }
    91. .topmenu ul li a {
    92.     padding:0 19px;
    93.     margin:0;
    94.     line-height:20px;
    95.     display:block;
    96.     color:#fff;
    97.     text-decoration:none;
    98. }
    99. .topmenu ul li a:hover {
    100.     color:#000;
    101.     background:url(../images/ver_1.jpg) repeat-x;
    102. }
    103. .topmenu #active_menu-nav {
    104.     color:#000;
    105.     background:url(../images/ver_1.jpg) repeat-x;
    106. }
    107. /************************/
    108. /*          Главное      */
    109. /************************/
    110. /*      Низ—(footer)   */
    111. .footer {
    112.     height: 57px;
    113.     background-position: center;
    114.     background-repeat: repeat-x;
    115.     background-color: #494949;
    116.     background-image: url(../images/footer_c.jpg);
    117. }
    118. /************************/
     

    Вложения:

    • mozilla.jpg
      mozilla.jpg
      Размер файла:
      44.8 КБ
      Просмотров:
      11
    • explorer.jpg
      explorer.jpg
      Размер файла:
      48.1 КБ
      Просмотров:
      9
    Последнее редактирование: 17.11.2010
  2.  
  3. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    1. правильный хеадер
    Код (html):
    1. <?php
    2. /*
    3. * @copyright    Copyright (C) 2008 - 2009 All rights reserved.
    4. * @license     
    5. */
    6. // no direct access
    7. defined( '_JEXEC' ) or die( 'Restricted access' );
    8. ?>
    9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    10. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
    11. <head>
    12. <jdoc:include type="head" />
    13. <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/system.css" type="text/css" />
    14. <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/general.css" type="text/css" />
    15. <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template.css" type="text/css" />
    16. <?php if($this->direction == 'rtl') : ?>
    17. <link href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template_rtl.css" rel="stylesheet" type="text/css" />
    18. <?php endif; ?>
    19. </head>
    20.  
    21. <body>

    2. подключение CSS файла
    Код (html):
    1. <link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template.css" type="text/css" />

    3. указание позиции модуля
    Код (html):
    1. <jdoc:include type="modules" name="user4" style="xhtml" />
     
    sanekmgsu нравится это.
  4. Offline

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

    Регистрация:
    12.11.2010
    Сообщения:
    21
    Симпатии:
    0
    Пол:
    Мужской
    woojin спасибо за оперативность.
    Подскажите пожалуйста как сделать: чтоб нижняя часть примыкала к низу экрана в случае если не достаточно материала размещено d"component", то есть чтоб таблица была растянута вниз по вертикали.
     
  5. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    хз, я сколько не пробовал такое вытворить, у меня не получалось
    погугли, где то про это было
     
  6. Offline

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

    Регистрация:
    04.11.2010
    Сообщения:
    17
    Симпатии:
    0
    Пол:
    Женский
    Ребята, не надо мучаться. Специально для таких как вы сделала универсальный шаблон с оптимизированным кодом. Шаблон с блочной версткой, таблицы уже давно на катят и не отвечают стандартам правят DIVы.
    Короче все описано, что как где менять и код уже готовый есть посмотрите, может в голове что-то проясниться http://likbez-net.ru/sozdanie-template.html
     
  7. Offline

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

    Регистрация:
    12.11.2010
    Сообщения:
    21
    Симпатии:
    0
    Пол:
    Мужской
    Судя по вашим сообщениям вы просто рекламируете сайт.

    Как выравнять центральную часть вверх?
    Как заставить её прилипнуть к верхней границе ячейки минус пару пикселей.
    Модуль объявлен в ячейке:
    Код (PHP):
    1. <td colspan="3" class="main_c"><jdoc:include type="component" /> </td>


    В CSS пробовал:
    Код (PHP):
    1. position:inherit;
    2.     top:1px;

    Может чё нить подскажете. :[
     
  8. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    м/ф "В синем море, в белой пене"
     
  9. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    нет такой позиции это указатель на то что значение унаследованно

    и завязывай с табличной вёрсткой
    переходи на тёмную сторону DIV'а ;)
     
  10. Offline

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

    Регистрация:
    12.11.2010
    Сообщения:
    21
    Симпатии:
    0
    Пол:
    Мужской
    Как скажете Обиван.

    И нарекаю его "main":
    Код (CODE):
    1. <td colspan="3" class="main_c"><div id="main"><jdoc:include type="component" /></div></td>

    Как теперь заставить содержимое "main" выравнить вверх?
     
  11. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    вообще от таблиц избавиться что не можешь?
    делай шаблон полностью весь на DIV'ав
    а не вставляй DIV во внутрь ячейки

    может не выровнять а прижать?

    читай:
    HTML таблицы

    и вообще возьми за правило в google.ru лазить прежде чем чего либо не понимать ;);)
     
  12. Offline

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

    Регистрация:
    12.11.2010
    Сообщения:
    21
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо. valign="top" для таблицы.
     
  13. Offline

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

    Регистрация:
    12.11.2010
    Сообщения:
    21
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо всем, В особенности woojin
    Решено. Вроде приемлемо.
     

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

Загрузка...