|
HTML - Problem With Divs Centering Under Ie 6
Hey guys my site
http://www.atlanta-web.com I have 3 <div>s which i centered using the css technique Code: margin: 0 auto; They work perfect in IE 7, FF2, FF3 but fail in IE6 any idea what i could do to make this correct? Thanks, Eric Similar TutorialsHi all I have a question which im sure is very simple to answer but has been frustrating me for three days (yes i am aware i may have prooved my own ineptitude ) If any of you have a moment could you have a look at the code below. What im trying to do is center the divs no matter what the screen resolution.Im hoping, due to my huge lack of experience, that im just missing something very obvious. Below is the code ... TEMPLATE HTML Code: body {
background-color: #000000;
}
-->
</style>
<link href="Stylesheets/DT CSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #b46633;
}
.style1 {
font-family: "Times New Roman", Times, serif;
font-size: large;
}
-->
</style></head>
<body>
<div id="outer">
<div align="center" id="Header"></div>
<div id="links">
<p><a href="Home.html" class="style1">Home<br />
<br />
</a><br />
</p>
</div>
<div align="center" id="Main">
<p align="center">"It does not do to leave a live dragon out of your calculations, if you live near him."<br />
<em>(JRR Tolkien - The Lord of the Rings)</em></p>
<br />
<p align="center">Throughout time since mankind begun our imaginations have activly sought out what we could not see or understand. Demons have haunted our dreams and gods have soothed them. Our minds have conjured terrible creatures for our warriors to battle and places for the adventurous to explore. One of the greatest and widest spread of these creatures is the Dragon. A true testimony to the power of imagination. This website is in dedication to the mightiest of our minds creations. The infomation found here is the result of many hours research and passion and i hope you find it useful.<br />
Welcome to Dragons Touch</p>
</div>
<div id="News">Content for id "News" Goes Here</div>
</div>
<h1 align="center"> </h1>
</body>
</html>
CSS PHP Code: body { font-family: "Times New Roman", Times, serif; background-color: #000000; background-repeat: no-repeat; color: #FFFFFF; font-size: medium; width: 100%; position: relative; left: auto; right: auto; bottom: auto; margin-right: 20px; margin-left: 20px; margin-top: 20px; margin-bottom: 20px; } #outer { width: 80%; background-color:#FFFFFF; margin-top: 50px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px; border: thin solid #000000; } #Header { position: absolute; height: 150px; width: 800px; left: 121px; top: 0px; background-image: url(../Images/NewBanner.jpg); color: #F0F0F0; background-color: #000000; background-repeat: no-repeat; margin: 0px; } Links { top: 150px; position: relative; height: 350px; width: 150px; bottom: auto; } #links { top: 151px; height: 350px; width: 126px; clip: rect(auto,auto,auto,auto); position: absolute; font-family: "Times New Roman", Times, serif; padding-top: 50px; font-size: large; font-weight: normal; font-style: normal; text-transform: none; padding-left: 40px; text-align: left; list-style-position: inside; left: 41px; margin: 0px; } #Main { font-family: "Times New Roman", Times, serif; position: absolute; height: auto; width: 620px; left: 208px; top: 151px; right: 800px; margin: 0px; } #News { position: absolute; left: 829px; top: 151px; width: 162px; height: 406px; margin: 0px; I've got two divs that I want to center, each within its own outer div. Here is my HTML: 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Duyun</title>
<link rel="stylesheet" type="text/css" href="assets/styles/styles.css" />
<script type="text/javascript" src="assets/scripts/swfobject.js">
</script>
<script type="text/javascript">
swfobject.embedSWF ("assets/flash/eng_button_2.swf", "engLink", "257", "471", "9.0.0");
swfobject.embedSWF ("assets/flash/ch_button_2.swf", "chLink", "257", "471", "9.0.0");
</script>
</head>
<body>
<div id="container">
<div id="homeTop">
</div>
<div id="homeMain">
<div id="homeLeft">
<a href="english/index.html">
<div id="engLink">
<p>Alt content</p>
</div></a>
<p class="homeEnter">Enter English Site</p>
</div>
<div id="homeRight">
<a href="chinese/index.html">
<div id="chLink">
<p>Alt content</p>
</div>
</a>
<p class="homeEnter">Enter Chinese Site</p>
</div>
</div>
</div>
</body>
</html>
and the CSS: Code: @charset "UTF-8";
/* CSS Document */
body {
background-color: black;
color: #c0c3c4;
}
#container {
margin: 0 auto;
width: 950px;
}
h1 {
text-align: center;
}
/*************** Home **************/
#homeTop {
height: 100px;
background-color: red;
}
#homeMain {
margin: auto;
width: 800px;
}
#homeLeft {
float:left;
width: 400px;
background-color:blue;
}
#homeRight {
float: right;
width: 400px;
background-color: green;
}
engLink {
margin: auto;
width: 257px;
height: 471px;
}
chLink {
margin: auto;
width: 257px;
height: 471px;
}
.homeEnter {
text-align: center;
}
/**************Bio - English**************/
#bioContainer{
margin: auto;
width: 785px;
}
#bioPic {
float: left;
margin: 20px;
}
.bio {
margin: 10px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
text-indent: 2em;
}
As you can see, for both the chLink and engLink divs, I have the margin: auto declaration, but currently, they both show up to the left extreme of their containing divs. Any ideas what's wrong here? Could the swfobject be causing problems? Thanks. Hi everyone, I'm having trouble with centering multiple DIVS and making them next to one another like so: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<style>
div{border: 1px solid gray;}
</style>
</head>
<body>
<div style="text-align: center">
<div style="float: left;display: inline;">
dfdfd
</div>
<div style="float: left;display: inline;">
dfdfd
</div>
<p style="clear: both;">
</div>
</body>
</html>
Is it possible? Note that we don't know their width or height of any of the DIVS I'm having some trouble trying to get the following page to show the three link columns centered, side by side: http://centralmusic.com.previewmysite.com/links.php EDIT: for reference, the title LINK is properly centered, and the ARTIST column should be directly below that, as is seen on the contact page I've tried every trick you can find on google, but nothing seems to work while the float tag is involved, and if I remove the tag then the divs arn't side by side. I've found that if I make a containing DIV with a FIXED witdth, it will center THAT div within it's parent using the margin: 0 trick. however, the 3 interior divs still float to the left of that container div. so if the containing div is wider then the total width of the interior divs, they do not appeared center (however on this page I COULD make use of equal column widths, but it doesn't end up being FF friendly). Alright so I actually tried a couple more things after typing that last paragraph. On this page: http://centralmusic.com.previewmysite.com/gallery.php I find that what i described so far is true, however on the first page i referenced, putting a containing div around the 3 columns made no apparent difference. I'm going to start double checking my code and comparing the two pages for differences to see what I'm doing wrong (on both pages though, the goal is to have a number of divs centered vertically, side by side). If anyone has any comments or hints to help me out that'd be great, but I'll definatley be posting back later with an update once I get a chance to try a few more things. My site is working correctly in bot Safari & FF but I can't seem to get it to center in IE7. In Safari and FF, the content is centered and the window can be shrunk down to 1000px without scrollbars appearing (which is what I want). In IE7 its all sliding to the right and scrollbars are appearing at 1150px or something like that (which is what I want definitely don't want). This template is a little bit problematic because the background image for the blue area extends outside the central column on the left side and I need it to disappear when the window width is shrunk. I hope that makes sense. I can't figure out an alternative solution that works in IE7, any ideas? Check out the template in question at: http://current-post.com http://www.cubedspacedesigns.com/imagegallery/ This page has a row of scrolling thumbnails along the bottom. Each thumbnail, when clicked on, changes the main image. My problem is that I can't get the main image to centre. The image itself is in a div called #image, and that is inside a container box called #imagebox. For some reason my #image div automatically takes on the width of its parent, #imagebox. What I want it to do is to take on the width of the new image and get centred inside its parent. hi, im trieing to center my i frame. it worked first, but when i added a overflow to hide the scrollbar the center didnt work anymore, any fix on that would be greatly appreciated.. current code: <div style='width:1000px; height: 2000px; overflow: hidden;'> <IFRAME SRC="http://www.gras-valkparkieten.nl/smf/" WIDTH="1042" HEIGHT="2000" FRAMEBORDER="0" align="middle"> </IFRAME> </div> html webpage: http://www.gras-valkparkieten.nl/forum.html I believe the problem is that the fact that the pictures are using an absolute position. Not sure though. I have tried about 4 or 5 different thing to fix this to no avail. I will copy in the code for you to see. I do not have this running on a server for everyone to load but it is not much code. Any help would be greatly appreciated. Thansk, Dano HTML Code: <html>
<head>
<title>Official Site of Premier Security Group, Inc.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.centerContainer { margin: 0 auto; }
body
{
background-image:url(images/bkgd2.png)
}
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:1200px;
}
#PSindex-01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:69px;
}
#PSindex-02 {
position:absolute;
left:0px;
top:69px;
width:20px;
height:174px;
}
#PSindex-03 {
position:absolute;
left:20px;
top:69px;
width:760px;
height:174px;
}
#PSindex-04 {
position:absolute;
left:780px;
top:69px;
width:20px;
height:174px;
}
#PSindex-05 {
position:absolute;
left:0px;
top:243px;
width:800px;
height:13px;
}
#PSindex-06 {
position:absolute;
left:0px;
top:256px;
width:20px;
height:35px;
}
#PSindex-07 {
position:absolute;
left:20px;
top:256px;
width:126px;
height:35px;
}
#PSindex-08 {
position:absolute;
left:146px;
top:256px;
width:129px;
height:35px;
}
#PSindex-09 {
position:absolute;
left:275px;
top:256px;
width:125px;
height:35px;
}
#PSindex-10 {
position:absolute;
left:400px;
top:256px;
width:1px;
height:944px;
}
#PSindex-11 {
position:absolute;
left:401px;
top:256px;
width:123px;
height:35px;
}
#PSindex-12 {
position:absolute;
left:524px;
top:256px;
width:130px;
height:35px;
}
#PSindex-13 {
position:absolute;
left:654px;
top:256px;
width:126px;
height:35px;
}
#PSindex-14 {
position:absolute;
left:780px;
top:256px;
width:20px;
height:35px;
}
#PSindex-15 {
position:absolute;
left:0px;
top:291px;
width:400px;
height:909px;
}
#PSindex-16 {
position:absolute;
left:401px;
top:291px;
width:399px;
height:909px;
}
</style>
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<div class="centerContainer">
<div>
<div id="Table_01">
<div id="PSindex-01">
<img src="images/PSindex_01.png" width="800" height="69" alt="">
</div>
<div id="PSindex-02">
<img src="images/PSindex_02.png" width="20" height="174" alt="">
</div>
<div id="PSindex-03">
<img src="images/PSindex_03.png" width="760" height="174" alt="">
</div>
<div id="PSindex-04">
<img src="images/PSindex_04.png" width="20" height="174" alt="">
</div>
<div id="PSindex-05">
<img src="images/PSindex_05.png" width="800" height="13" alt="">
</div>
<div id="PSindex-06">
<img src="images/PSindex_06.png" width="20" height="35" alt="">
</div>
<div id="PSindex-07">
<img src="images/PSindex_07.png" width="126" height="35" alt="">
</div>
<div id="PSindex-08">
<img src="images/PSindex_08.png" width="129" height="35" alt="">
</div>
<div id="PSindex-09">
<img src="images/PSindex_09.png" width="125" height="35" alt="">
</div>
<div id="PSindex-10">
<img src="images/PSindex_10.png" width="1" height="944" alt="">
</div>
<div id="PSindex-11">
<img src="images/PSindex_11.png" width="123" height="35" alt="">
</div>
<div id="PSindex-12">
<img src="images/PSindex_12.png" width="130" height="35" alt="">
</div>
<div id="PSindex-13">
<img src="images/PSindex_13.png" width="126" height="35" alt="">
</div>
<div id="PSindex-14">
<img src="images/PSindex_14.png" width="20" height="35" alt="">
</div>
<div id="PSindex-15">
<img src="images/PSindex_15.png" width="400" height="909" alt="">
</div>
<div id="PSindex-16">
<img src="images/PSindex_16.png" width="399" height="909" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
How do I go about centering an image in a table cell so it is centered in both IE and Firefox? Right now, when I use "center" tags, it will be centered in Firefox, but will be up against the left side in IE. Any help is appreciated! I am working on a page and everything shows up perfectly in every browser I have tried except for internet explorer, which messes everything up. Here is how the page is supposed to look: http://i140.photobucket.com/albums/r.../Picture12.png however, here is how it looks in internet explorer. it moves the entire div underneath everything else when it should be aligned next to it: http://i140.photobucket.com/albums/r.../Picture13.png and also, in internet explorer it messes up within the div itself, but only to one of my thumbnails like so: http://i140.photobucket.com/albums/r...icture14-1.png my boss and i have been fighting with this for a while now, here is the link to the page: http://www.nba.com/sixers/dance/media.html and here is my coding for the div itself, if you need to see the rest i can post it as well <div id="dancers"> <div class="dancer"> <a href="/sixers/dance/annie.html"><img src="/media/sixers/annie_thumb.jpg" /></a> <a href="/sixers/dance/annie.html">Annie</a> </div> <div class="dancer"> <a href="/sixers/dance/chenelle.html"><img src="/media/sixers/chenelle_thumb.jpg" /></a> <a href="/sixers/dance/chenelle.html">Chenelle</a> </div> <div class="dancer"> <a href="/sixers/dance/dana.html"><img src="/media/sixers/dana_thumb.jpg" /></a> <a href="/sixers/dance/dana.html">Dana</a> </div> <div class="dancer"> <a href="/sixers/dance/danielle.html"><img src="/media/sixers/danielle_thumb.jpg" /></a> <a href="/sixers/dance/danielle.html">Danielle</a> </div> <div class="dancer"> <a href="/sixers/dance/deirdre.html"><img src="/media/sixers/deirdre_thumb.jpg" /></a> <a href="/sixers/dance/deirdre.html">Deirdre</a> </div> <div class="dancer"> <a href="/sixers/dance/erica.html"><img src="/media/sixers/erica_thumb.jpg" /></a> <a href="/sixers/dance/erica.html">Erica</a> </div> <div class="dancer"> <a href="/sixers/dance/jeaneen.html"><img src="/media/sixers/janeen_thumb.jpg" /></a> <a href="/sixers/dance/jeaneen.html">Janeen</a> </div> <div class="dancer"> <a href="/sixers/dance/jenn.html"><img src="/media/sixers/jenn_thumb.jpg" /></a> <a href="/sixers/dance/jenn.html">Jenn</a> </div> <div class="dancer"> <a href="/sixers/dance/jessica.html"><img src="/media/sixers/jessica_thumb.jpg" /></a> <a href="/sixers/dance/jessica.html">Jessica</a> </div> <div class="dancer"> <a href="/sixers/dance/julie.html"><img src="/media/sixers/julie_thumb.jpg" /></a> <a href="/sixers/dance/julie.html">Julie</a> </div> <div class="dancer"> <a href="/sixers/dance/kate.html"><img src="/media/sixers/kate_thumb.jpg" /></a> <a href="/sixers/dance/kate.html">Kate</a> </div> <div class="dancer"> <a href="/sixers/dance/lauren.html"><img src="/media/sixers/lauren_thumb.jpg" /></a> <a href="/sixers/dance/lauren.html">Lauren</a> </div> <div class="dancer"> <a href="/sixers/dance/melanie.html"><img src="/media/sixers/melanie_thumb.jpg" /></a> <a href="/sixers/dance/melanie.html">Melanie</a> </div> <div class="dancer"> <a href="/sixers/dance/melinda.html"><img src="/media/sixers/melinda_thumb.jpg"></a><br><a href="/sixers/dance/melinda.html">Melinda</a> </div> <div class="dancer"> <a href="/sixers/dance/nina.html"><img src="/media/sixers/nina_thumb.jpg" /></a> <a href="/sixers/dance/nina.html">Nina</a> </div> <div class="dancer"> <a href="/sixers/dance/vi.html"><img src="/media/sixers/vi_thumb.jpg" /></a><br><a href="/sixers/dance/vi.html">Vi</a> </div> </div> Hello, In Internet Explorer, the following page shows just fine: www.myspace.com/milqud However, in Firefox, there's small gaps between the images and Flash files. I'd like to remove these gaps. How do I go about doing this? Here's the html code I'm using: HTML Code: <img src="http://www.milqud.com/myspace/topleft.jpg" width="390" height="520" border="0"> <object enableJSURL="false" enableHREF="false" saveEmbedTags="true" allowScriptAccess="never" allownetworking="internal" type="application/x-shockwave-flash" allowScriptAccess="never" allownetworking="internal" height="520" width="410" data="http://www.milqud.com/myspace/topheader.swf"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.milqud.com/myspace/topheader.swf" /> </object> <br> <img src="http://www.milqud.com/myspace/mainbg.jpg" border=0> Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<STYLE>
#mp { border:1px solid #999; width:300px; background-color:#222; color:#999;}
#mptabpanel { float:left; width:300px; height:400px; }
#mptabcomments { background-color:#003; z-index:4; position:relative; top:0px; left:0px; }
#mptablinks { background-color:#030; z-index:5; position:relative; top:0px; left:0px; }
#mptabplaylist { background-color:#300; z-index:6; position:relative; top:0px; left:0px; }
</STYLE>
</head>
<body>
<!-- open mediaplayer --><DIV id="mp">
<DIV id="mptabpanel">
<DIV id='mptabcomments'>COMMENTS TAB</DIV>
<DIV id='mptablinks'>LINKS TAB</DIV>
<DIV id='mptabplaylist'>PLAYLIST TAB</DIV>
</DIV>
</DIV><!-- close mediaplayer -->
</body>
</html>
The three divs, "mptabcomments/links/playlist" are supposed to occupy the exact same position. (Only one of them will be visible at any time.) I've tried relative positioning and altering each div's z-index but my brain seems to have switched off here! I can't use absolute positioning because this layout is part of a bigger layout which itself is going to be absolutely positioned around the screen and I don't want to have to manually update each contained div's position every time the parent div is moved. I want to make an HTML "bar graph". This would be very simple except that I want the name of each bar to be overlaid. Again, simple, but what if the bar name is longer than the bar? Then it can't be text inside a coloured DIV, can it? Or can it? An important thing is that the graph's width will not be fixed. It'll probably take up about 40% of the page. So if the available page width is altered, the graph and it's bars will have to be re-stretched. Could somebody show me a simple example of how to "overlay" text over a DIV that not wide enough to contain it? Here's what I want: Thanks in advance for any help, Seymour. http://ebay.110mb.com/test/ I made some changes to the design and ended up mashing it! I just can't see where I have gone wrong .... anyone any ideas? Hi, I was trying to develop a page in HTML/CSS but having some difficulties. I have created many pages before but this one is giving me a hard time. What I have done differently this time it, i have used Positioning tags. The problem i am having is I can not set any two divs or images side by side. If i set 1 image and 1 div side by side they are being placed on top of each other. But, i may be going crazy here, i was able to place the top two divs side by side (logo and privacy_protected). Can any one please tell me what i am doing wrong or what i should do? Here is the code that i am using: Code: <body>
<div id="wrapper">
<div id="bodypic">
<div id="logo"><a href="index.html"><img src="images/transparent.png" width="319" height="100" border="0" /></a></div><!--logo -->
<div id="privacy_protected"></div><!--privacy_protected -->
<img src="images/transparent.png" height="29" width="1020"/>
<div id="728block">
<img src="images/transparent.png" height="89" width="18" style="float:left"/>
<div id="728adunit"><img src="images/728x90.jpg" width="728" height="90" /></div><!--728adunit -->
<a href="#"><img src="images/transparent.png" height="89" width="23" style="float:left"/></a>
<a href="#"><img src="images/transparent.png" height="45" width="219" style="float:left"/></a>
<a href="#"><img src="images/transparent.png" height="43" width="202" style="float:left"/></a></div><!--728adblock -->
</div><!--bodypic -->
</div><!--wrapper -->
</body>
And the CSS Code: #wrapper {
height: 1174px;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#bodypic {
background-image: url(images/wrapper.jpg);
float: left;
height: 1174px;
width: 1024px;
}
body {
background:#FFF;
font-family:Arial, Helvetica, sans-serif;
text-align:justify;
font-size:14px;
}
a:link {
color: #06F;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #06F;
}
#logo {
background-image: url(images/Editorial_v3-1_01.gif);
float: left;
height: 103px;
width: 498px;
}
#privacy_protected {
background-image: url(images/Editorial_v3-1_02.jpg);
float: left;
height: 103px;
width: 526px;
}
#728block {
float: left;
height: 91px;
width: 1024px;
}
#728adunit {
float: left;
height: 90px;
width: 728px;
}
a:hover {
text-decoration: underline;
color: #06F;
}
a:active {
text-decoration: none;
}
Please help! i've trouble getting my header not to interfer with my menu. I think its got something to do with my margins, but i cant figure it out. Thx for helping out a total beginner! http://wemadethis.net/blog.html i'm trying to wrap my head around floats, and implement them into a new design i'm doing. basically it's a 4 column directory listing. it looks fine when the browser is >960px, but once you resize your browser so only two columns fit horizontally, the 3rd column appears below as desired BUT it is off to the right, and the 4th column is below on the left. once you resize your browser so only one column fits horizontally, it appears correct again. any tips to fix the layout when only two columns can fit horizontally? the site is here (css is in the header for now): http://cortlandareatribune.com/test/directory.html how can i center the nav on this page? http://fantasyfootball.pzproductions.com/testing I have a website and I used css to make my Div tags set to absolute. The only problem is that when you open it in a browser, the browser won't open big enough and wil block out some of my content (forcing me to scroll to the left or maximize the borswer to see the whole page) . How do i make the divs always appear in the center of the page always. Also how do i make it so when you change the siz of the browser my divs will change with it to remain in the center. I tried doing the margin auto trick but it still doesn't work. Here is my stle sheet code and the web page html code... any help would be appreciated. /* CSS Document */ #wrapper {margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 0;;} body { margin : 0px 0px 0px 0px; background-color: #E1AE5A; background-repeat: repeat; } #top { position: absolute; height: 48px; width: 900px; left: 250px; top:3px; border:0px none; z-index:1; color: #000033; } #main { position: absolute; top: 542px; left: 328px; z-index:5; width: 745px; color: #FFFFFF; height: 28px; } #flash { position: absolute; top: 130px; left: 299px; z-index:4; width: 803px; color: #FFFFFF; height: 419px; } .style1 { font-family: Eurostile; color: #FFFFFF; } .style2 { font-family: Helvetica; } #Layer1 { position:absolute; left:300px; top:121px; width:804px; height:540px; z-index:3; background-color: #000033; border: medium solid #FFFFFF; } .style3 { font-family: Eurostile; } #Layer2 { position:absolute; left:111px; top:170px; width:71px; height:124px; z-index:4; } .style4 {color: #000000} #Layer3 { position:absolute; left:482px; top:72px; width:37px; height:56px; z-index:2; } #Layer4 { position:absolute; left:652px; top:72px; width:24px; height:31px; z-index:2; } #Layer5 { position:absolute; left:822px; top:72px; width:84px; height:58px; z-index:2; } #Layer6 { position:absolute; left:992px; top:72px; width:95px; height:50px; z-index:2; } #Layer7 { position:absolute; left:331px; top:139px; width:750px; height:446px; z-index:9; } #Layer11 { position:absolute; left:319px; top:72px; width:12px; height:10px; z-index: 2; } #Layer8 { position:absolute; left:302px; top:98px; width:791px; height:48px; z-index:10; } #Layer9 { position:absolute; left:299px; top:40px; width:32px; height:20px; z-index:0; } #Layer10 { position:absolute; left:1016px; top:595px; width:24px; height:26px; z-index:10; } and the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" land="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="styles.css" rel="stylesheet" type="text/css"> </head> <body> <div id="top"> <h1 align="center" class="style3 style4">on The side, Inc. </h1> <p align="center" class="style3"> </p> </div> <div class="style2 style3" id="main">on The side is a value added promotional marketing organization focused on working with companies to make them more market-facing. We take time to learn about our clients' business model, industry and previous marketing agendas before taking a next step OR leap - if necessary.</div> <div id="Layer1"></div> <div id="flash" align="center"> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="425" height="400"> <param name="movie" value="main.swf"> <param name="quality" value="high"> <embed src="main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="425" height="400"></embed> </object> </div> <div id="Layer3"><a href="who.html"><img src="who.jpg" width="100" height="70" border="0"></a></div> <div id="Layer4"><a href="what.html"><img src="what.jpg" width="100" height="70" border="0"></a></div> <div id="Layer5"><a href="ideas.html"><img src="ideas.jpg" width="100" height="70" border="0"></a></div> <div id="Layer6"><a href="why.html"><img src="why.jpg" width="100" height="70" border="0"></a></div> </body> </html> |
|||||||