KobaKoba
22 Dec 2008, 11:20 AM
Hey guys.
I'm a student intern and for my job I was requested to design a website for kids. http://www.ecokidsusa.org
As of now, the page only displays properly in internet explorer, so I've been trying to make it compatible in firefox and opera too.
I've managed to fix problems with the side menu and the width of the content box, but I'm having trouble getting the background images to show up in my headers.
It's supposed to look like this (http://img.photobucket.com/albums/v242/amelda_chan/ie.png) , but instead I'm getting this (http://img.photobucket.com/albums/v242/amelda_chan/new.png).
Here's my css
body {
background-color: rgb(126,206,82);
background-image: url(../images/xrepeat.png);
background-repeat: repeat-x;
background-position: top left;
font-family: verdana, arial, helvetica, sans-serif;
color: #ffffff;
font-size: 12px;
}
.h1 {
background-image: url(../images/h1im.gif);
background-repeat: no-repeat;
height: 33px;
width: 255px;
text-align: right;
font-weight: normal;
}
.h2 {
background-image: url(../images/h2im.gif);
background-repeat: no-repeat;
height: 33px;
width: 255px;
text-align: right;
font-weight: normal;
}
.navi {
background-image: url(../images/nav.gif);
background-repeat: no-repeat;
font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 20px;
text-align: center;
width: 230px;
height: 38px;
}
#content{
position: absolute;
top: 260px;
left: 271px;
width: 460px;
background-color: #7a6741;
border: 1px black solid;
padding: 10px;
}
#mainhead{
position:absolute;
top: -20px;
left: -3px;
background-image: url(../images/mainhead.png);
background-repeat: no-repeat;
width: 486px;
height: 25px;
}
#mainfoot{
position: absolute;
bottom:-25px;
left:-3px;
background-image: url(../images/mainfoot.png);
background-repeat: no-repeat;
width:486px;
height:25px;
}
#required{
position: absolute;
bottom: -34px;
width: 236px;
}
#extra01 {
position: absolute;
left: 683px;
top: 231px;
background-image: url(../images/extra01.gif);
background-repeat: no-repeat;
width: 196px;
height: 253px;
}
#extra02 {
position: absolute;
left: 677px;
top: 216px;
background-image: url(../images/extra02.gif);
background-repeat: no-repeat;
width: 215px;
height: 290px;
}
#extra03 {
position: absolute;
left: 704px;
top: 222px;
background-image: url(../images/extra03.gif);
background-repeat: no-repeat;
width: 197px;
height: 342px;
}
#extra04 {
position: absolute;
left: 683px;
top: 233px;
background-image: url(../images/extra04.gif);
background-repeat: no-repeat;
width: 157px;
height: 236px;
}
#extra05 {
position: absolute;
left: 683px;
top: 233px;
background-image: url(../images/extra05.gif);
background-repeat: no-repeat;
width: 157px;
height: 215px;
}
#header {
position:absolute;
left: 0px;
top: 0px;
background-image: url(../images/header.png);
background-repeat: no-repeat;
width: 796px;
height: 251px;
}
#menu {
position: absolute;
top: 250px;
left: 0px;
background-image: url(../images/navhead.png);
height: 70px;
width: 234px;
background-repeat: no-repeat;
background-color: transparent;
}
#menucon {
position: absolute;
top: 70px;
left: 0px;
width: 240px;
height: 233px;
background-image: url(../images/navbg.png);
background-repeat: repeat-y;
background-color: transparent;
}
#menufoot {
position: absolute;
background-image: url(../images/navfoot.png);
background-repeat: no-repeat;
width: 236px;
height: 59px;
top: 267px;
}
a img {
border: none;
}
b {
color: #ccffff
}
a:link, a:visited
{
color: #66ccff;
text-decoration: none;
}
a:hover{
color: #7ece52;
text-decoration: none;
}
li a:hover{
color: #7ece52;
text-decoration: none;
font-weight: bold;
}
a.nav:link, a.nav:visited, a.nav:hover
{
width: 229px;
padding: 5px;
}
And here's the HTML for the index
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>eco*kids: HOME</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="css/ecokids.css" type="text/css">
<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
homebuttonup = new Image();
homebuttonup.src = "images/home.gif" ;
homebuttondown = new Image() ;
homebuttondown.src = "images/home02.gif" ;
learnbuttonup = new Image();
learnbuttonup.src = "images/learn.gif" ;
learnbuttondown = new Image() ;
learnbuttondown.src = "images/learn02.gif" ;
ttalkbuttonup = new Image();
ttalkbuttonup.src = "images/tt.png" ;
ttalkbuttondown = new Image() ;
ttalkbuttondown.src = "images/tt02.png" ;
charabuttonup = new Image();
charabuttonup.src = "images/chara.gif" ;
charabuttondown = new Image() ;
charabuttondown.src = "images/chara02.gif" ;
actbuttonup = new Image();
actbuttonup.src = "images/act.gif" ;
actbuttondown = new Image() ;
actbuttondown.src = "images/act02.gif" ;
corpbuttonup = new Image();
corpbuttonup.src = "images/corp.gif" ;
corpbuttondown = new Image() ;
corpbuttondown.src = "images/corp02.gif" ;
}
function buttondown( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}
}
function buttonup ( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}
}
// -->
</script>
<body>
<div id="content" style="z-index:2;">
<div id="mainhead">
</div>
<span class="h1"><img src="images/welcome.png" alt=""></span>
<br>
<br>
Welcome to Waste Industries' Ecokids USA site.
<br>
<br>
At Waste Industries we are the leading provider of safe, clean, and environmentally sound waste collection and removal services.
<br>
<br>
We are a part of everyday life in the communities we serve and are committed to improving those communities by educating our kids, customers, employees, and the public.
<br>
<br>
Our Ecokids site provides information, activities, and links we believe are especially helpful to kids. Please enjoy our games, pictures, coloring activities, stories, and kids' club membership.
<br>
<br>
<span class="h1"><img src="images/navigation.png" alt=""></span>
<br>
<br>
Find your way around EcoKids by using the navigation bar to the left!
<br>
<br>
At the "<b>Info Bin</b>" there's tons of neat facts to teach you what being one of the Ecokids is all about.
<br>
<br>
The "<b>Ecokids</b>" section is filled with pictures and information about the characters you see all around the site.
<br>
<br>
The "<b>Activities</b>" section is filled with games and crafts to keep you busy for hours.
<br>
<br>
Clicking "<b>Corporate</b>" will open up our corporate Waste Industries webpage in a new window.
<br>
<br>
So follow the leader and <b>have fun</b>!
<div id="mainfoot">
</div>
</div>
<div id="header" style="z-index:1">
</div>
<div id="extra01" style="z-index:3">
</div>
<div id="menu">
<div id="menucon">
<a href="index.html" class="nav"
onmouseover="buttondown('homebutton')"
onmouseout="buttonup('homebutton')"><img src="images/gnav.gif" alt=""> <img src="images/home.gif" alt="" name="homebutton"></a>
<br>
<a href="learn.html" class="nav"
onmouseover="buttondown('learnbutton')"
onmouseout="buttonup('learnbutton')"><img src="images/enav.gif" alt=""> <img src="images/learn.gif" alt="" name="learnbutton"></a>
<br>
<a href="ttalk.html" class="nav"
onmouseover="buttondown('ttalkbutton')"
onmouseout="buttonup('ttalkbutton')">
<img src="images/lnav.gif" alt=""> <img src="images/tt.png" name="ttalkbutton" alt=""></a>
<br>
<a href="chara.html" class="nav"
onmouseover="buttondown('charabutton')"
onmouseout="buttonup('charabutton')"><img src="images/wnav.gif" alt=""> <img src="images/chara.gif" alt="" name="charabutton"></a>
<br>
<a href="activity.html" class="nav"
onmouseover="buttondown('actbutton')"
onmouseout="buttonup('actbutton')"><img src="images/gonav.gif" alt=""> <img src="images/act.gif" alt="" name="actbutton"></a>
<br>
<a href="http://www.wasteindustries.com/" class="nav"
target="_blank"
onmouseover="buttondown('corpbutton')"
onmouseout="buttonup('corpbutton')"><img src="images/wipixel.gif" alt=""> <img src="images/corp.gif" alt="" name="corpbutton"></a>
<!-- If you want more links, edit them here.
Please make sure all links in the toolbar are class=nav and the link text has a space before it to ensure they align correctly.-->
<!-- <a href="" class="nav"
onmouseover="buttondown('x')"
onmouseout="buttonup('x')">
<img src="images/cnav.gif" alt=""> <img src="" name="x"></a> -->
<!-- <a href="" class="nav"
onmouseover="buttondown('y')"
onmouseout="buttonup('y')">
<img src="images/snav.gif" alt=""> <img src="" name="y"></a> -->
<!-- <a href="" class="nav"
onmouseover="buttondown('z')"
onmouseout="buttonup('z')">
<img src="images/tnav.gif" alt=""> <img src="" name="z"></a> -->
</div>
<div id="menufoot">
<div id="required">
<center>
<a href="http://www.wasteindustries.com/Privacy.htm" target="_blank"><img src="images/privacy.png" alt=""></a>
<a href="contact.html"><img src="images/contact.png" alt=""></a>
</center>
</div>
</div>
</div>
</body>
</html>
Any help would be great! Thanks.
I'm a student intern and for my job I was requested to design a website for kids. http://www.ecokidsusa.org
As of now, the page only displays properly in internet explorer, so I've been trying to make it compatible in firefox and opera too.
I've managed to fix problems with the side menu and the width of the content box, but I'm having trouble getting the background images to show up in my headers.
It's supposed to look like this (http://img.photobucket.com/albums/v242/amelda_chan/ie.png) , but instead I'm getting this (http://img.photobucket.com/albums/v242/amelda_chan/new.png).
Here's my css
body {
background-color: rgb(126,206,82);
background-image: url(../images/xrepeat.png);
background-repeat: repeat-x;
background-position: top left;
font-family: verdana, arial, helvetica, sans-serif;
color: #ffffff;
font-size: 12px;
}
.h1 {
background-image: url(../images/h1im.gif);
background-repeat: no-repeat;
height: 33px;
width: 255px;
text-align: right;
font-weight: normal;
}
.h2 {
background-image: url(../images/h2im.gif);
background-repeat: no-repeat;
height: 33px;
width: 255px;
text-align: right;
font-weight: normal;
}
.navi {
background-image: url(../images/nav.gif);
background-repeat: no-repeat;
font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 20px;
text-align: center;
width: 230px;
height: 38px;
}
#content{
position: absolute;
top: 260px;
left: 271px;
width: 460px;
background-color: #7a6741;
border: 1px black solid;
padding: 10px;
}
#mainhead{
position:absolute;
top: -20px;
left: -3px;
background-image: url(../images/mainhead.png);
background-repeat: no-repeat;
width: 486px;
height: 25px;
}
#mainfoot{
position: absolute;
bottom:-25px;
left:-3px;
background-image: url(../images/mainfoot.png);
background-repeat: no-repeat;
width:486px;
height:25px;
}
#required{
position: absolute;
bottom: -34px;
width: 236px;
}
#extra01 {
position: absolute;
left: 683px;
top: 231px;
background-image: url(../images/extra01.gif);
background-repeat: no-repeat;
width: 196px;
height: 253px;
}
#extra02 {
position: absolute;
left: 677px;
top: 216px;
background-image: url(../images/extra02.gif);
background-repeat: no-repeat;
width: 215px;
height: 290px;
}
#extra03 {
position: absolute;
left: 704px;
top: 222px;
background-image: url(../images/extra03.gif);
background-repeat: no-repeat;
width: 197px;
height: 342px;
}
#extra04 {
position: absolute;
left: 683px;
top: 233px;
background-image: url(../images/extra04.gif);
background-repeat: no-repeat;
width: 157px;
height: 236px;
}
#extra05 {
position: absolute;
left: 683px;
top: 233px;
background-image: url(../images/extra05.gif);
background-repeat: no-repeat;
width: 157px;
height: 215px;
}
#header {
position:absolute;
left: 0px;
top: 0px;
background-image: url(../images/header.png);
background-repeat: no-repeat;
width: 796px;
height: 251px;
}
#menu {
position: absolute;
top: 250px;
left: 0px;
background-image: url(../images/navhead.png);
height: 70px;
width: 234px;
background-repeat: no-repeat;
background-color: transparent;
}
#menucon {
position: absolute;
top: 70px;
left: 0px;
width: 240px;
height: 233px;
background-image: url(../images/navbg.png);
background-repeat: repeat-y;
background-color: transparent;
}
#menufoot {
position: absolute;
background-image: url(../images/navfoot.png);
background-repeat: no-repeat;
width: 236px;
height: 59px;
top: 267px;
}
a img {
border: none;
}
b {
color: #ccffff
}
a:link, a:visited
{
color: #66ccff;
text-decoration: none;
}
a:hover{
color: #7ece52;
text-decoration: none;
}
li a:hover{
color: #7ece52;
text-decoration: none;
font-weight: bold;
}
a.nav:link, a.nav:visited, a.nav:hover
{
width: 229px;
padding: 5px;
}
And here's the HTML for the index
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>eco*kids: HOME</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="css/ecokids.css" type="text/css">
<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
homebuttonup = new Image();
homebuttonup.src = "images/home.gif" ;
homebuttondown = new Image() ;
homebuttondown.src = "images/home02.gif" ;
learnbuttonup = new Image();
learnbuttonup.src = "images/learn.gif" ;
learnbuttondown = new Image() ;
learnbuttondown.src = "images/learn02.gif" ;
ttalkbuttonup = new Image();
ttalkbuttonup.src = "images/tt.png" ;
ttalkbuttondown = new Image() ;
ttalkbuttondown.src = "images/tt02.png" ;
charabuttonup = new Image();
charabuttonup.src = "images/chara.gif" ;
charabuttondown = new Image() ;
charabuttondown.src = "images/chara02.gif" ;
actbuttonup = new Image();
actbuttonup.src = "images/act.gif" ;
actbuttondown = new Image() ;
actbuttondown.src = "images/act02.gif" ;
corpbuttonup = new Image();
corpbuttonup.src = "images/corp.gif" ;
corpbuttondown = new Image() ;
corpbuttondown.src = "images/corp02.gif" ;
}
function buttondown( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}
}
function buttonup ( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}
}
// -->
</script>
<body>
<div id="content" style="z-index:2;">
<div id="mainhead">
</div>
<span class="h1"><img src="images/welcome.png" alt=""></span>
<br>
<br>
Welcome to Waste Industries' Ecokids USA site.
<br>
<br>
At Waste Industries we are the leading provider of safe, clean, and environmentally sound waste collection and removal services.
<br>
<br>
We are a part of everyday life in the communities we serve and are committed to improving those communities by educating our kids, customers, employees, and the public.
<br>
<br>
Our Ecokids site provides information, activities, and links we believe are especially helpful to kids. Please enjoy our games, pictures, coloring activities, stories, and kids' club membership.
<br>
<br>
<span class="h1"><img src="images/navigation.png" alt=""></span>
<br>
<br>
Find your way around EcoKids by using the navigation bar to the left!
<br>
<br>
At the "<b>Info Bin</b>" there's tons of neat facts to teach you what being one of the Ecokids is all about.
<br>
<br>
The "<b>Ecokids</b>" section is filled with pictures and information about the characters you see all around the site.
<br>
<br>
The "<b>Activities</b>" section is filled with games and crafts to keep you busy for hours.
<br>
<br>
Clicking "<b>Corporate</b>" will open up our corporate Waste Industries webpage in a new window.
<br>
<br>
So follow the leader and <b>have fun</b>!
<div id="mainfoot">
</div>
</div>
<div id="header" style="z-index:1">
</div>
<div id="extra01" style="z-index:3">
</div>
<div id="menu">
<div id="menucon">
<a href="index.html" class="nav"
onmouseover="buttondown('homebutton')"
onmouseout="buttonup('homebutton')"><img src="images/gnav.gif" alt=""> <img src="images/home.gif" alt="" name="homebutton"></a>
<br>
<a href="learn.html" class="nav"
onmouseover="buttondown('learnbutton')"
onmouseout="buttonup('learnbutton')"><img src="images/enav.gif" alt=""> <img src="images/learn.gif" alt="" name="learnbutton"></a>
<br>
<a href="ttalk.html" class="nav"
onmouseover="buttondown('ttalkbutton')"
onmouseout="buttonup('ttalkbutton')">
<img src="images/lnav.gif" alt=""> <img src="images/tt.png" name="ttalkbutton" alt=""></a>
<br>
<a href="chara.html" class="nav"
onmouseover="buttondown('charabutton')"
onmouseout="buttonup('charabutton')"><img src="images/wnav.gif" alt=""> <img src="images/chara.gif" alt="" name="charabutton"></a>
<br>
<a href="activity.html" class="nav"
onmouseover="buttondown('actbutton')"
onmouseout="buttonup('actbutton')"><img src="images/gonav.gif" alt=""> <img src="images/act.gif" alt="" name="actbutton"></a>
<br>
<a href="http://www.wasteindustries.com/" class="nav"
target="_blank"
onmouseover="buttondown('corpbutton')"
onmouseout="buttonup('corpbutton')"><img src="images/wipixel.gif" alt=""> <img src="images/corp.gif" alt="" name="corpbutton"></a>
<!-- If you want more links, edit them here.
Please make sure all links in the toolbar are class=nav and the link text has a space before it to ensure they align correctly.-->
<!-- <a href="" class="nav"
onmouseover="buttondown('x')"
onmouseout="buttonup('x')">
<img src="images/cnav.gif" alt=""> <img src="" name="x"></a> -->
<!-- <a href="" class="nav"
onmouseover="buttondown('y')"
onmouseout="buttonup('y')">
<img src="images/snav.gif" alt=""> <img src="" name="y"></a> -->
<!-- <a href="" class="nav"
onmouseover="buttondown('z')"
onmouseout="buttonup('z')">
<img src="images/tnav.gif" alt=""> <img src="" name="z"></a> -->
</div>
<div id="menufoot">
<div id="required">
<center>
<a href="http://www.wasteindustries.com/Privacy.htm" target="_blank"><img src="images/privacy.png" alt=""></a>
<a href="contact.html"><img src="images/contact.png" alt=""></a>
</center>
</div>
</div>
</div>
</body>
</html>
Any help would be great! Thanks.