PDA

Zobacz pełną wersję : Układ strony



Rafael_fEVO
03-04-2011, 01:57
Mam w swoim szablonie układ content(?)-left-right. A chciałbym, aby lewa była po lewej, a po niej jakiś obiekt i dopiero potem prawa.

Próbowałem kombinować, ale jakoś mi nie wychodzi.

Odpowiedni fragment z index.php

<!-- CONTAINER -->
<div id="zt-container<?php echo $zt_width; ?>" class="clearfix">

<div id="zt-content">
<div id="zt-content-inner">

<?php if($this->countModules('user5')) : ?>
<div id="zt-user5" class="clearfix">
<jdoc:include type="modules" name="user5" style="ztxhtml" />
</div>
<?php endif; ?>

<div id="zt-component" class="clearfix">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>

<?php if($this->countModules('user6')) : ?>
<div id="zt-user6" class="clearfix">
<jdoc:include type="modules" name="user6" style="ztxhtml" />
</div>
<?php endif; ?>

<?php
$spotlight = array ('col1','col2','col3');
$botsl1 = $ztTools->calSpotlight($spotlight,$ztTools->isOP()?100:99,'%');
if( $botsl1 ) :
?>
<div id="zt-col" class="clearfix">

<?php if($this->countModules('col1')) : ?>
<div id="zt-col1" class="zt-user zt-box<?php echo $botsl1['col1']['class']; ?>" style="width: <?php echo $botsl1['col1']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="col1" style="ztxhtml" />
</div>
</div>
<?php endif; ?>

<?php if($this->countModules('col2')) : ?>
<div id="zt-col2" class="zt-user zt-box<?php echo $botsl1['col2']['class']; ?>" style="width: <?php echo $botsl1['col2']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="col2" style="ztxhtml" />
</div>
</div>
<?php endif; ?>

<?php if($this->countModules('col3')) : ?>
<div id="zt-col3" class="zt-user zt-box<?php echo $botsl1['col3']['class']; ?>" style="width: <?php echo $botsl1['col3']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="col3" style="ztxhtml" />
</div>
</div>
<?php endif; ?>

</div>
<?php endif; ?>

</div>
</div>

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

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

</div>
<!-- END CONTAINER -->

I z template.css

/*****CONTENT*****/
#zt-mainbody {
margin: 10px 0;
width: 100%;
}
#zt-mainbody-inner {
width: 100%;
}
#zt-container,
#zt-container-left,
#zt-container-right,
#zt-container-full {
width: 100%;
overflow: hidden;
}
#zt-left {
float: left;
width: 20%;
}
#zt-right {
float: right;
width: 25%;
}
#zt-left-inner {
padding: 0 10px;
}
#zt-right-inner {
padding: 0 0 0 10px;
}
#zt-content {
float: left;
width: 55%;
}
#zt-container-left #zt-content {
width: 80%;
}
#zt-container-right #zt-content {
width: 75%;
}
#zt-container-full #zt-content {
width: 100%;
}
#zt-content-inner {
padding: 0 10px 0 0;
}
#zt-container-full #zt-content-inner {
padding: 0;
}
/*****END CONTENT*****/

