Форум

AnToxa · #1 (**permalink**) 30.08.2011, 21:42

Приветствую! Скачал я шаблон для Joomla и вот какая проблема:
При отображении контента в mainbody его закрывает footer. Вот пример:

Ну т.е. контент еще не закончился а на него сверху лег футер.
Вот что мне в общем пишет FireBug:

Код:

<div id="mega_hmainbody" class="mega_mainbody" style="height: 558px; width: 1007px">
<div id="mega_hfooter" class="mega_footer" style="height: 558px; top: 558px; width: 1007px">

Т.е. высота у них фиксированная. Пытался подправить CSS, но ничего не вышло, так как высота шаблона устанавливается JS скриптом.
У меня вопрос, что сделать чтобы footer наконец таки съехал вниз? И не просто съехал на определенное расстояние (до этого я дошел своим, так сказать умом), а съезжал каждый раз по разному (по содержимому) т.е. фиксировался сразу после того как заканчивается содержимое...
Прошу помочь!

AnToxa · #2 (**permalink**) 30.08.2011, 21:42

Вот JS файл с настройками высоты шаблона:

function equalSize(){
	//get Height of page
	var winW = 0, winH = 0;
	if (document.body && document.body.offsetWidth){
		winW = document.body.offsetWidth;
		winH = document.body.offsetHeight;
	}
	if (document.compatMode=='CSS1Compat' &&
		document.documentElement &&
		document.documentElement.offsetWidth ) {
			winW = document.documentElement.offsetWidth;
			winH = document.documentElement.offsetHeight;
	}
	if (window.innerWidth && window.innerHeight) {
		winW = window.innerWidth;
		winH = window.innerHeight;
	}
	
	//...
	var wbody = document.getElementById('mega_body').offsetWidth - 17 ; 
	document.getElementById('mega_wwrapper').style.width = wbody + 'px';
	
	if(document.getElementById('mega_hbanner') != null){
		document.getElement('.mega_banner_w').style.width = wbody -460 + 'px';
	}
	if(document.getElementById('mega_extend1_w') != null){
		document.getElementById('mega_extend1_w').style.width = wbody -460 + 'px';
	}
	if(document.getElementById('mega_extend2_w') != null){
		document.getElementById('mega_extend2_w').style.width = wbody -460 + 'px';
	}
	document.getElement('.mega_mainbody_w').style.width = wbody -460 + 'px';
	document.getElement('.mega_footer_w').style.width = wbody -460 + 'px';
	
	if((document.getElementById('mega_hbanner') != null) && (document.getElementById('mega_hextend1') != null) && (document.getElementById('mega_hextend2') != null)){
		//Extend1
		document.getElementById('mega_hextend1').style.height = winH + 80 + 'px';
		document.getElementById('mega_hextend1').style.top = winH + 80 + 'px';
		
		//Extend2
		document.getElementById('mega_hextend2').style.height = winH + 80 + 'px';
		document.getElementById('mega_hextend2').style.top = winH*2 + 160 + 'px';
		
		//Main body
		document.getElementById('mega_hmainbody').style.height = winH + 80 + 'px';
		document.getElementById('mega_hmainbody').style.top = winH*3 + 240 + 'px';
		
		//Footer
		document.getElementById('mega_hfooter').style.height = winH + 80 + 'px';
		document.getElementById('mega_hfooter').style.top = winH*4 + 320 + 'px';
		
		document.getElementById('mega_top_onclick').style.bottom = 0 + 'px';
		//Set width
		document.getElementById('mega_hextend1').style.width = wbody + 'px';
		document.getElementById('mega_hextend2').style.width = wbody + 'px';
		document.getElementById('mega_hmainbody').style.width = wbody + 'px';
		document.getElementById('mega_hfooter').style.width = wbody + 'px';
		
		document.getElementById('mega_wwrapper').style.height = winH*5 + 320 + 73 + 'px';
		
	}else if((document.getElementById('mega_hbanner') != null) && (document.getElementById('mega_hextend1') != null) && (document.getElementById('mega_hextend2') == null)){
		
		//Extend1
		document.getElementById('mega_hextend1').style.height = winH + 80 + 'px';
		document.getElementById('mega_hextend1').style.top = winH + 80 + 'px';
		
		//Main body
		document.getElementById('mega_hmainbody').style.height = winH + 80 + 'px';
		document.getElementById('mega_hmainbody').style.top = winH*2 + 160 + 'px';
		
		//Footer
		document.getElementById('mega_hfooter').style.height = winH + 80 + 'px';
		document.getElementById('mega_hfooter').style.top = winH*3 + 240 + 'px';
		
		document.getElementById('mega_top_onclick').style.bottom = 0 + 'px';
		
		//Set width
		document.getElementById('mega_hextend1').style.width = wbody + 'px';
		document.getElementById('mega_hmainbody').style.width = wbody + 'px';
		document.getElementById('mega_hfooter').style.width = wbody + 'px';
		
		document.getElementById('mega_wwrapper').style.height = winH*4 + 240 + 73 + 'px';
		
	}else if((document.getElementById('mega_hbanner') != null) && (document.getElementById('mega_hextend1') == null) && (document.getElementById('mega_hextend2') != null)){
		//Extend2
		document.getElementById('mega_hextend2').style.height = winH + 80 + 'px';
		document.getElementById('mega_hextend2').style.top = winH + 80 + 'px';
		
		//Main body
		document.getElementById('mega_hmainbody').style.height = winH + 80 + 'px';
		document.getElementById('mega_hmainbody').style.top = winH*2 + 160 + 'px';
		
		//Footer
		document.getElementById('mega_hfooter').style.height = winH + 80 + 'px';
		document.getElementById('mega_hfooter').style.top = winH*3 + 240 + 'px';
		
		document.getElementById('mega_top_onclick').style.bottom = 0 + 'px';
		
		//Set width
		document.getElementById('mega_hextend2').style.width = wbody + 'px';
		document.getElementById('mega_hmainbody').style.width = wbody + 'px';
		document.getElementById('mega_hfooter').style.width = wbody + 'px';
		
		document.getElementById('mega_wwrapper').style.height = winH*4 + 240 + 73 + 'px';
		
	}else if((document.getElementById('mega_hbanner') != null) && (document.getElementById('mega_hextend1') == null) && (document.getElementById('mega_hextend2') == null)){
		//Main body
		document.getElementById('mega_hmainbody').style.height = winH + 80 + 'px';
		document.getElementById('mega_hmainbody').style.top = winH + 80 + 'px';
		
		//Footer
		document.getElementById('mega_hfooter').style.height = winH + 80 + 'px';
		document.getElementById('mega_hfooter').style.top = winH*2 + 160 + 'px';
		
		document.getElementById('mega_top_onclick').style.bottom = 0 + 'px';
		
		//Set width
		document.getElementById('mega_hmainbody').style.width = wbody + 'px';
		document.getElementById('mega_hfooter').style.width = wbody + 'px';
		
		document.getElementById('mega_wwrapper').style.height = winH*3 + 160 + 73 + 'px';
		
	}else if((document.getElementById('mega_hbanner') == null) && (document.getElementById('mega_hextend1') != null) && (document.getElementById('mega_hextend2') != null)){
		//Extend2
		document.getElementById('mega_hextend2').style.height = winH + 80 + 'px';
		document.getElementById('mega_hextend2').style.top = winH + 80 + 'px';
		
		//Main body
		document.getElementById('mega_hmainbody').style.height = winH + 80 + 'px';
		document.getElementById('mega_hmainbody').style.top = winH*2 + 160 + 'px';
		
		//Footer
		document.getElementById('mega_hfooter').style.height = winH + 80 + 'px';
		document.getElementById('mega_hfooter').style.top = winH*3 + 240 + 'px';
		
		document.getElementById('mega_top_onclick').style.bottom = 0 + 'px';
		//Set width
		document.getElementById('mega_hextend1').style.width = wbody + 'px';
		document.getElementById('mega_hextend2').style.width = wbody + 'px';
		document.getElementById('mega_hmainbody').style.width = wbody + 'px';
		document.getElementById('mega_hfooter').style.width = wbody + 'px';
		
		document.getElementById('mega_wwrapper').style.height = winH*4+ 240 + 73 + 'px';
		
	}else if((document.getElementById('mega_hbanner') == null) && (document.getElementById('mega_hextend1') == null) && (document.getElementById('mega_hextend2') != null)){
		
		//Main body
		document.getElementById('mega_hmainbody').style.height = winH + 80 + 'px';
		document.getElementById('mega_hmainbody').style.top = winH + 80 + 'px';
		
		//Footer
		document.getElementById('mega_hfooter').style.height = winH + 80 + 'px';
		document.getElementById('mega_hfooter').style.top = winH*2 + 160 + 'px';
		
		document.getElementById('mega_top_onclick').style.bottom = 0 + 'px';
		
		//Set width
		document.getElementById('mega_hmainbody').style.width = wbody + 'px';
		document.getElementById('mega_hfooter').style.width = wbody + 'px';
		
		document.getElementById('mega_wwrapper').style.height = winH*2 + 160 + 73 + 'px';
		
	}else if((document.getElementById('mega_hbanner') == null) && (document.getElementById('mega_hextend1') != null) && (document.getElementById('mega_hextend2') == null)){
		//Main body
		document.getElementById('mega_hmainbody').style.height = winH + 80 + 'px';
		document.getElementById('mega_hmainbody').style.top = winH + 80 + 'px';
		
		//Footer
		document.getElementById('mega_hfooter').style.height = winH + 80 + 'px';
		document.getElementById('mega_hfooter').style.top = winH*2 + 160 + 'px';
		
		document.getElementById('mega_top_onclick').style.bottom = 0 + 'px';
		
		//Set width
		document.getElementById('mega_hmainbody').style.width = wbody + 'px';
		document.getElementById('mega_hfooter').style.width = wbody + 'px';
		
		document.getElementById('mega_wwrapper').style.height = winH*2 + 160 + 73 + 'px';
		
	}else if((document.getElementById('mega_hbanner') == null) && (document.getElementById('mega_hextend1') == null) && (document.getElementById('mega_hextend2') == null)){
		//Main body
		document.getElementById('mega_hmainbody').style.height = winH + 80 + 'px';
		
		//Footer
		document.getElementById('mega_hfooter').style.height = winH + 80 + 'px';
		document.getElementById('mega_hfooter').style.top = winH + 80 + 'px';
		
		document.getElementById('mega_top_onclick').style.bottom = 0 + 'px';
		
		//Set width
		document.getElementById('mega_hmainbody').style.width = wbody + 'px';
		document.getElementById('mega_hfooter').style.width = wbody + 'px';
		
		document.getElementById('mega_wwrapper').style.height = winH*2 + 80 + 73 + 'px';
	}
}
window.addEvent ('load', function() {
	equalSize();
});

