Подскажите как заставить подвал не смещатся вниз

ldrvolga · 23.10.2010, 23:34

Ситуация:
при малом кол-ве контента в основой позиции (contentinside) сайта высокая левая колонка (left) накладывается на подвал (footer)

Вот так:

В связи с этим мучает вопрос:как в данной ситуации заставить footer смещаться вниз на высоту левой позиции
или на высоту contentinside -это смотря какая позиция больше потянет вниз.
Помогите пожалуйста как изменить CSS и Html
Заранее благодарю

Html
CSS

Tuomas · 02.11.2010, 00:06

у меня такая же проблема! плиз напишите ответ!

errante · 02.11.2010, 19:07

Цитата:

Сообщение от ldrvolga


	заставить footer смещаться вниз на высоту левой позиции или на высоту contentinside -это смотря какая позиция больше потянет вниз.

При такой реализации самым простым будет создание общего дива в котором будут находится левая позиция и contentinside.
При изменении любой колонки они будут двигать общий контейнер котороый будет двигать подвал. Т.к. у тебя очень часто используются значения float то у общего контейнера в обязательном порядке должно быть значение float, что необходимо, если неуказать этого значения то внутренние контейнеры будут выходить за границы т.к. у них будет отличаться позиционирование.

ldrvolga · 05.11.2010, 19:18

Errant, дружище!
Не сочти мою просьбу за наглость и, если это тебя конечно не затруднит,
Не мог бы притворить свои рекомендации в моём CSS файле
Буду откровенен: я не знаком с программированием.
А этот шаблон перековырял из готового методом "тыка" и наверное перемудрил...

Буду крайне признателен....

errante · 05.11.2010, 23:00

Цитата:

Сообщение от ldrvolga


	в моём CSS файле

Тебе его нужно полностью переписывать, это во первых
А во вторых, у тебя код на php написан, идут множественные запросы параметров, данных, обработки функций и т.д.
даже если очистить от вставок то ничего не получится, т.к. поплывет дизайн, а править CSS без привязки к дизайну
просто не реально, т.к. не будут видны результаты, кроссбраузерность будет нарушена однозначно.
Самый простой способ, чтобы было визуально видно как взаимодействуют блоки в CSS для любого блока ставь border: 1px solid red; тогда увидишь как блоки реально располагаются между собой, учитывай и тот факт что IE6
позиционирует блоки неправильно, т.к. считает неправильно внутренние отступы.

ldrvolga · 06.11.2010, 12:14

Мдя...вообщем понял, что самый простой и доступный для меня выход из ситуации:
следить за тем, что бы объём контента в основной позиции позволял смещать подвал ниже высоты левой колонки...

EzS · 08.11.2010, 01:15

Для подвала в стили:

clear: left;
clear: both;

Тут больше: http://htmlbook.ru/css/clear

gluglugluglu · 04.05.2011, 11:16

спасибо

KuZyakiev · 07.05.2011, 12:38

<div class="clr"></div>

.clr{ clear:both; height:0; line-height:0; }

revn · 02.04.2014, 11:54

position: absolute;

23.10.2010, 23:34	#1
ldrvolga Пользователь Пол: Регистрация: 01.06.2006 Сообщений: 120 Репутация: 35	Подскажите как заставить подвал смещатся вниз Ситуация: при малом кол-ве контента в основой позиции (contentinside) сайта высокая левая колонка (left) накладывается на подвал (footer) Вот так: В связи с этим мучает вопрос:как в данной ситуации заставить 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; } Последний раз редактировалось ldrvolga; 24.10.2010 в 00:21..

02.11.2010, 00:06	#2
Tuomas Неактивный пользователь Регистрация: 02.11.2010 Сообщений: 4 Репутация: 0	Re: Подскажите как заставить подвал не смещатся вниз у меня такая же проблема! плиз напишите ответ!

05.11.2010, 19:18	#4
ldrvolga Пользователь Пол: Регистрация: 01.06.2006 Сообщений: 120 Репутация: 35	Re: Подскажите как заставить подвал не смещатся вниз Errant, дружище! Не сочти мою просьбу за наглость и, если это тебя конечно не затруднит, Не мог бы притворить свои рекомендации в моём CSS файле Буду откровенен: я не знаком с программированием. А этот шаблон перековырял из готового методом "тыка" и наверное перемудрил... Буду крайне признателен....

06.11.2010, 12:14	#6
ldrvolga Пользователь Пол: Регистрация: 01.06.2006 Сообщений: 120 Репутация: 35	Re: Подскажите как заставить подвал не смещатся вниз Мдя...вообщем понял, что самый простой и доступный для меня выход из ситуации: следить за тем, что бы объём контента в основной позиции позволял смещать подвал ниже высоты левой колонки...

08.11.2010, 01:15	#7
EzS Неактивный пользователь Пол: Регистрация: 17.10.2007 Сообщений: 4 Репутация: 1	Re: Подскажите как заставить подвал не смещатся вниз Для подвала в стили: clear: left; clear: both; Тут больше: http://htmlbook.ru/css/clear

04.05.2011, 11:16	#8
gluglugluglu Пользователь Пол: Регистрация: 03.12.2005 Сообщений: 30 Репутация: 205	Re: Подскажите как заставить подвал не смещатся вниз спасибо

07.05.2011, 12:38	#9
KuZyakiev Неактивный пользователь Пол: Регистрация: 02.06.2007 Сообщений: 11 Репутация: 0	Re: Подскажите как заставить подвал не смещатся вниз <div class="clr"></div> .clr{ clear:both; height:0; line-height:0; }

02.04.2014, 11:54	#10
revn Неактивный пользователь Пол: Регистрация: 02.04.2014 Сообщений: 5 Репутация: 0	Re: Подскажите как заставить подвал не смещатся вниз position: absolute;

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Не Смотри Вниз / Don't Look Down / No mires para abajo (2008)	vinalord	Фильмы	2	24.05.2014 11:50
Видеокарта устанавливается вниз радиатором. Кто в лыжах?	Линник	Компьютерные проблемы	10	14.03.2009 14:23
Подвал в многоквартирном доме в собственность?	thankyou	Жилищное законодательство	2	14.10.2008 10:49
сериал- Смотрящий вниз	sweiger	Сериалы	0	11.08.2005 00:38