как со стилями быть?

4 октября 2011 г.

доброго времени, друзья!
верстаю страничку и столкнулся с проблемой.

можно посмотреть здесь

есть такой макет:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title><?php $kernel->show_title()?></title>
   <meta name="description" content="<?php $kernel->show_description()?>"></meta>
   <meta name="keywords" content="<?php $kernel->show_keywords()?>"></meta>
   <meta content="text/html; charset=<?php echo SITE_CODING?>" http-equiv="Content-Type"></meta>
   <?php $kernel->show_CSS()?>
   
   <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/news/rss/" />
   <script src="http://www.google.com/jsapi"></script>
        <script>google.load("mootools", "1.2.1");</script>
        <script src="/hostcmsfiles/moo/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>
         <script type="text/javascript" >
      window.addEvent('domready', function() {
         var myMenu = new MenuMatic();
      });
   </script>
   
   <script type="text/javascript" src="/hostcmsfiles/jquery/jquery.js"></script>
   
   <script type="text/javascript" src="/hostcmsfiles/jquery/jquery.validate.js"></script>
   
   <script type="text/javascript" src="/hostcmsfiles/jquery/lightbox/js/jquery.lightbox.js"></script>
   <link rel="stylesheet" type="text/css" href="/hostcmsfiles/jquery/lightbox/css/jquery.lightbox.css" media="screen" />

   <script type="text/javascript" src="/templates/template1/hostcms.js"></script>
   <script type="text/javascript" src="/hostcmsfiles/ajax/JsHttpRequest.js"></script>
   <script type="text/javascript" src="/hostcmsfiles/ajax/ajax.js"></script>
   <script type="text/javascript" src="/hostcmsfiles/main.js"></script>
        <script type="text/javascript" src="/hostcmsfiles/">
   
   <script type="text/javascript" src="/hostcmsfiles/jquery/bbedit/jquery.bbedit.js"></script>

   <script type="text/javascript">
   $(function() {
      $('#gallery a:has(img)').lightBox();

      //Предварительная загрузка изображений
      $.preLoadImages("/images/red_grad.gif",
            "/images/top_menu_l.gif",
            "/images/top_menu_r.gif");
   });
   </script>
</head>

<body>
<div id="frame">
   <div id="main">
        <div id="layout">
        <div id="layout-shadow-y-left"></div>
        <div id="layout-shadow-y-right"></div>
           <div id="header">
      <a href="/" class="logo"><img src="/images/site29/logo.png" alt="" width="153" height="148" /></a>
           </div>
      <div id="menu">
         
         <?php
         $Structure = & singleton('Structure');
         $Structure->ShowStructure('3', 'ЦентральноеМенюМакет5');
         ?>
      </div>
                       <div id="secmenu_big">
            <div class="secmenu">
               <div class="element_secmenu"><h1>ШКОЛА ЖИЗНИ</h1></div>
            </div>
            <div class="secmenu">
               <div class="element_secmenu"><h1>ДОСКА ПОЧЕТА</h1></div>
            </div>
            <div class="secmenu">
               <div class="element_secmenu"><h1>КАЛЕНДАРЬ СОБЫТИЙ</h1></div>
            </div>
         </div>
      
         <?php
         $kernel->show_current_template();
         ?>

    <div id="footer">

         <div style="float: right;">© 2010—<?php echo $kernel->GetCurrentYear();?> <strong>АКОО "За добрые дела"</strong>,
         дизайн </div>
         <div style="float: left;"><a href="http://www.hostcms.ru" target="_blank">Система управления сайтом HostCMS</a></div>

    </div>
</div>
</div>
</div>
</body>
</html>

вроде все нормально, НО когда подставляется шаблон

<div class="h1">НОВОСТИ</div>

<?php
     $InformationSystem = & singleton('InformationSystem');
     $item_count = 3;
     $InformationSystemId = '15';
     $InformationGroupId = false;  // false - из всех групп, 0 - из корневой группы
     $InformationSystem->ShowInformationSystem($InformationSystemId, $InformationGroupId, 'НовостиНаГлавную', $item_count, 0);
?>

<div class="h1">НАША ДЕЯТЕЛЬНОСТЬ</div>

<div id="news">
   <div class="arts">
                <?php
                   $kernel->show_current_page();
                ?>
        </div>
</div>

то div с классом h1 поглощает в себя вышестоящий div, который указан в макете. блок с id=layout почему-то заканчивается после ИС из шаблона... не пойму, как обстоят дела с наследованием стилей в шаблонах и макетах((

css:

body, input, textarea, select{
font-family:Verdana,Verdana,Geneva,sans-serif;
font-size:10px;
}
#frame {
position: relative;
width: 100%;
min-width: 100em;
overflow: hidden;
}

#main{
width: 100em;
margin: 0 auto;
background: #FFF;
}

