Как починить съехавший сайдбар?

pieliedie 31.07.2015 Шаблоны (TPL), Стили (CSS) 3421

вопрос

Проблема только в опере. На главной сайта дизайн отображается так как и должен, а в полной новости сайдбар уезжает вниз
Сайт

Ответил: pieliedie

Все, нашелся косяк. Нужно было один div достать из под тега [not-group=5]. Только не зарегестрированные видели корявый дизайн.
Спасибо всем

12 комментариев

Юзер

207

ScreN - 2015-02-0331 июля 2015 12:55 - #47003

Поместить блок сайдбара с классом col-md-9 в общий див с классом row.
http://clip2net.com/s/3lvsfi9

Класс row, это один ряд. У вас в данном случае один row, один ряд, в который входит блок контента. А блок сайдбара у вас выведен за тег row, то есть за ряд. А значит, блок сайдбара, не будет входить в один ряд с контентом и уедет вниз, создав для себя свой ряд. Потому что тег row занимает все пространство ряда, и выталкивает блок сайдбара из этого ряда, так как он в него не входит.

Юзер

pieliedie - 2015-02-0331 июля 2015 14:04 - #47006

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

Показать / Скрыть текст


<div class="container" id="mains">
  <div class="row row-offcanvas row-offcanvas-right">
    <div class="col-md-9">
      [aviable=main]
      <div class="main-top hidden-xs">
        <div class="main-top-block">
          <div class="seas">
            Находите интересное
            <span>
              Здесь вы можете найти множество интересных скриптов и не только.
            </span>
          </div>
        </div>
        <div class="main-top-block">
          <div class="suns">
            Делитесь своим
            <span>
              Каждый может добавить свой скрипт на сайт.
              </span>
          </div>
        </div>
        <div class="main-top-block">
          <div class="carrots">
            Помогайте сайту
            <span>
              Говорите друзьям о нас и админ даст печеньку =)
            </span>
          </div>
        </div>
        <div class="main-top-block">
          <div class="alizars">
            Учитесь
            <span>
              Ко всем скриптам прилагается инструкция по установке.
            </span>
          </div>
        </div>
      </div>
      [/aviable]
      <p class="pull-right off_butt">
        <button type="button" class="btn btn-default fontik" data-toggle="offcanvas" style="[not-aviable=main]border-left: 1px solid #ccc;border-radius: 4px;[/not-aviable]"><span class="glyphicon glyphicon-th-list"></span></button>
      </p>
      [aviable=main]{include file="_panel.tpl"}[/aviable]
      [not-aviable=main]{speedbar}<br class="clearfix">[/not-aviable]
      {info}
      {content}
      <div style="clear:both;">&nbsp;</div>
    </div>
    <div class="col-md-3 pull-right sidebar-offcanvas">
      {include file="_sidebar.tpl"}
      <div style="clear:both;">&nbsp;</div>
    </div>
  </div>
</div>

Юзер

207

ScreN - 2015-02-0331 июля 2015 14:35 - #47007

В коде все правильно.

А почему на сайте блок сайдара выходит за общий row?
http://clip2net.com/s/3lvOogK

[aviable=main]{include file="_panel.tpl"}[/aviable]
      [not-aviable=main]{speedbar}<br class="clearfix">[/not-aviable]
      {info}
      {content}
      <div style="clear:both;"> </div>

clear: both отсюда уберите. Возможно поэтому блок едет вниз. Из-за того что стоит очистка обтекания у блока контент.

Юзер

pieliedie - 2015-02-0331 июля 2015 14:44 - #47008

Убрал, не помогло

Юзер

207

ScreN - 2015-02-0331 июля 2015 15:55 - #47010

Вы когда изменение проводите, вы кэш чистите? Как могло не помочь, если я в инспекторе кода 2 раза проделал эти операции и все работало? Код в инспекторе абсолютно такой же как и в файлах.

Результат http://clip2net.com/s/3lw8atq

