Позиция "Right" смещается вниз

  • 5 Ответов
  • 868 Просмотров

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

*

Оффлайн Леон

Здравствуйте. По одному интересному примеру из сети решил попробовать сделать свой шаблон для Joomla 3. И практически в начале работы столкнулся с проблемой. Задача простая, чтобы было 3 колонки: left, main, right. Main - это основная для вывода материала. Вот две части кода которые не работают как надо из файла index.php шаблона:

Часть кода из тега <body> отвечающая за вывод:
                      <div class="container">

<header class="header">
<div class="header-inner clearfix">
<a href="" class="site-title">Название сайта!</a>
</div>
</header>

<div class="row-fruid">

<?php if($this->countModules('left')): ?>
<div id="left" class="span3">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
<?php endif; ?>

<div id="main" class="<?php echo $span?>">
<jdoc:include type="component" />
</div>

<?php if($this->countModules('right')): ?>
<div id="right" class="span3">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<?php endif; ?>
</div>

</div>

А это в самом начале файла index.php:
<?php
    defined
('_JEXEC') or die;
$app JFactory::getApplication();
$app JFactory::getDocument();
JHtml::_('bootstrap.framework'); 
JHtml::_('bootstrap.loadCss'true$this->direction);

if ($this->countModules('left') && ($this->countModules('right'))) {
$span 'span6';
}
elseif ($this->countModules('left') && (!$this->countModules('right'))) {
$span 'span9';
}
elseif (!$this->countModules('left') && ($this->countModules('right'))) {
$span 'span9';
}
else {  
$span 'span12';
}
?>

Должно определяться, если присутствуют модули и в left и в right позициях, то ширина main будет span6, и т.д.
Сейчас если модулей нет в обеих позициях, main действительно занимает всю ширину span12.
Но если включить модули, позиция left выводится нормально шириной span3, main тоже как надо шириной span6, а позиция right переносится вниз, а спрво остается пустое место шириной как раз span3

Простите если неправильно выразился, первый раз пытаюсь сделать с нуля, а не переделывать готовый. Залил на хостинг, можно посмотреть http://site2.worldofsites.ru/
« Последнее редактирование: 19.03.2015, 19:38:47 от Леон »

*

Оффлайн AlekVolsk

Re: Позиция "Right" смещается вниз
« Ответ #1 : 19.03.2015, 20:19:59 »
Не знаю, почему, но у вас все span имеют фиксированный размер в px, тогда как должны быть %. Переопределите в стилях своего шаблона .span6 {width:540px;} - это поможет, но вообще указание сетки в px - это изврат, имхо.

*

Оффлайн zomby6888

Re: Позиция "Right" смещается вниз
« Ответ #2 : 19.03.2015, 20:36:24 »
<div class="row-fruid"> на <div class="row-fluid"> или <div class="row">

но вообще указание сетки в px - это изврат, имхо.

Это бутстрап, ничто там не прописано руками. Если что то там ковырять ручками поломаете всю респонсив верстку и медиазапросы поломаете.
« Последнее редактирование: 19.03.2015, 20:42:07 от zomby6888 »
интернет-блог: http://websiteprog.ru

*

Оффлайн Леон

Re: Позиция "Right" смещается вниз
« Ответ #3 : 19.03.2015, 20:41:58 »
zomby6888, Большое спасибо) Похоже невнимательно переписал код, теперь можно продолжать.

*

Оффлайн Леон

Re: Позиция "Right" смещается вниз
« Ответ #4 : 24.03.2015, 16:58:21 »
Пробую сделать свой шаблон. Ну пока не шаблон а клон одного сайта. Чтобы было видно к чему стремиться. Из темы про "версию для слабовидящих" от AlekVolsk. Так же тестирую все на своей площадке (ссылку давал 2 поста назад). Цель - навыки переноса сайта из html+css на Joomla. Шапка встала идеально, футер тоже, левая и правая колонка это понятно как делать (пока не занимался). Проблемы с выводом меню. Вот HTML код меню:

