| ldrvolga |
23.10.2010 23:34 |
Подскажите как заставить подвал смещатся вниз
Ситуация:
при малом кол-ве контента в основой позиции (contentinside) сайта высокая левая колонка (left) накладывается на подвал (footer) :(
Вот так:
http://www.ipicture.ru/uploads/101024/EW2T6m33w3.png
В связи с этим мучает вопрос:как в данной ситуации заставить footer смещаться вниз на высоту левой позиции
или на высоту contentinside -это смотря какая позиция больше потянет вниз.
Помогите пожалуйста как изменить CSS и Html
Заранее благодарю
Html<head>
<?php if ($my->id) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html; charset=ISO"/>
<?php mosShowHead(); ?>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/prototype.lite.js"></script>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/moo.fx.js"></script>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/moo.fx.pack.js"></script>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/textresizer.js"></script>
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div id="entire">
<div id="header">
<div class="topline">
<div id="pathway"> <?php echo $GLOBALS['mosConfig_sitename'];?> </div>
<div id="resizer">
<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
<img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/aplus.gif" alt="" border="0" />
</a>
<a href="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
<img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/aminus.gif" alt="" border="0" />
</a>
<a href="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
<img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/areset.gif" alt="" border="0" />
</a>
</div>
</div>
<div class="headerbg">
<div class="headerbgsite">
<a href="<?php echo $mosConfig_live_site;?>">
<img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/logo.gif" name="apollonogo" alt="apollonlogo" align="middle" border="0"/> </a>
<br />
<?php echo $mosConfig_sitename; ?>
</div>
<?php if (mosCountModules('banner')) { ?>
<div class="headerbgbanner">
<?php mosLoadModules('banner',-1);?>
</div>
<?php } ?>
</div>
<div class="bottomline">
<?php if (mosCountModules('user3')) {?>
<div class="topmenubox">
<?php mosLoadModules('user3',-1);?>
</div>
<?php } if (mosCountModules('user4')) {?>
<div class="searchbox">
<?php mosLoadModules('user4',-1);?>
</div>
<?php } ?>
</div>
</div>
<div id="contentouter">
<div id="contentext">
<div id="contentspace">
</div><!--end of content space;-->
<div id="content">
<div id="user1user2">
<?php
if ((mosCountModules( 'user1' )) && (mosCountModules( 'user2' ))) {
$usera = 'user1';
$userb = 'user2';
}
else if ((mosCountModules( 'user1' )) || (mosCountModules( 'user2' ))) {
$usera = 'userx';
$userb = 'userx';
}
if (mosCountModules( "user1" )) { ?>
<div id="<?php echo $usera; ?>">
<div class="box">
<div class="bi">
<div class="bt">
<div>
</div>
</div>
<!--content goes here -->
<?php mosLoadModules ( 'user1',-2); ?>
<!--content -->
<div class="bb">
<div>
</div>
</div>
</div>
</div><!--end of box-->
</div><!--end of user1-->
<?php }
if (mosCountModules( "user2" )) { ?>
<div id="<?php echo $userb; ?>">
<div class="box">
<div class="bi">
<div class="bt">
<div>
</div>
</div>
<!--content goes here -->
<?php mosLoadModules ( 'user2',-2); ?>
<!--content -->
<div class="bb">
<div>
</div>
</div>
</div>
</div><!--end of box-->
</div><!--end of user2-->
<?php } ?>
</div> <!--end of user1user2-->
<div class="contentinside">
<?php mosLoadModules('top',-2);?>
<?php mosMainBody(); ?>
</div>
<div id="user5user6">
<?php
if ((mosCountModules( 'user5' )) && (mosCountModules( 'user6' ))) {
$userc = 'user5';
$userd = 'user6';
}
else if ((mosCountModules( 'user5' )) || (mosCountModules( 'user6' ))) {
$userc = 'userz';
$userd = 'userz';
}
if (mosCountModules( "user5" )) { ?>
<div id="<?php echo $userc; ?>">
<div class="box">
<div class="bi">
<div class="bt">
<div>
</div>
</div>
<!--content goes here -->
<?php mosLoadModules ( 'user5',-2); ?>
<!--content -->
<div class="bb">
<div>
</div>
</div>
</div>
</div><!--end of box-->
</div><!--end of user5-->
<?php }
if (mosCountModules( "user6" )) { ?>
<div id="<?php echo $userd; ?>">
<div class="box">
<div class="bi">
<div class="bt">
<div>
</div>
</div>
<!--content goes here -->
<?php mosLoadModules ( 'user6',-2); ?>
<!--content -->
<div class="bb">
<div>
</div>
</div>
</div>
</div><!--end of box-->
</div><!--end of user6-->
<?php } ?>
</div> <!--end of user5user6-->
</div> <!--end of content-->
</div><!--end contentext-->
<div id="leftbar">
<?php mosLoadModules('left',-2);?>
<?php mosLoadModules('right',-2);?>
</div> <!--end of leftbar-->
</div><!--end of contentouter-->
<div id="footer">
<div class="topfooter">
</div>
<div id="footerleft">
<div class="poweredby">
<a href="http://www.joostina.ru/">Сайт работает под управлением CMS Joostina <img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/joostina_mini.png" alt="joomla" border="0" /></a>
</div>
<div class="siteinfo">
Copyright © <?php echo mosCurrentDate( '%Y' ) . ' ' . $GLOBALS['mosConfig_sitename'];?>
</div>
</div>
<div id="designedby">
<img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/nizAR.png" </a>
</div>
<div class="downfooter">
</div>
</div>
</div><!--end of entire-->
<script type="text/javascript">
var myDivs = document.getElementsByClassName('stretcher');
var myLinks = document.getElementsByClassName('stretchtoggle');
var myAccordion = new fx.Accordion(myLinks, myDivs,{opacity: true});
</script>
</body>
</html>
CSS@import "menu.css";
body {
margin:0px;
height:100%;
line-height:160%;
font:76% Tahoma,Verdana,Arial Helvetica, sans-serif;
}
#entire {
width:100%;
margin:0 auto;
}
#header {
width:100%;
color:#fff;
overflow:hidden;
}
#header .topline {
background:url(../images/topline.gif) repeat-x ;
width:100%;
height:30px;
}
#pathway {
float:left;
margin:10px 0 0 4%;
padding:0;
width:70%;
}
.pathway{
line-height:30px;
color:#fff;
text-decoration:none;
}
#resizer {
width:15%;
text-align:right;
float:right;
overflow:hidden;
height:30px;
margin:0% 4% 0% 0%;
line-height:30px;
}
#resizer img {
display:inline;
vertical-align:middle;
}
#resizer a {
text-decoration:none;
}
#header .headerbg {
background:url(../images/header.gif) repeat-x ;
height:300px;
width:100%;
}
.headerbgsite {
float:left;
width:40%;
margin:0% 0% 0% 1%;
height:300px;
font-size:2em;
text-align:center;
overflow:hidden;
}
.headerbgsite img{
margin-top:15px;
text-align:center;
margin-bottom:5px;
}
.headerbgbanner {
float:top;
width:700;
margin:0% 0% 0% 0%;
padding:0;
height:300px;
text-align:center;
overflow:hidden;
}
.headerbgbanner img {
margin-top:1.5em;
}
#header .bottomline {
width:100%;
background:url(../images/bottomline.gif) repeat-x ;
height:30px;
line-height:30px;
}
.topmenubox {
width:75%;
float:left;
margin:0% 0% 5px 4%;
padding:0;
line-height:30px;
}
.searchbox {
width:10%;
float:right;
margin:0% 4% 0% 0%;
padding:0px;
height:30px;
line-height:30px;
background:url(../images/search.gif) no-repeat 0%;
}
.searchbox .inputbox{
width:100%;
display:inline;
border:none;
background:url(../images/search.gif) no-repeat 100%;
height:30px;
font:1em Tahoma,Verdana,Arial Helvetica, sans-serif;
text-align:center;
line-height:30px;
margin:0;
color:#fff;
}
ul#mainlevel-nav {
float:left;
width:80%;
margin:0;
padding:0;
height:25px;
}
ul#mainlevel-nav li {
list-style: none;
float:left;
display:block;
line-height:30px;
}
ul#mainlevel-nav li a {
background:url(../images/split.gif) no-repeat 100%;
font-weight:bold;
padding:0 10px 0 10px;
display:block;
color:#fff;
text-decoration:none;
list-style: none;
}
ul#mainlevel-nav li a:hover {
background:#006699;
list-style: none;
}
#contentouter {
clear:both;
width:80%;
width:86%;
margin:0 auto ;
}
#contentext {
width:83%;
float:right;
}
#contentspace {
width:2%;
float:left;
}
#content{
float:right;
width:98%;
margin:0em auto 3em ;
background:url(../images/leftsep.gif) 0% 0% repeat-y;
padding-left:2%;
}
.contentinside {
width:100%;
clear:both;
}
.contentinside ul {
margin:0;
padding:0;
}
.contentinside ul li {
list-style:none;
}
#user1 ul li,#user2 ul li,#user5 ul li,#user6 ul li,#userx ul li,#userz ul li {
list-style:none;
margin:0px;
padding:0px;
}
.contentinside ul li a{
color:#006699;
font-weight:bold;
text-decoration:none;
padding:0em 0em 0em 1em;
background:url(../images/alink.gif) left no-repeat;
}
.contentinside a{
color:#006699;
font-weight:bold;
text-decoration:none;
}
#user1user2{
width:100%;
clear:both;
margin:0em auto 1em;
}
#user1 ,#user5 {
float:left;
width:48%;
margin:0px auto;
min-width:5em;
color:#000;
}
#user1 .box,#user6 .box ,#userx .box {
padding:0 10px 0 0;
height:100%;
background:#fff url(../images/box_2.gif) 100% 0 repeat-y;
}
#user1 .bi, #user6 .bi, #userx .bi{
padding:0 0 0 10px;
background: url(../images/box_1.gif) 0 0 repeat-y;
}
#user1 .bt ,#user6 .bt,#userx .bt{
height:20px;
margin:0 -10px;
background:url(../images/box_bg.gif) 100% 0 no-repeat;
}
#user1 .bt div,#user6 .bt div ,#userx .bt div{
width:20px;
height:20px;
background: url(../images/box_bg.gif) 0 0 no-repeat;
}
#user1 .bi .moduletable,#user6 .bi .moduletable ,#userx .bi .moduletable{
background:#006699;
padding:1px 0 1px 0;
color:#fff;
text-align:center;
}
#user1 .bi .moduletable a ,#user6 .bi .moduletable a,#userx .bi .moduletable a{
color:#fff;
text-decoration:none;
}
#user1 .bi .moduletable h3 ,#user6 .bi .moduletable h3,#userx .bi .moduletable h3{
}
#user1 .bb ,#user6 .bb,#userx .bb{
height:20px;
margin:0 -10px;
background:url(../images/box_bg.gif) 100% 100% no-repeat;
}
#user1 .bb div ,#user6 .bb div,#userx .bb div{
width:20px;
height:20px;
background: url(../images/box_bg.gif) 0 100% no-repeat;
}
#user2,#user6 {
float:right;
width:48%;
margin:0px auto;
min-width:5em;
color:#000;
}
#user2 .box,#user5 .box ,#userz .box{
padding:0 10px 0 0;
background:#fff url(../images/box_2.gif) 100% 0 repeat-y;
height:100%;
}
#user2 .bi, #user5 .bi ,#userz .bi{
padding:0 0 0 10px;
background: url(../images/box_1.gif) 0 0 repeat-y;
}
#user2 .bt ,#user5 .bt,#userz .bt{
height:20px;
margin:0 -10px;
background:url(../images/box_black.gif) 100% 0 no-repeat;
}
#user2 .bt div,#user5 .bt div ,#userz .bt div{
width:20px;
height:20px;
background: url(../images/box_black.gif) 0 0 no-repeat;
}
#user2 .bi .moduletable,#user5 .bi .moduletable ,#userz .bi .moduletable {
background:#323230;
padding:1px 0 1px 0;
color:#fff;
text-align:center;
}
#user2 .bi .moduletable a ,#user5 .bi .moduletable a ,#userz .bi .moduletable a{
color:#fff;
text-decoration:none;
}
#user2 .bi .moduletable h3 ,#user5 .bi .moduletable h3, #userz .bi .moduletable h3{
}
#user2 .bb ,#user5 .bb, #userz .bb{
height:20px;
margin:0 -10px;
background:url(../images/box_black.gif) 100% 100% no-repeat;
}
#user2 .bb div ,#user5 .bb div,#userz .bb div{
width:20px;
height:20px;
background: url(../images/box_black.gif) 0 100% no-repeat;
}
#userx,#userz {
width:100%;
}
#user5user6{
clear:both;
width:100%;
}
#leftbar {
position:absolute;
line-height: 100%;
/*background:url(../images/leftsep.gif) 100% 0 repeat-y;*/
overflow: hidden;
left:10px;
top: 380px;
width:20%;
float: left;
z-index:1;
}
#leftbar h3 {
color:#006699;
}
a.mainlevel,.loginpos td a,a.readon{
color:#343434;
text-decoration:none;
padding-left:15px;
background:url(../images/alink.gif) left no-repeat;
}
#dropdown h3 a {
color:#006699;
text-decoration:none;
padding-left:15px;
background:url(../images/hlink.gif) left no-repeat;
}
a.mainlevel:hover,.loginpos td a:hover,a.readon:hover{
color:#006699;
background:url(../images/hlink.gif) left no-repeat;
}
#active_menu{
color:#000;
font-weight:bold;
}
.contentinside h3,.contentinside .contentheading,.contentinside strong,.contentinside .componentheading {
color:#006699;
font-size:100%;
font-weight:bold;
}
.small,.createdate,.modifydate {
color:#484848;
}
#footer {
clear:both;
width:100%;
margin:3em 0;
background:#323331;
color:#fff;
}
#footer a,#designedby a {
color:#919194;
text-decoration:none;
}
.topfooter {
clear:both;
width:100%;
height:30px;
background:url(../images/bottomline.gif) top repeat-x;
border-top:4px solid #006699;
}
.downfooter {
clear:both;
width:100%;
height:30px;
border-bottom:4px solid #006699;
background:url(../images/topline.gif) bottom repeat-x;
}
#footerleft {
width:60%;
float:left;
}
.poweredby {
color:#919194;
font-size:10px;
float:left;
width:17%;
text-align:left;
margin:0 0 0 1%;
}
.poweredby img {
vertical-align:middle;
}
.siteinfo {
float:right;
width:70%;
text-align:right;
line-height:25px;
}
#designedby {
line-height:25px;
font-size:10px;
text-align:right;
width:38%;
margin:0 1% 0 0;
float:right;
}
#designedby img{
vertical-align:middle;
padding:0 0 0 3px;
}
.pollstableborder {
text-align:left;
}
|