Kolyaj · #3 (**permalink**) 30.08.2011, 21:52

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

Вот JS файл с настройками высоты шаблона:

Сделайте мои глаза не видеть это.

abc_ua · #4 (**permalink**) 31.08.2011, 00:31

это ппц, вы думаете кто-то будет читать 200 строк кода? Покажите все стили для этих блоков.

Андрей Параничев · #5 (**permalink**) 31.08.2011, 00:45

Ужас.

AnToxa · #6 (**permalink**) 31.08.2011, 08:08

Вот стили, для блоков.

#mega_hbanner,
#mega_hextend1,
#mega_hextend2,
#mega_hmainbody,
#mega_hfooter{
	position: absolute;
	left: 0;

.mega_wrapper_i,
.mega_banner,
.mega_extend1,
.mega_extend2,
.mega_tops_extend,
.mega_mainbody,
.mega_footer{
	width: 100%;
	float: left;
	
}

ksa · #7 (**permalink**) 31.08.2011, 09:02

AnToxa, от "наездов" футера на контент можно "защититься" например так

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	width: 100%;
	height: 100%;
}
#container {
	position: relative;
	width: 90%;
	min-height: 100%;
	margin-left: auto;
	margin-right: auto;
	background-color: silver;
}
#footer,
#footer_tab {
	height: 100px;
}
#footer_tab {
	clear: both;
}
#footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: orange;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='container'>
	<div id='content'>content</div>
	<div id='footer_tab'></div>
	<div id='footer'>footer</div>
</div>
</body>
</html>

И не нужно никакое вычисление высоты контента скриптом...

AnToxa · #8 (**permalink**) 31.08.2011, 11:02

ksa, не могу реализовать, т.к. в index.php блоки вызываются так:

<?php } ?>
			<div id="mega_hmainbody" class="mega_mainbody">
				<div class="mega_mainbody_w">
					<div class="mega_mainbody_i">
						<div id="mega_fpage" class="mega_frontpage">
							<div class="mega_frontpage_i">
								<jdoc:include type="component" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="mega_hfooter" class="mega_footer">
				<div class="mega_footer_border_top">
					<div class="mega_footer_w">
						<div class="mega_footer_i">
							<jdoc:include type="modules" name="bottom" style="xhtml" />
						</div>
					</div>
				</div>
			</div>

ksa · #9 (**permalink**) 01.09.2011, 09:07

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

в index.php блоки вызываются так

Что мешает добавить дивов?

AnToxa · #10 (**permalink**) 01.09.2011, 10:36

ksa, не могу понять куда.

Форум

Справочник

Discord чат

Курсы javascript