<!DOCTYPE html>
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link href="css/bootstrap.css" rel="stylesheet"/>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

<link href="css/template.css" type="text/css"  rel="stylesheet" />

</head>




<body>

    <div class="page">
<div class="navbar gov">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse">
<ul class="nav">

<li class="dropdown"><span><a href="#" title="1" class="dropdown-toggle" data-toggle="dropdown">Пункт 1<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><span><a  title="1-1" href="/1-1/">подпункт 1</a></span></li>
<li><span><a  title="1-2" href="/2-2/">подпункт 2</a></span></li>
</ul></span></li>

<li class="dropdown"><span><a href="#" title="2" class="dropdown-toggle" data-toggle="dropdown">Пункт 2<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><span><a  title="3" href="/3-1/">подпункт 1</a></span></li>
<li><span><a  title="3-1" href="/3-2/">подпункт 2</a></span></li>
<li><span><a  title="3-2" href="/3-3/">подпункт 3</a></span></li>
</ul></span></li>

<li><span><a  title="4" href="/news/" >Пункт 3</a></span></li>

<li><span><a  title="5" href="/news/" >Пункт 4</a></span></li>

<li><span><a  title="6" href="/news/" >Пункт 5</a></span></li>

<li><span><a  title="7" href="/index.php" >Пункт 6</a></span></li>

<li><span><a  title="8" href="/contact/" >Пункт 7</a></span></li>

</ul>

</div>
</div>
</div>
</div>       
</div>

</body></html>

Исходя из тега head, в index.php файле Joomla у меня подключены bootstrap и jquery. В вышепредставленном примере в body находится только меню, в нем имеются пункты второго уровня.


В index.php я вывел это так:

<div class="page">
<div class="navbar gov">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse">
<ul class="nav">
<jdoc:include type="modules" name="menu" style="xhtml" /> 
</ul>
</div>
</div>
</div>
</div>       
</div>

Оставил всю структуру, чтобы не менять файл со стилями. Меню выводится, но такое ощущение, что не все стили применяются, а только часть. Также не совсем понимаю, что нужно прописать как суффикс класса меню в модуле меню Joomla.


*

Оффлайн Леон

Re: Позиция "Right" смещается вниз
« Ответ #5 : 02.04.2015, 13:32:43 »
Помогите пожалуйста разобраться с меню. Когда в файл шаблона index.php, вставляю код меню из HTML шаблона, все прекрасно работает:
<div class="navbar gov">
<div class="navbar-inner">
<ul class="nav">
<li class="dropdown"><span><a href="#" title="1" class="dropdown-toggle" data-toggle="dropdown">Пункт 1<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><span><a  title="1-1" href="/1-1/">подпункт 1</a></span></li>
<li><span><a  title="1-2" href="/2-2/">подпункт 2</a></span></li>
</ul></span></li>

<li class="dropdown"><span><a href="#" title="2" class="dropdown-toggle" data-toggle="dropdown">Пункт 2<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><span><a  title="3-1" href="/3-1/">подпункт 1</a></span></li>
<li><span><a  title="3-2" href="/3-2/">подпункт 2</a></span></li>
<li><span><a  title="3-3" href="/3-3/">подпункт 3</a></span></li>
</ul></span></li>

<li><span><a  title="4" href="/news/" >Пункт 3</a></span></li>
<li><span><a  title="4" href="/news/" >Пункт 4</a></span></li>
<li><span><a  title="4" href="/news/" >Пункт 5</a></span></li>
</ul>
</div>
</div>

Но это ведь не дело, чтобы править меню придется править файл в index.php . Куда правильно надо вставить строку:
<jdoc:include type="modules" name="menu" style="xhtml" /> чтобы меню бралось из админки. Пробовал убирать пункты меню и вставлять строку с позицией, меню выглядит не так, не работает выпадающее меню, т.к. не применяются все стили.

Прикрепляю HTML меню и мой файл index.php