BleepingComputer.com > Html Problem

BleepingComputer.com > Internet & Networking > Web Site Development

Sc00by22

May 16 2008, 10:49 AM

I have been designing a website for my game company but it seems it doesn't seem to center my layer, I have tried everything, Here is a picture of what it looks like, For some reason it works on my pc on Firefox and IE, But on any PC it comes up like this. I want the middle section to be centered, Which it is in Frontpage and on my PC but on any other it seems to be on the left hand side

Here is the HTML code

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>Good-Games.co.uk</title>
<style type="text/css">
.style1 {
    text-align: left;
}
.style3 {
    font-family: "Berlin Sans FB";
    text-align: center;
}
a {
    color: #A9ACAE;
}
a:visited {
    color: #A9ACAE;
}
a:active {
    color: #A9ACAE;
}
a:hover {
    color: #A9ACAE;
}
.style4 {
    border-width: 0;
    vertical-align: top;
}
.style5 {
    text-align: center;
}
</style>
</head>

<body style="background-color: #A9ACAE">

<p class="style5">
<map name="FPMap0" id="FPMap0">
<area href="index.html" shape="rect" coords="59, 90, 93, 101" />
<area href="http://good-games.co.uk/forums/index.php" shape="rect" coords="160, 90, 201, 100" />
</map>
<img alt="Menu" src="image/menu.jpg" usemap="#FPMap0" class="style4" /></p>

<div style="position: absolute; width: 777px; height: 800px; z-index: 1; left: 115px; top: 141px" id="layer1" class="style5">
    <img alt="Top" src="image/sidebar_top.jpg" width="777" height="10" /><br />
    <img alt="Right" src="image/sidebar_right.jpg" width="10" height="800" style="float: right" /><div class="style1">
    </div>
    <img alt="Left" src="image/sidebar_left.jpg" width="10" height="800" style="float: left" /><div class="style1">
    </div>
    <div style="position: absolute; width: 750px; height: 794px; z-index: 1; left: 13px; top: 13px" id="layer2" class="style3">
We are a revolutionized gaming company, Who want to bring great games to the
thousands. Our first game will be an MMORPG(Massively multiplayer online
role-playing game) and it will be set in the Medieval Times, It will be called
"The Hidden Elements". It will include Free Play and Member Play. We will have
many classes, races and Jobs. The game will be a player driven economy</div>
    <img alt="Bottom" src="image/sidebar_bottom.jpg" width="777" height="10" /></div>

</body>

</html>

groovicus

May 16 2008, 11:35 AM

That is because you are using absolute positioning. That means no matter what, it is going to position itself right where you tell it, and it will never move. You need to either figure out how much offset you need in order to center it on your screen (the wrong way), or remove the absolute positioning element and use css to center the div (the right way). If you use CSS to center the div, then no matter the screen width, it will always be centered.

HINT: margin:0 auto;

TheoSqua

Jun 4 2008, 04:53 PM

doing margin-left: auto and margin-right: auto on that div should center it in firefox, putting in a text-align:center will get IE centered.

timlallers

Jul 17 2008, 09:29 PM

Just a suggestion, but I would suggest throwing out the WSYWIG software and code the page from scratch. Yeah it might be a pain at first, but doing this will really help you understand the any problems that pop up, especially centering problems.

Ryan12

Jul 22 2008, 08:14 PM

QUOTE(TheoSqua @ Jun 4 2008, 02:53 PM)

doing margin-left: auto and margin-right: auto on that div should center it in firefox, putting in a text-align:center will get IE centered.

Note that IE 7 should center with margin-left and right: auto from my experiences.

jel3

Aug 1 2008, 09:19 PM

it's simpler to just use the shortcut in your body tag like so:

CODE

body{
margin: 0 auto;
}

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.