473,322 Members | 1,846 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Simple CSS question, stumped me.

Hello guys. My name is Lynne and I am currently trying to build a website for a game that I play online called Exodus.

This is the page --> http://exodus.mudmagic.com

Immediately you can probably see my issue. While I -finally- figured out how to properly center the page so it showed up centered on all resolutions, I now have run into another couple problems.

While some of the items on my page can be centered, MOST of them cannot because a lot of things have to be at a certain spot on the page, not centered as you can probably see. I'm using percentages on the centered items to keep them in the middle, and pixels on everything else, I wanted to change everything to percentages because it tends to look nicer, and it auto realigns if you shrink up your browser. However, if you look at the page you will see that the little exodus picture displaying our Host and Port does not completely match up with the bars above it (I am quite aware everything else doesn't match up either, ignore that for now) If I make the margin left % any higher or lower, it is too extreme in both cases.

The SECOND major issue is this. I have a 22 inch monitor and, like a 12 inch lap top monitor. When I look at my laptop, I see that the banner at the top of the page and the two bars above and below the link gifs are perfectly centered, and that the exodus image is just a tad to too far to the right. As if this wasn't annoying enough, given the fact that no matter what I do that image won't match up right, when I look at my 22 inch monitor, the exodus image is WAY too far to the left. This confuses and infuriates me.

Does anyone have any suggestions? I'm really stumped and annoyed on this one.

Here is the code:

[html]
<HTML>
<HEAD>
<TITLE>Welcome to Exodus</TITLE>
</HEAD>
<BODY bgcolor="#000000" text="#000000" link="#000000" vlink="#000000" alink="#000000">
<background img="http://www.anthonette.com/wp-content/uploads/2007/04/tonet3.jpg">
<DIV style="position:absolute; left:10%; right:10%; top:171px; z-index:0" align="center" align="top">
<img src="bar.jpg" align="top" border=0 width=818 height=13 >
</DIV>
<DIV style="position:absolute; left:10%; right:10%; top:206px; z-index:1" align="center" align="top">
<img src="bar.jpg" align="top" border=0 width=818 height=13 >
</DIV>
<DIV style="left:100%; right:100%; top:25px; z-index:2" align="center" align="center">
<img src="chromeMasthead_purple.jpg" align="top" border=0 width=817 height=143 >
</DIV>
<DIV style="position:absolute; left:1090px; top:224px; z-index:3" align="center" align="top">
<img src="box.jpg" align="top" border=0 width=206 height=184 >
</DIV>
<DIV style="position:absolute; left:850px; top:224px; z-index:4" align="center" align="top">
<img src="box.jpg" align="top" border=0 width=206 height=184 >
</DIV>
<DIV style="position:absolute; left:480px; top:409px; z-index:5" align="center" align="top">
<img src="box.jpg" align="top" border=0 width=206 height=184 >
</DIV>
<DIV style="position:absolute; left:500px; top:226px; z-index:6" align="center" align="top">
<img src="But20a.gif" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:621px; top:225px; z-index:7" align="center" align="top">
<img src="But20a.gif" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:480px; top:411px; z-index:8" align="center" align="top">
<img src="But20a.gif" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:480px; top:622px; z-index:9" align="center" align="top">
<img src="box.jpg" align="top" border=0 width=206 height=184 >
</DIV>
<DIV style="position:absolute; left:480px; top:624px; z-index:10" align="center" align="top">
<img src="But20a.gif" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:480px; top:1026px; z-index:11" align="center" align="top">
<img src="bar.jpg" align="top" border=0 width=818 height=13 >
</DIV>
<DIV style="position:absolute; left:480px; top:835px; z-index:12" align="center" align="top">
<img src="box.jpg" align="top" border=0 width=206 height=184 >
</DIV>
<DIV style="position:absolute; left:480px; top:837px; z-index:13" align="center" align="top">
<img src="But20a.gif" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:715px; top:440px; z-index:14" align="center" align="top">
<img src="content.jpg" align="top" border=0 width=585 height=553 >
</DIV>
<DIV style="position:absolute; left: 18%; top:225px; z-index:15" align="center" align="top">
<img src="picture.jpg" align="top" border=0 width=351 height=177 >
</DIV>
<DIV style="position:absolute; left:850px; top:229px; width:114px; height:23px; z-index:16" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana">Some Header</FONT>
</DIV>
<DIV style="position:absolute; left:1095px; top:228px; width:114px; height:23px; z-index:17" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana">Some Header</FONT>
</DIV>
<DIV style="position:absolute; left:485px; top:413px; width:114px; height:23px; z-index:18" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana">Content Box</FONT>
</DIV>
<DIV style="position:absolute; left:485px; top:626px; width:114px; height:23px; z-index:19" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana">Content Box</FONT>
</DIV>
<DIV style="position:absolute; left:485px; top:838px; width:114px; height:23px; z-index:20" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana">Content Box</FONT>
</DIV>
<DIV style="position:absolute; left:850px; top:252px; width:198px; height:151px; z-index:21" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana">
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
</FONT>
</DIV>
<DIV style="position:absolute; left:1095px; top:251px; width:182px; height:151px; z-index:22" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana"><A HREF="http://forumtopic.html">
Some Links Here<BR>
Some Links Here<BR>
Some Links Here<BR>
Some Links Here<BR>
Some Links Here<BR>
Some Links Here<BR>
Some Links Here<BR>
</FONT>
</DIV>
<DIV style="position:absolute; left:490px; top:438px; width:179px; height:167px; z-index:23" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#000000" face="Arial">Some Text Here<BR>
</FONT><FONT style="FONT-SIZE:10pt" color="#000000" face="Arial">Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
</FONT>
</DIV>
<DIV style="position:absolute; left:490px; top:651px; width:179px; height:167px; z-index:24" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#000000" face="Arial">Some Text Here<BR>
</FONT><FONT style="FONT-SIZE:10pt" color="#000000" face="Arial">Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
</FONT>
</DIV>
<DIV style="position:absolute; left:490px; top:864px; width:179px; height:167px; z-index:25" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#000000" face="Arial">Some Text Here<BR>
</FONT><FONT style="FONT-SIZE:10pt" color="#000000" face="Arial">Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
Some Text Here<BR>
</FONT>
</DIV>
<DIV style="overflow:hidden; position:absolute; left:775; top:460; z-index:26" align="center" align="top" width=464 height=8>
<HR size="3" width="459">
</DIV>
<DIV style="position:absolute; left:775px; top:446px; width:432px; height:23px; z-index:27" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana">Some Header</FONT>
</DIV>
<DIV style="position:absolute; left:750px; top:479px; width:517px; height:87px; z-index:28" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#FFFFFF" face="Verdana">This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. This is sample text. <BR>
<BR>
the rest of the body goes here</FONT>
</DIV>
<DIV style="position:absolute; left:520px; top:184px; z-index:33" align="center" align="top">
<img src="But45a.jpg" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:670px; top:184px; z-index:33" align="center" align="top">
<img src="But45a.jpg" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:820px; top:184px; z-index:34" align="center" align="top">
<img src="But45a.jpg" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:970px; top:184px; z-index:35" align="center" align="top">
<img src="But45a.jpg" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:1120px; top:184px; z-index:36" align="center" align="top">
<img src="But45a.jpg" align="top" border=0 width=134 height=22 >
</DIV>
<DIV style="position:absolute; left:540px; top:185px; width:117px; height:23px; z-index:37" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#000000" face="Verdana"><A HREF="http://index.html">Link</A></FONT>
</DIV>
<DIV style="position:absolute; left:690px; top:185px; width:116px; height:23px; z-index:38" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#000000" face="Verdana"><A HREF="LINK">Link</A></FONT>
</DIV>
<DIV style="position:absolute; left:840px; top:185px; width:64px; height:23px; z-index:39" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#000000" face="Verdana"><A HREF="LINK">Link</A></FONT>
</DIV>
<DIV style="position:absolute; left:990px; top:185px; width:120px; height:23px; z-index:40" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#000000" face="Verdana"><A HREF="LINK">Link</A></FONT>
</DIV>
<DIV style="position:absolute; left:1140px; top:185px; width:117px; height:23px; z-index:37" align="center" align="top">
<FONT style="FONT-SIZE:10pt" color="#000000" face="Verdana"><A HREF="LINK">Link</A></FONT>
</DIV>
</body>
</HTML>[/html]
Feb 9 '08 #1
1 1456
drhowarddrfine
7,435 Expert 4TB
You have no doctype which puts IE into quirks mode.
You have 105 HTML errors.
You have 2 CSS errors.

