1 Vote Vote

Problems Overlapping

Posted by topdog 773 days ago Questions| align text auto All
Hey Everyone! I'll start of by way of apologizing for my general ignorance in the area of web design in general.
I am in high-school and decided to build the new website for my schools robotics team since that's what I think I may
be interested in doing (post-secondary). It's been a steep learning curve to say the least and I'm still left feeling pretty ignorant,
but I've tried my best. As it is, I'm stuck. Everything I've done appears to be working alright, aside from the fact none of it will
overlap. However I try, none of it is willing to overlap each other. I've played with z-indexes, visibility and position and all that
jazz, but obviously I'm doing something wrong. Anyhow, to summarize that rather long worded explanation; I would much
appreciate it if someone could have a peek at my code and tell me where I'm messing up. Any other improvements you mention
would be greatly appreciated as well. Oh ya, If it's relevant, I wrote this all in adobe CS4 on windows xp.

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></head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Team 2013 Robotics</title>
<style type="text/css">
<!--
body {
background-image: url(../My%20Pictures/Robotics_bg_colour.png);
background-repeat: repeat-x;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #D6D3CE;
text-align:center;
z-index: 1;
visibility: inherit;
}
#Container {
position:absolute;
top:0px;
width:auto;
height:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
z-index: 100;
color:#000;
padding:10px;
font-style: normal;
align:center;
}
#NavBar {
position:absolute;
width:760px;
height:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
z-index: 102;
background-color:#284022;
padding:5px;
color: #C8C8C8;
text-align:center;
}
#apDiv2 {
position:absolute;
left:177px;
top:244px;
width:649px;
height:135px;
z-index: 104;
text-align:center;
}
#Text {
position:absolute;
left:207px;
top:304px;
width:205px;
height:65px;
z-index: 105;
text-align:left;
text-indent: left;
}
#B-Bar {
position:absolute;
left:205px;
top:1142px;
width:593px;
height:23px;
z-index: 106;
text-align: left;
}
#Menu {
position:absolute;
width:604px;
height:50px;
z-index: 400;
padding:5px;
text-align:center;
}
#Gear {
position:absolute;
left:auto;
top:200px;
width:120px;
height:120px;
z-index: 500;
align: center;
text-align:center;
}
-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="Container" style="align:center; z-index:1;"><img src="Robotics Page.png" alt="Robotics Page" width="990" height="1200" id="Container2" style="z-index: 1; position: relative; visibility: inherit;"/></div>
<div id="#Gear"
style="top:220px; z-index:1000; " align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="150" height="150" align="top" standby="loading gears..." id="FlashID" style="align="top: 175 px;"">
<param name="movie" value="cg2_orange.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<param name="BGCOLOR" value="#FF6600" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object data="cg2_orange.swf" type="application/x-shockwave-flash" width="150" height="150">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<param name="BGCOLOR" value="#FF6600" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>
<div align="left" id="Text" style="margin-left:auto; top: 250px; Width:auto; text-align: left; z-index: 105; visibility: show;">text goes here smile.gif</div>
<div align="left" id="B-Bar" style="margin-left:auto; width:auto; z-index:106; visibility: show; bottom:400px;" >      Link         link       link</div>
<div id="#Menu"
style="top: 100px; position: inherit; z-index: 200; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;"
align="center">
<p><strong>Home            About                                                        Media              FIRST </strong></p>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>


If anyone would like a screen shot of the problem I have one but I'm not sure how to add it to the post. Thanks! biggrin.gif
Discuss Bury


Who Voted for this Question