2 replies [Last post]
Last seen: 18 years 27 weeks ago
Joined: 2004-08-03
Posts: 10
Points: 0


well this time i got everythign else working but....my content spills out of my container area....

i need something to make sure my content stays in the container area and both streach when the text is entered

once again here is my Code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>SLSUK dot com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
/* Big shout out to the following peepz for their help in generating this CSS monster:
Rob Chandanais @ bluerobot.com for the layout ideas - http://www.bluerobot.com
the article posters at ALA - http://www.alistapart.com
the dudes and dudettes at glish - http://glish.com/css
and an UBER shout out to the guys at - http://www.csscreator.com */

/* begin vertical stack css format */
body { font-family: verdana; font-size: 10px; }
a:hover {font-family: verdana; font-style: normal; /*background-color: #999;*/ background: url(images/pipover.gif); text-decoration: none;}
a:active {font-family: Verdana; color: #777; text-decoration: none;}

/* Begin Text Link formatting */
a:hover.dark { font-family: verdana; font-style: normal; color: #fff; text-decoration: none;}
a:active.dark {font-family: verdana; color: #777; text-decoration: none;}

/* logo header */
#logo { position: absolute; top: 5px; left: 50%; margin-left: -375px;}
html>#logo { top: 5px:}

/* decorations - background stripe */
#bgstripe { position: absolute; top: 25%; height: 37px; left: 0; width: 100%; background-image: url(images/strip.gif);}

/* menu div area */
#container { position: absolute; top: 85px; left: 50%; margin-left: -400px; height: 460px; width: 820px; background: url(images/background1.gif); background-repeat: no-repeat;/*border: 1px solid #bf9960;*/ z-index: 1;}
html>#container { width: 800px; height: 460px;}

#newsbyte{ position: absolute; top: 70px; left: 50%; margin-left: 70px; height: 140px; width: 150px; padding: 5px; border-right: 2px dashed #999; background-color: #ff9900; z-index: 0; overflow: auto; voice-family: "\"}\""; voice-family: inherit;}
html>#side  { width: 150px; height: 140px;}

#content { position: absolute; top: 70px; left: 50%; margin-left: -369px; height: 300px; width: 430px; background-color: #ff9900; border-right: 2px dashed #999; z-index: 0; /*overflow: auto;*/ voice-family: "\"}\""; voice-family: inherit;}
html>#content {width: 430px; height: 300px;}

#ads { padding: 5px; position: absolute; top: 70px; right: 50%; margin-right: -380; height: auto; width: 150px; background-color: #FF9900; border: 1px dashed #ccc; z-index: 0; voice-family: "\"}\""; voice-family: inherit;}
html>#ads { width: 200px; height: auto;}

/* thanks to Stu the Guru at csscreator.com forums for help - cheers bud*/
#foot {position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; border-top: 2px dashed #ccc; background:#fff;} 
html>#foot { width: 100%; bottom: 0; height: 50px;} 

/* secondary css menu style for DHTML menus */

/* 1st level listings */
ul { margin: 0px; list-style: none; }
li { float: left; /**/ position: relative; width: 95px; background: url(images/pipline.gif); /*background: #bfa260;*/ padding: 0px; /*border: 1px solid #bfa260;*/ left: 40px;}
/* 2nd level listings */
li ul {  display: none; position: absolute; top: 22px; left: -40px; width: 100px; display: none;}
ul li a { display: block; text-decoration: none; color: #fff; background: url(images/pipline.gif); /*background: #bfa260;*/ padding: 5px;}
li>ul { top: auto; left: auto;}
/* display menus */
li:hover ul, li.over ul {display: block;}

<script language="JavaScript" type="text/javascript">

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  node.onmouseout=function() {
	(" over", "");

<link href="css/nr.css" rel="stylesheet" type="text/css">

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="logo"><a href="index.htm"><img border=0 src="images/logo.gif" id="SLSlogo" alt="Smart Learning Solutions"></a></div>
<div id="bgstripe"></div>
<div id="container">
<div id="foot"><center>ziz iz der footer</center></div>
<div id="content">
<p>Protoman stared at the massive gorge in the ground, and gave a low whistle. It was huge, long, and very, very deep…

…and it hadn’t been here yesterday.

Protoman started walking down the narrow slope, marveling at just how deep it got. Whatever did this had landed fast and hard.

He’d hate to be the one who fell.

Proto looked around again, and saw something interesting buried in the dirt. Squatting down, he picked up a shiny piece of scrap metal, and saw it was bright red. Curious, Protoman continued walking down the slope, and found more and more bits of shiny red metal and thin, sparking wires still connected to small gadgets he recognized from stolen schematics…

This was once Rush.

“Where Rush is, Mega Man is,” said Proto aloud, and walked down into the deepest, widest part of the hole.

There he saw a blue boot buried in the debris.

Protoman swore to himself and started digging. He soon uncovered more and more of what he assumed was Mega—there wasn’t much to base it on. Though the right side of Mega’s body was pretty much intact, the left side looked like it had landed in the trash compacter and gone around for a few rounds. His left arm was half torn off, and his left leg was even worse. The only thing that had saved his head was his helmet, and it was torn in half as well, letting the boy’s brown hair spill wildly over his closed eyes and scratched face.

Protoman simply squatted there for a moment, too shocked to take it all in. By all rights, his brother ought to be…


“G…great…” he whispered to himself, still watching the few sparking wires glowing in Mega’s left arm. “He’s destroyed…nothing could…”

I should be happy! he growled to himself. He’s—he won’t—there’s nothing to…

Suddenly, Mega moaned. It was a soft, barely perceptible moan; anyone who wasn’t paying close attention wouldn’t have heard it.

Protoman heard it.

“So…you’re alive. Great…now I can destroy you myself…”

Protoman stared at the face so similar to his own, and the incredible pain it showed.

“I’ll—destroy you properly,” he said, though he knew Mega wouldn’t hear. “It wouldn’t be worth it to hit you when you’re down—I’ll do it in battle, the way it ought to be done.”

He stared at the motionless body once more. Then he carefully gathered Mega Man into his arms, making sure there would be no more damage to the mangled body.

“This is just so I can fight you later, Mega Man. Don’t think I’m going mushy on you—I’m just going to destroy you properly. I’m the only one who’s allowed to, not some stupid fall. Guess that dumb dog of yours broke. Just remember—I am not doing this just because you’re my brother.”

Still holding Mega very, very carefully, Protoman got on his hoverbike and rode to Skull Castle.


<div id="newsbyte">
all your side information are belong to us

<div id="ads">
<p>advertisement area</p>
<p>advertisement area</p>
<p>advertisement area</p>
<p>advertisement area</p>
<p>advertisement area</p>

  <ul id="nav">
    <li><a href="index.htm" id="homepage" alt="Homepage">Home</a></li>
    <li><a href="#" id="aboutTheCompany" alt="About The Company">About</a> 
        <li><a href="about.htm" id="aboutUs">About Us</a></li>
        <li><a href="contact.htm" id="contactUs">Contact</a></li>
        <li><a href="find.htm" id="locateUs">Find Us</a></li>
		<li><a href="message.htm" id="Message">The M.D.</a></li>
    <li><a href="#" id="webSiteDevelopment" alt="Web Services">Web Services</a> 
        <li><a href="design.htm" id="webSiteDesign">Web Design</a></li>
        <li><a href="hosting.htm" id="webSiteHosting">Web Hosting</a></li>
        <li><a href="domain.htm" id="webSiteDomains">Web Domains</a></li>
        <li><a href="portfolio.htm" id="ourPortFolio">Portfolio</a></li>
    <li><a href="#" id="orderYourSite" alt="Order Your Site Online">Ordering</a> 
        <li><a href="place_order.htm" id="placeAnOrder">Place Order</a></li>
        <li><a href="standing_order.htm" id="yourStandingOrder">Standing Order</a></li>
        <li><a href="site_info.htm" id="yourSiteInformation">Site Info</a></li>
    <li><a href="#" id="ITtraining" alt="IT Training">IT Training</a> 
        <li><a href="schedule.htm" id="trainingSchedule">Schedules</a></li>
        <li><a href="facilities.htm" id="trainingFacilities">Facilities</a></li>
        <li><a href="onsite.htm" id="onSiteTraining">On Site</a></li>
        <li><a href="courses.htm" id="coursesAvailable">Courses</a></li>
	<li><a href="development.htm" id="Development" alt="Software Development">Development</a></li>
	<li><a href="consultancy.htm" id="Consultancy" alt="IT Consultancy">Consultancy</a></li>
    <li class="norepeat"><a href="#" id="careersWithTheCompany" alt="Careers">Careers</a> 
        <li><a href="sales.htm" id="salesCareers">Sales</a></li>
        <li><a href="web.htm" id="webDesignCareers">Web Design </a></li>

the last help was a great one the footer command works...i just need my container to streach with the content box

Stu's picture
Bristol uk
Last seen: 19 years 2 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Urgh...another CSS problem

Not quite so easy Smile

Because you are using absolute positioning it is not possible to place a footer at the bottom of a variable height div.
The absolute positioning takes the div out of the natural flow of the page and it is not possible (without javascript) to calculate the position of the footer.

The only suggestion is to start again using floats to position the divs and then you can place a footer with no problem at all.

It's not what you do it's the way that you do it.
So do it with STYLE

Last seen: 18 years 27 weeks ago
Joined: 2004-08-03
Posts: 10
Points: 0


that really throws the spanner in the works now..

deadlines tomorrow and i guess the javascript could be the easy bit my colleague is a code wizard but what would the float alternative code look like?

Im using IE here to assemble it and i slap in the hacks to make it cross compat with other browsers