Thu, 2004-08-05 14:34
:-k
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">
<html>
<head>
<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;}
</style>
<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() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<link href="css/nr.css" rel="stylesheet" type="text/css">
</head>
<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â¦
Dead.
â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.
</p>
<p>boo./..piugjg</p>
</div>
<div id="newsbyte">
all your side information are belong to us
</div>
<div id="ads">
<p>advertisement area</p>
<p>advertisement area</p>
<p>advertisement area</p>
<p>advertisement area</p>
<p>advertisement area</p>
</div>
<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>
<ul>
<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>
</ul>
</li>
<li><a href="#" id="webSiteDevelopment" alt="Web Services">Web Services</a>
<ul>
<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>
</ul>
</li>
<li><a href="#" id="orderYourSite" alt="Order Your Site Online">Ordering</a>
<ul>
<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>
</ul>
</li>
<li><a href="#" id="ITtraining" alt="IT Training">IT Training</a>
<ul>
<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>
</ul>
</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>
<ul>
<li><a href="sales.htm" id="salesCareers">Sales</a></li>
<li><a href="web.htm" id="webDesignCareers">Web Design </a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
the last help was a great one the footer command works...i just need my container to streach with the content box
Thu, 2004-08-05 14:50
#1
Urgh...another CSS problem
Not quite so easy 
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.
Thu, 2004-08-05 14:52
#2
O.O
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