#layout {
position: relative;
width: 92em;
padding:0 4em 0 4em;
}

#layout-shadow-y-left,
#layout-shadow-y-right {
position: absolute;
top: 0;
left: -28px;
z-index: 0;
width: 28px;
height: 18000em;
background: url('/images/site29/shadow.png') 0 0 repeat-y;
}

#layout-shadow-y-right {
left: 100%;
background-position: 100% 0;
}

#news{
position:relative;
width:100%;
display:block;
float:left;
background-color:#d6dad8;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
hidden:overflow;
}

.news_left{
width:30%;
position:relative;
float:left;
border:none;
z-index:1;
padding:1em;
}

.h1{
display:block;
position:relative;
float:leaft;
text-color:#e77817;
font-weight:bold;
font-size:18px;
margin-top:10px;
margin-bottom:10px;
}

4 октября 2011 г.

Re: как со стилями быть?

barnaulez, зачем изобретать велосипед?

Во1х, есть замечательные CSS-фремворки, для создания сеток макета. Например YUI Grids, к нему даже билдер существует: http://developer.yahoo.com/yui/grids/builder/
Эта штука, помимо сеток макета включае в себя еще и отличный css reset для всех браузеров и вообще изрядно добавляет кроссбраузерности в ваш будущий макет.

Далее, во2х, про иерархию классов и идентификаторов css можно почитать хотя бы здесь - http://htmlbook.ru/samcss/kaskadirovanie да и вообще почитайте этот сайт там много очень полезной справочной информации.

В3х, ну зачем использовать в одном макете jQuery и Mootools? Вы себе добра не желаете что-ли? Или вам не жаль своего времени на отладку и увязывание между собой плагинов из двух разных js-фреймворков? Или вам не жаль несчастных пользователей, который должны будут грузить себе в браузер лишние полметра ява-скпритов?
Есть такое негласное правило - не больше одного js-фреймворка на сайте. А поскольку HostCMS нативно использует jQuery, то вы уж найдите, пожалуйста, аналогичный скрипт меню на jQuery а не на Mootools

Ну и в4х, а почему вы вообще верстаете уже в натянутом на HostCMS макете? У вас ведь корень проблемы-то именно в этом!
Правильная технология такова:
Сначала вы верстаете весь макет в виде кучи статичных html-файлов. И вот именно в этом виде вы его доводите до совершенства - чтобы вс менюшки работали, чтобы все лайтбоксы открывались, чтобы никакие теги друг-друга не поглощали... Преимущество тут в том, что никакие другие компоненты CMS на влияют на отладку и не мешают вам.
Ну и естественно в таком виде надо сверстать не одну главную страницу, а все страницы разных типов - главную, список статей/новостей/других текстовых элементов, страницу самой новости/статьи и т.п.
И вот потом, когда макет в статичном виде готов, вы просто разрезаете его на части, вставляете эти части в макет сайта, в шаблоны страниц, в XSL-шаблоны, и заменяете "рыбный" текст выводом нужного контента.
И это только на первый взгляд кажется, что будет двойная работа, а на самом деле вы себе такой технологией сэкономите кучу времени!

Заказов не беру. Консультирую редко.

4 октября 2011 г.

Re: как со стилями быть?

вся прелесть в том, что статичные html есть, никаких поглощений и обрезаний там нет. а вот на этапе разрезаний и вставок в шаблоны все это начинает происходить.

4 октября 2011 г.

Re: как со стилями быть?

barnaulez, значит у вас лишние теги в xsl-шаблонах

Заказов не беру. Консультирую редко.

4 октября 2011 г.

Re: Re: как со стилями быть?

пока таковых не обнаружил((

4 октября 2011 г.

Re: как со стилями быть?

ну тут я вам только одно могу сказать.
Если исходный статически макет правильно сверстан и правильно разрезан на шаблоны то проблем быть не может.
Значит либо у вас в исходном макете ошибка, либо вы разрезали неправильно.
Но к сожалению то что я вижу по приведенной вами ссылке сделать какого-то вывода не дает.
Лишних тегов я там не вижу, валидатор тоже ничего такого не говорит, кроме того, что вот этот странный тег

у вас, во1х, не закрыт, а во вторых src указывает в пустоту.
Ну и да, еще валидатор говорит что несколько раз на одной странице элементы с одинаковыми id встречаться не могут, поэтому вместо div id="news" вам надо использовать div class="news"

Так что надо сначала поискать причину в исходном макете

Заказов не беру. Консультирую редко.

Авторизация