/*****LEFT RIGHT*****/
#zt-left {
}
#zt-user5 .jvmodule,
#zt-user6 .jvmodule,
#zt-left .jvmodule,
#zt-right .jvmodule {
padding: 0;
}
#zt-user5 .modulecontent,
#zt-user6 .modulecontent {
padding: 8px 0;
overflow: hidden;
}
#zt-left .modulecontent,
#zt-right .modulecontent,
#zt-userwrap3 .modulecontent {
padding: 8px;
overflow: hidden;
}
#zt-user5 h3.moduletitle,
#zt-user6 h3.moduletitle,
#zt-left h3.moduletitle,
#zt-right h3.moduletitle,
#zt-userwrap3 h3.moduletitle {
padding: 0 0 15px 0;
width: 100%;
overflow: hidden;
background: url(../images/bg-moduletitle-pink.png) repeat-x bottom;
}
#zt-user5 h3.moduletitle span,
#zt-user6 h3.moduletitle span,
#zt-left h3.moduletitle span,
#zt-right h3.moduletitle span,
#zt-userwrap3 h3.moduletitle span {
color: #FE4086;
}
#zt-user5 .style1 h3.moduletitle,
#zt-user6 .style1 h3.moduletitle,
#zt-left .style1 h3.moduletitle,
#zt-right .style1 h3.moduletitle,
#zt-userwrap3 .style1 h3.moduletitle {
padding: 7px 0;
width: 100%;
overflow: hidden;
background: url(../images/bg-moduletitle-style1.jpg) repeat-x bottom #F2F2F2;
}
#zt-user5 .style1 h3.moduletitle span,
#zt-user6 .style1 h3.moduletitle span,
#zt-left .style1 h3.moduletitle span,
#zt-right .style1 h3.moduletitle span,
#zt-userwrap3 .style1 h3.moduletitle span {
padding: 0 5px;
}
#zt-left ul.menu,
#zt-right ul.menu {
}
#zt-left ul.menu ul,
#zt-right ul.menu ul {
padding: 0 0 0 15px;
}
#zt-left ul.menu li,
#zt-right ul.menu li {
padding: 0;
background: none;
}
#zt-left ul.menu a,
#zt-right ul.menu a {
padding: 0 0 0 10px;
color: #515151;
}
#zt-left ul.menu li a:hover,
#zt-left ul.menu li a:active,
#zt-left ul.menu li a:focus,
#zt-right ul.menu li a:hover,
#zt-right ul.menu li a:active,
#zt-right ul.menu li a:focus {
color: #FE4086;
text-decoration: none;
background: url(../images/bg-menuactive.png) repeat-y left;
}
#zt-left ul.menu li.active a,
#zt-right ul.menu li.active a {
color: #FE4086;
background: url(../images/bg-menuactive.png) repeat-y left;
}
#zt-left ul.menu ul a,
#zt-right ul.menu ul a,
#zt-left ul.menu li.active ul a,
#zt-right ul.menu li.active ul a {
color: #515151;
background: none;
}

#zt-frame-c {
background: url(../images/bg-frame-c-right.png) repeat-y center;
}
#zt-frame-b {
background: url(../images/bg-frame-b-right.png) no-repeat center bottom;
}
#zt-frame-t {
background: url(../images/bg-frame-t-right.png) no-repeat center top;
}

.frame-full #zt-frame-c,
.frame-left #zt-frame-c {
background: url(../images/bg-frame-c-full.png) repeat-y center;
}
.frame-full #zt-frame-b,
.frame-left #zt-frame-b {
background: url(../images/bg-frame-b-full.png) no-repeat center bottom;
}
.frame-full #zt-frame-t,
.frame-left #zt-frame-t {
background: url(../images/bg-frame-t-full.png) no-repeat center top;
}


/*****END LEFT RIGHT*****/


HELP :zagubiony:

mino
03-04-2011, 11:32
Spróbuj tak:


<!-- CONTAINER -->
<div id="zt-container<?php echo $zt_width; ?>" class="clearfix">

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

<div id="zt-content">
<div id="zt-content-inner">

<?php if($this->countModules('user5')) : ?>
<div id="zt-user5" class="clearfix">
<jdoc:include type="modules" name="user5" style="ztxhtml" />
</div>
<?php endif; ?>

<div id="zt-component" class="clearfix">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>

<?php if($this->countModules('user6')) : ?>
<div id="zt-user6" class="clearfix">
<jdoc:include type="modules" name="user6" style="ztxhtml" />
</div>
<?php endif; ?>

<?php
$spotlight = array ('col1','col2','col3');
$botsl1 = $ztTools->calSpotlight($spotlight,$ztTools->isOP()?100:99,'%');
if( $botsl1 ) :
?>
<div id="zt-col" class="clearfix">

<?php if($this->countModules('col1')) : ?>
<div id="zt-col1" class="zt-user zt-box<?php echo $botsl1['col1']['class']; ?>" style="width: <?php echo $botsl1['col1']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="col1" style="ztxhtml" />
</div>
</div>
<?php endif; ?>

<?php if($this->countModules('col2')) : ?>
<div id="zt-col2" class="zt-user zt-box<?php echo $botsl1['col2']['class']; ?>" style="width: <?php echo $botsl1['col2']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="col2" style="ztxhtml" />
</div>
</div>
<?php endif; ?>

<?php if($this->countModules('col3')) : ?>
<div id="zt-col3" class="zt-user zt-box<?php echo $botsl1['col3']['class']; ?>" style="width: <?php echo $botsl1['col3']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="col3" style="ztxhtml" />
</div>
</div>
<?php endif; ?>

</div>
<?php endif; ?>

</div>
</div>

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

</div>
<!-- END CONTAINER -->