By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,773 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

Simple CSS question, stumped me.

P: 1
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
Share this Question
Share on Google+
1 Reply


drhowarddrfine
Expert 5K+
P: 7,435
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

Post your reply

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