Please see the articles about doctypes and validation under Howtos at the top of this page, in the html/css section.
Feb 9 '08 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

0
by: corleone | last post by:
im stumped! my expected input dialog box should be please choose value 1 2 3 *in this exact format.
9
by: robbie.carlton | last post by:
Hello! I've programmed in c a bit, but nothing very complicated. I've just come back to it after a long sojourn in the lands of functional programming and am completely stumped on a very simple...
4
by: D. Shane Fowlkes | last post by:
I'm stumped! I know this isn't exactly a .NET question but I know someone here is bound to be able to help. I'm trying to write a query to extract a list of records from a many-to-many "key"...
6
by: Brian | last post by:
Hello, I am using a beginners book on VB .net and already stumped....when using this code (below) , it will tell me that MsgBox is not valid. This is a very simple program and I can't figure out...
6
by: Brian | last post by:
Hello, I was having a problem saveing images that I edited with a vb.net program. Every time I would save the image I would receive a GDI+ error. I tried everything that I could think of...
9
by: =?ISO-8859-1?Q?Morten_N=F8rgaard?= | last post by:
Hello everyone, I feel really dumb asking this, but I can't work it out. Searching gives me nothing, I'm down to thinking it's a bug in Visual Studio 2005, but of course it probably isn't... ...
1
by: noisette | last post by:
Hi! Am a total newbie to XML and have been asked to update a questionnaire template that was created last year with new information for this year. I've got my head around most things now but am...
5
by: Kardon Coupé | last post by:
Dear All, I'm bemused, I'm moving an application I've written from VB6 into VS2005, and I'm getting all the fundamentals over before I delve into the hard part, like getting the forms layout...
1
by: Andrew | last post by:
I'm learning PHP so this might be a simple question to more expeienced developers hopefully. I have a findrecords.php page which has the following code which creates a new record in a database...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.