Ширина блока контента
- KocH
-
Автор темы
- Не в сети
- Новый участник
-
- Сообщений: 9
- Спасибо получено: 0
Пытаюсь сделать свой шаблон. Возник вопрос - как сделать, чтобы ширина блока контента автоматически растягивалась до краев, если в колонках слева и справа нет никаких модулей и уменьшалась при включении модуля. А то у меня при включении модулей в правой колонке, они (модули)съежают под контент, хотя заданы 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="language; ?>" lang="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;
}
Пожалуйста Войти или Зарегистрируйтесь, чтобы присоединиться к беседе.
- Wedal
-
- Не в сети
- Администратор
-
- Сообщений: 2870
- Спасибо получено: 659
Т.е. у вас есть условие: если в позиции user1 есть хотя бы один модуль, то показать его.
Отталкиваясь от этого, вы должны правильно оперировать стилями и версткой. Т.е. если у вас имеется левая колонка фиксированной ширины, в которую уже входит вышеприведенный код, то, естественно, ничего не получится. Вам нужно поместить код создания колонки внутрь этого условия так, чтобы остальной код работал в любом случае, либо вы можете создать еще одно такое условия, изменяя для него стили. Например, если модули есть, то левая колонка 200px, если нет, то 0px. Аналогично должна расширяться и центральная часть. Короче говоря, решений тут очень много. Если все это не очень понятно, почитайте серию статей про создание шаблона Joomla. Там я как раз описывал такой случай.
Пожалуйста Войти или Зарегистрируйтесь, чтобы присоединиться к беседе.
- KocH
-
Автор темы
- Не в сети
- Новый участник
-
- Сообщений: 9
- Спасибо получено: 0
блок контента <divid="leftcol">.Правая колонка - rightcol. Оба находятся в блоке content
Пожалуйста Войти или Зарегистрируйтесь, чтобы присоединиться к беседе.
- Wedal
-
- Не в сети
- Администратор
-
- Сообщений: 2870
- Спасибо получено: 659
Предположим, что у вас есть сайт, содержащий левую колонку(150px) правую колонку(150px) и основную часть(500px). Вам нужно сделать так, чтобы если в правой колонке нет модулей, то центральная честь растягивалась на ширину этой правой колонки, т.е. становилась 650px.
Теперь, все, что необходимо сделать - добавить все это дело в условие, которое я приводил выше. Если в правой колонке есть модули, то установить ее ширину в 150px, а ширину основной части в 500px, если модулей нет, то ширину правой колонки 0px, а основной части 650px.
Честно говоря, это не совсем правильно. Лучше было бы не устанавливать ширину правой колонки в 0px, а вообще убрать код ее отображения. Способов много, выбирайте любой.
Пожалуйста Войти или Зарегистрируйтесь, чтобы присоединиться к беседе.
- KocH
-
Автор темы
- Не в сети
- Новый участник
-
- Сообщений: 9
- Спасибо получено: 0
www.templatehelp.com/preset/pr_preview.php?i=33159&pr_code=nLz72g9u8P8746K7xV09MVxLq67tq1
www.templatehelp.com/preset/pr_preview.php?i=33097&pr_code=nLz72g9u8P8746K7xV09MVxLq67tq1
Пожалуйста Войти или Зарегистрируйтесь, чтобы присоединиться к беседе.
- Wedal
-
- Не в сети
- Администратор
-
- Сообщений: 2870
- Спасибо получено: 659
Пожалуйста Войти или Зарегистрируйтесь, чтобы присоединиться к беседе.