Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Html Problem


  • Please log in to reply
5 replies to this topic

#1 Sc00by22

Sc00by22

  • Members
  • 147 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Local time:08:24 PM

Posted 16 May 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

Posted Image

Here is the 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>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 
&quot;The Hidden Elements&quot;. 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>


BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:01:24 PM

Posted 16 May 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;

#3 TheoSqua

TheoSqua

  • Members
  • 21 posts
  • OFFLINE
  •  
  • Local time:02:24 PM

Posted 04 June 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.

#4 timlallers

timlallers

  • Members
  • 2 posts
  • OFFLINE
  •  
  • Local time:03:24 PM

Posted 17 July 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.

#5 Ryan12

Ryan12

  • Members
  • 28 posts
  • OFFLINE
  •  
  • Local time:12:24 PM

Posted 22 July 2008 - 08:14 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.

#6 jel3

jel3

  • Members
  • 3 posts
  • OFFLINE
  •  
  • Location:OOB, ME
  • Local time:03:24 PM

Posted 01 August 2008 - 09:19 PM

it's simpler to just use the shortcut in your body tag like so:
body{
margin: 0 auto;
}





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users