4 replies [Last post]
Maverick
Offline
newbie
Scotland
Last seen: 16 years 17 weeks ago
Scotland
Joined: 2004-08-03
Posts: 10
Points: 0

<!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">
/* 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: 410px; width: 820px; background: url(images/background1.gif); /*border: 1px solid #bf9960;*/ z-index: 1;}
html>#container { width: 800px;}

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

#side2 { position: absolute; top: 220px; left: 50%; margin-left: -369px; height: 150px; width: 150px; padding: 5px; border: 1px solid #999; background-color: #ccc; z-index: 0; overflow: auto; voice-family: "\"}\""; voice-family: inherit;}
html>#side2  { width: 150px; height: 150px;}

#content { position: absolute; top: 70px; left: 50%; margin-left: -210px; height: 300px; width: 430px; background-color: #ccc; border: 1px solid #999; z-index: 0; overflow: auto; voice-family: "\"}\""; voice-family: inherit;}
html>#content {width: 430px; height: 300px;}

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

/* 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>
</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="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="side">
all your side information are belong to us
</div>

<div id="side2">
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><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>

this is the code im using to create my page

however i want to add a footer to the page in order to add a few extra links and other things. all i have tried has messed up so any help would be really appreciative

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Footer help

I've said it before, I'll say it again:

#footer {
clear: all;
position: relative;
bottom: 0;
width: 100%;
}

You may have to experiment with either relative or absolute to get it to work properly.

Verschwindende wrote:
  • CSS doesn't make pies

Maverick
Offline
newbie
Scotland
Last seen: 16 years 17 weeks ago
Scotland
Joined: 2004-08-03
Posts: 10
Points: 0

^.^

ok Thanks

Its just that im relatively new to the CSS technology for page creation I will see what happens when I apply this....

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 45 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Footer help

Because all your divs are position:absolute; you will have to style your footer in the same way.

add a new style :

#foot {position:absolute; bottom:0;left:0; width:100%; height:50px; background:#c00;}

and change the conttainer style height to height: 460px;

Then in your html add the line ~

<div id="container">
<div id="foot">This is the footer</div>
<div id="content">

This puts the footer at the bottom of the container. Change size as required.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

Maverick
Offline
newbie
Scotland
Last seen: 16 years 17 weeks ago
Scotland
Joined: 2004-08-03
Posts: 10
Points: 0

oO

muchos gracias senior!

hehe well am trying this out also seeing what my results will be will report back asap

edit: ok it works cool fo shizzle...

all my 5 r belong to this Laughing out loud \:D/