HTML Forum

**James Jobs** · 02-17-2009, 02:03 PM

I am doing this site and there are comments from disqus. When new coments are added it extends the page. But my backgroud does not extend.

The HTML

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Briefings</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<div style="height:800px ; width:806px ; position:relative; float:none; left:0px; top:0px; background-image:url(bg.png); background-repeat:; background-position:; background-color:transparent; opacity:100; filter:alpha(opacity=100); margin:26px auto 0px auto ; " flux:locked="true" > 

<div id="tbar"> </div>

<div id="logo" onClick="window.location.href = 'http://jamesjobs.co.uk/winheist/'" title="Home"> </div>

<div id="shadow"> </div>

<div id="loot" onClick="window.location.href = 'http://jamesjobs.co.uk/winheist/loot/'" title="Loot"> </div>

<p class="apps">The Source sent us a message <p>    
<p class="text">The Source wrote" %4C%6F%75%69%73%2 0%54%68%65 %20%48%65%69%73%74%2 0%69%73%20%61%62%6 F%75%74%20%74%6F %20%62%65%6 7%69%6E%2E %2E%2E%2E%2E%2E      The clue is a color" </p>
<div id="briefings" onclick="window.location.href = 'http://jamesjobs.co.uk/winheist/briefings/'" title="Briefings"> </div>
<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/winheist/embed.js"></script></noscript><a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
</body>
</html>

The CSS

Code:

#banner {
	background: #ff84ff url(nano1.png) 0;
	height: 350px;
	position: absolute;
	top: 100px;
	width: 780px;
	left: 13px;
}

#briefings {
	height: 75px;
	width: 237px;
	background-image: url(briefings.png);
	z-index: 7;
	position: absolute;
	left: 500px;
	top: 5px;
	
}

#box {
	position: absolute;
	overflow: scroll;
	width: 500px;
	height: 300px;
	top: 500px;
	left: 200px;
	visibility: visible;
}

.apps {
	color: #e6e6e6;
	font: 26px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	position: relative;
	left: 50px;
	top: -50px;
}

#loot {
	height: 75px;
	width: 237px;
	z-index: 6;
	position: relative;
	left: 250px;
	top: -75px;
	background: url(loot.png) no-repeat;
}

#logo {
	height: 75px;
	width: 237px;
	background-image: url(logo.png);
	z-index: 2;
	position: relative;
	left: 12px;
}

h#shadowh {
	width: 856px;
	height: 850px;
	z-index: -1;
	position: relative;
	left: 0;
	right: 0;
	background: url(bg.png) no-repeat -37px;
	display: compact;
	float: none;
	clear: none;
}

#tbar {
	width: 806px;
	height: 75px;
	right: 0;
	position: absolute;
	display: compact;
	float: none;
	clear: none;
	z-index: 0;
	background: #fff7ff url(tbar.png) scroll;
}

body {
	background-image: url(http://www.macheist.com/static/common/tiles.png);
}

.text {
	top: 50px;
	color: #fff;
	font: 20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	padding-right: 50px;
	margin-left: 50px;
}

#disqus_thread {
	color: #fff;
	font: 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	position: relative;
	padding-top: 30px;
	margin-left: 50px;
}

.dsq-brlink {
	position: absolute;
	top: 770px;
	left: 550px;
}

You can see the site at http://jamesjobs.co.uk/winheist/briefings

**LadynRed** · 02-17-2009, 02:24 PM

Get rid of all the position:absolute, it's simply not necessary and pretty much precludes any fluidity for your site.
It's not necessary to define a height for every div, especially if you want it to stretch with content.

If you remove the fixed height on the "flux:locked" div, the bg will extend.

**James Jobs** · 02-17-2009, 02:28 PM

Thanks so much.

**James Jobs** · 02-17-2009, 02:35 PM

Just one thing,

Am I able keep the hight at 800px all the time unless it is longer than that.

Ie: A minimum hight?

**LadynRed** · 02-17-2009, 03:28 PM

You can specify a min-height for all browsers except IE6 and below, which do NOT support min/max width or height. For IE6, you would have to specify a fixed height using a separate stylesheet and conditional comments. IE6 incorrectly 'stretches' beyond a fixed height, so it would still stretch when greater than your min-height.

**James Jobs** · 02-18-2009, 07:10 AM

Thanks

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!