Ширина блока контента

6 года 8 мес. назад #436 от KocH
Здравствуйте.
Пытаюсь сделать свой шаблон. Возник вопрос - как сделать, чтобы ширина блока контента автоматически растягивалась до краев, если в колонках слева и справа нет никаких модулей и уменьшалась при включении модуля. А то у меня при включении модулей в правой колонке, они (модули)съежают под контент, хотя заданы float left для контента и float right для правой колонки.

Это index.php

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" www.w3.org/1999/xhtml " xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/KO_odessa/css/template.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="logo"><img src="<?php echo $this->baseurl ?>/templates/KO_odessa/images/logo.png"></img>
</div>
<div id="inhead">
<div id="search"> <?php if($this->countModules('top1')) : ?>
<jdoc:include type="modules" name="top1" style="xhtml" />
<?php endif; ?>
</div>
<div id="clear"></div>
<div id="topnav"> <?php if($this->countModules('top2')) : ?>
<jdoc:include type="modules" name="top2" style="xhtml" />
<?php endif; ?>
</div>
</div>
</div>
<div id="wrapper">
<div id="midbox">
<div id="leftnav"> <?php if($this->countModules('header1')) : ?>
<jdoc:include type="modules" name="header1" style="xhtml" />
<?php endif; ?>
</div>
<div id="slaider"> <?php if($this->countModules('header2')) : ?>
<jdoc:include type="modules" name="header2" style="xhtml" />
<?php endif; ?>
</div>
</div>

<div id="clear"></div>
<div id="topper">
<div id="topleft"> <?php if($this->countModules('user1')) : ?>
<jdoc:include type="modules" name="user1" style="xhtml" />
<?php endif; ?>
</div>
<div id="topright"><?php if($this->countModules('user2')) : ?>
<jdoc:include type="modules" name="user2" style="xhtml" />
<?php endif; ?>
</div>
</div>
<div id="content">
<div id="leftcol"><jdoc:include type="component" />
</div>
<?php if($this->countModules('right')) : ?>
<div id="rightcol"><jdoc:include type="modules" name="right" style="xhtml" /></div>
<?php endif; ?>


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


</body>
</html>


а это css :

*{
margin: 0;
padding: 0;
}

body{
background-color:#3E4B6B;

}

#header{
margin: 0 auto;
width:980px;
height:100px;
}

#logo{
width: 157px;
height: 96px;
margin-left: 30px;
float: left;
}


#inhead{
height: 100px;
width: 793px;
margin-left:187px;
}
#search{ /* Строка поиска */
margin-top: 10px;
float:right;
height: auto;
width: auto;
}

/* Модуль поиска*/

.search .button{
padding-left:2px;
padding-right:2px;
margin-left: 3px;
height:20px;
width:50px;
border:1px solid #8D99A5;
background-image:url(../images/search_but.png);
color: #ffffff;
font-size: 11px;

}
.search .button:hover{
color:#8D99A5;
cursor:pointer;
}



.search .inputbox {
border: none;
height:20px;
}


#topnav{ /* Верхнее меню */
float:right;
margin-top: -20px;

}

#topnav a:link, #topnav a:visited {
color: #FFFFFF;
width:auto;
margin-left: 5px;
margin-right: 5px;
text-decoration: none;
font-family: arial;
font-size: 11px;
}




#topnav a:hover , #topnav a:active {
color: #FFFFFF;
text-decoration: underline;


}

#wrapper {
width: 980px;
position: relative;
margin: 0 auto;
background-color: #ccccff;
}

/* Навигация и слайдер */
#midbox{
float: left;
margin: 0 auto;
margin-top: 20px;
margin-left:20px;
width: 940px;
height: 250px;
}

#clear{
clear: both;
}

/* Навигация слева */
#leftnav {
width: 200px;
min-height:240px;
float: left;
border: 1px solid white;
background:#3E4B6B;
padding-bottom: 10px;
}
#slaider{
width: 740px;
height: 250px;
margin-left: 200px;
border: 1px solid white;
}

.moduletable_menu h3{
font-family: Arial;
background: #ffffff;
text-indent: 10px;
color: #44516F;
}

.moduletable_menu ul{
list-style:url(../images/str.png);
margin-left: 30px;
margin-top: 5px;
margin-right: 25px;
}

.moduletable_menu ul li{
border-bottom: 1px solid #ffffff;
line-height: 25px;
font-size: 12px;
font-family: arial;
padding-right: 20px;
}

.moduletable_menu ul li a:link,
.moduletable_menu ul li a:visited{
text-decoration: none;
color: #ffffff;
}
.moduletable_menu ul li a :hover,
.moduletable_menu ul li a :active{
text-decoration: underline;
color: #ccccff;
}
#current a{
color: #ccccff;
}