Бутстраповскую сетку ковыряли в CSS?

Юзер

pieliedie - 2015-02-0331 июля 2015 16:06 - #47012

Если я в инспекторе перетаскиваю div то все работает, а код вы говорите правильный. Ничего не понимаю

Юзер

207

ScreN - 2015-02-0331 июля 2015 16:03 - #47011

На главной странице все правильно стоит
http://clip2net.com/s/3lwa4kK

А в fullstory.tpl у вас сайдбар выходит за ряд row
http://clip2net.com/s/3lwagj6

Поэтому на главной все ровно, а в полной новости блок контента выпинывает блок сайдбара из своего ряда.

Юзер

pieliedie - 2015-02-0331 июля 2015 16:09 - #47013

Вот это и весь код fullstory


<div class="full">
    <span class="full-news-head"><span>{title}&nbsp;[edit] <i class="glyphicon glyphicon-pencil"></i>[/edit]</span> <div class="pull-right label label-success">{favorites}</div></span>
    <div class="full-news">
        <div class="full-news-short">
            {short-story}
        </div>
        [poll]{poll}[/poll]
{full-story}<br><br> 
            
[group=5]<div class="downloadac downloadac-register">
  <strong>Зарегестрируйтесь</strong> чтобы скачивать файлы.
</div>[/group]

[xfgiven_download][not-group=5]
<div class="downloadpanel"><button type="button" onclick="location.href='[xfvalue_download]'" class="downloadbtn downloadbtn-yand">Скачать с Яндекс.Диск</button>[/not-group][/xfgiven_download]
[xfgiven_demo] <button type="button" onclick="location.href='[xfvalue_demo]'" class="btn btn-info">Demo</button>[/xfgiven_demo] 
        </div>
        <br>
        <span class="full-tags pull-left">{tags}</span>
    </div>
    <div class="full-news-panel">
        <div class="pull-left full-author">{poster_avatar} &nbsp;{author}</div> <i class="glyphicon glyphicon-eye-open"></i> {views} <span class="pull-right"> {date=d.m.y}</span>
    </div>
    <div class="full-comment">
        <ul class="proff-body">
                <li>Комментарии <span>А что вы об этом думаете?</span></li>
</ul>
        {addcomments}
        {comments}
    </div>
</div>

Юзер

207

ScreN - 2015-02-0331 июля 2015 16:23 - #47014

Показать / Скрыть текст


<div class="row">
<div class="full">
    <span class="full-news-head"><span>{title} [edit] <i class="glyphicon glyphicon-pencil"></i>[/edit]</span> <div class="pull-right label label-success">{favorites}</div></span>
    <div class="full-news">
        <div class="full-news-short">
            {short-story}
        </div>
        [poll]{poll}[/poll]
{full-story}<br><br> 
            
[group=5]<div class="downloadac downloadac-register">
  <strong>Зарегестрируйтесь</strong> чтобы скачивать файлы.
</div>[/group]

[xfgiven_download][not-group=5]
<div class="downloadpanel"><button type="button" onclick="location.href='[xfvalue_download]'" class="downloadbtn downloadbtn-yand">Скачать с Яндекс.Диск</button>[/not-group][/xfgiven_download]
[xfgiven_demo] <button type="button" onclick="location.href='[xfvalue_demo]'" class="btn btn-info">Demo</button>[/xfgiven_demo] 
        </div>
        <br>
        <span class="full-tags pull-left">{tags}</span>
    </div>
    <div class="full-news-panel">
        <div class="pull-left full-author">{poster_avatar}  {author}</div> <i class="glyphicon glyphicon-eye-open"></i> {views} <span class="pull-right"> {date=d.m.y}</span>
    </div>
    <div class="full-comment">
        <ul class="proff-body">
                <li>Комментарии <span>А что вы об этом думаете?</span></li>
</ul>
        {addcomments}
        {comments}
    </div>
</div>
</div>