#topper{
margin-left:20px;
margin-top:20px;
}

#topleft{
margin-left: 20px;
float: left;
background: white;
}

#topright{
margin-right: 20px;
float: right;
background: white;
}
/* Контент */
#content{
margin-left:20px;
margin-right:20px;
background-color: #ccccff;
}

#leftcol {
float: left;
margin-top: 10px;
background-color: white;


}

#rightcol{
width: 250px;
margin-top: 10px;
background-color: #ccccff;
float: right;
}


#footer{
margin: 0 auto;
width: 980px;
height: 70px;
background: #ccccff;
}

#botmenu {
margin-top: 10px;
margin-left: 40px;
float:left;
width:900px;
height: 25px;
}

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

6 года 8 мес. назад #442 от Wedal
KocH, не знаю какой кусок кода выводит левую колонку, но допустим этот:
<div id="topleft"> <?php if($this->countModules('user1')) : ?>
<jdoc:include type="modules" name="user1" style="xhtml" />
<?php endif; ?>

Т.е. у вас есть условие: если в позиции user1 есть хотя бы один модуль, то показать его.

Отталкиваясь от этого, вы должны правильно оперировать стилями и версткой. Т.е. если у вас имеется левая колонка фиксированной ширины, в которую уже входит вышеприведенный код, то, естественно, ничего не получится. Вам нужно поместить код создания колонки внутрь этого условия так, чтобы остальной код работал в любом случае, либо вы можете создать еще одно такое условия, изменяя для него стили. Например, если модули есть, то левая колонка 200px, если нет, то 0px. Аналогично должна расширяться и центральная часть. Короче говоря, решений тут очень много. Если все это не очень понятно, почитайте серию статей про создание шаблона Joomla. Там я как раз описывал такой случай.
Спасибо сказали: KocH

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

6 года 8 мес. назад - 6 года 8 мес. назад #445 от KocH
Извините если выразился не правильно (а похоже что так и есть). Вопрос в том, чтобы колонка контента уменьшалась или увеличивалась по ширине, в зависимости от того есть ли в ней включенный модуль. Код что вы указали прекрасно работает, но когда подключаются модули - правая колонка падает под контент, а ширина самого контента не изменяется. Имеет ли в этом случае значение резиновый шаблон или нет (в моем случае должен быть не резиновый)?
блок контента <divid="leftcol">.Правая колонка - rightcol. Оба находятся в блоке content

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

6 года 8 мес. назад #450 от Wedal
KocH, "резиновость" шаблона значения не имеет. Вот такой пример:

Предположим, что у вас есть сайт, содержащий левую колонку(150px) правую колонку(150px) и основную часть(500px). Вам нужно сделать так, чтобы если в правой колонке нет модулей, то центральная честь растягивалась на ширину этой правой колонки, т.е. становилась 650px.
Теперь, все, что необходимо сделать - добавить все это дело в условие, которое я приводил выше. Если в правой колонке есть модули, то установить ее ширину в 150px, а ширину основной части в 500px, если модулей нет, то ширину правой колонки 0px, а основной части 650px.
Честно говоря, это не совсем правильно. Лучше было бы не устанавливать ширину правой колонки в 0px, а вообще убрать код ее отображения. Способов много, выбирайте любой.

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

6 года 8 мес. назад - 6 года 8 мес. назад #453 от KocH
Разобрался. Но возник другой вопрос к Вам Wedal. Как в шаблоне можно реализовать главную страницу без отображения статей. А контент чтоб отображался уже на других страницах. Только различные модули. В Вашем платном разделе есть много таких шаблонов. Как например эти.
www.templatehelp.com/preset/pr_preview.php?i=33159&pr_code=nLz72g9u8P8746K7xV09MVxLq67tq1

www.templatehelp.com/preset/pr_preview.php?i=33097&pr_code=nLz72g9u8P8746K7xV09MVxLq67tq1

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

6 года 8 мес. назад #457 от Wedal
KocH, зайдите в менеджере меню в настройки главной страницы. Там справа можно будет указать количество материалов, выводимых на главной. Оставьте только один материал. Далее в менеджере материалов создайте пустую статью, укажите ее отображение для главной. Для остальных статей отключите отображение на главной. Далее, с помощью плагина loadmodule вставляйте в эту статью какие угодно модули. Подробно об этом можно почитать в одной из статей, которые я писал: wedal.ru/rasshireniya-joomla/virtuemart-internet-magazin-na-joomla-chast-18-vivod-kategoriy-virtuemart-s-izobrazeniyami-na-glavnoy-stranice-saita.html
Спасибо сказали: KocH

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.


Вверх