6 Replies - 6081 Views - Last Post: 21 January 2009 - 02:59 PM

#1 Rakasta  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 20-January 09

How do I keep my page centered at all times?

Posted 20 January 2009 - 07:14 PM

I'm not sure how my homepage can be centered at all times, regardless of how big my window/screen resolution is. I'm using primitive html with a somewhat OK result, though I'm beginning to feel the strain of my own limits. It seems having an automatically centered page is like tying your own shoelace these days, because I don't seem to find anything about it on google :blink:

Below is code from my index.htm file. To see the bigger picture go here.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Ignore Entertainment</title>
	
	<style>
	
		body {
		margin: 0px 0px 0px 0px;
		
	scrollbar-base-color: #B81A1B;
	scrollbar-arrow-color: black;
	scrollbar-shadow-color: black;
	scrollbar-lightshadow-color: red; 
	scrollbar-darkshadow-color: gray;
	scrollbar-highlight-color: black;
	scrollbar-3dlight-color: cccccc;
	}

		#firkanten {
			position: absolute;
			left: 215px;
			top: 490px;
			width: 300px;
			background-color: transparent;
	}
		#firkanten2 {
			position: absolute;
			left: 220px;
			top: 38px;
			width: 300px;
			background-color: transparent;
	}
			#firkanten3 {
			position: absolute;
			left: 355px;
			top: 5px;
			width: 300px;
			background-color: transparent;
	}
	
			#firkanten4 {
			position: absolute;
			left: 210px;
			top: 427px;
			width: 300px;
			background-color: transparent;
	}
	
				#firkanten5 {
			position: absolute;
			left: 805px;
			top: 700px;
			width: 300px;
			background-color: transparent;
	}
					#firkanten6 {
			position: absolute;
			left: 215px;
			top: 700px;
			width: 300px;
			background-color: transparent;
	}
	
	</style>

</head>

<body bgcolor="black">
<table cellspacing="0" cellpadding="0" border="0">
<tr><td></td></tr>


<div id="firkanten">
<iframe src="black1.htm" name="firkant1" id="firkant1" width="690" height="210" marginwidth="5" marginheight="5" scrolling="no" frameborder="0"></iframe>
</div>

<div id="firkanten2">
<iframe src="black2.htm" name="firkant2" id="firkant2" width="670" height="390" marginwidth="5" marginheight="5" scrolling="no" frameborder="0"></iframe>
</div>

<div id="firkanten3">
<iframe src="black3.htm" name="firkant3" id="firkant3" width="403" height="40" marginwidth="5" marginheight="5" scrolling="no" frameborder="0"></iframe>
</div>

<div id="firkanten4">
<iframe src="black4.htm" name="firkant4" id="firkant4" width="692" height="57" marginwidth="5" marginheight="5" scrolling="no" frameborder="0"></iframe>
</div>

<div id="firkanten5">
<iframe src="black5.htm" name="firkant5" id="firkant5" width="104" height="25" marginwidth="5" marginheight="5" scrolling="no" frameborder="0"></iframe>
</div>

<div id="firkanten6">
<iframe src="black6.htm" name="firkant6" id="firkant6" width="104" height="25" marginwidth="5" marginheight="5" scrolling="no" frameborder="0"></iframe>
</div>


<br>

</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: How do I keep my page centered at all times?

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1167
  • View blog
  • Posts: 7,207
  • Joined: 07-September 06

Re: How do I keep my page centered at all times?

Posted 20 January 2009 - 07:19 PM

Try changing your position: absolute stuff out for a normal position and use this:

<style>
body{
  text-align: center;
}
.container{
  text-align: left;
}
</style>



Where container is the class name of the thing you put all the rest of your HTML into.

It will look somewhat like so:

<body>
<span class="container">
HTML CONTENT AND STUFF HERE
</span>
</body>


That should get everything within the body tag centered and everything within to span tag to be looking normal (not text centered).

You could also try using the <center> tag, but that was depreciated.

HTH
Was This Post Helpful? 0
  • +
  • -

#3 Arenlor  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 34
  • View blog
  • Posts: 389
  • Joined: 26-April 06

Re: How do I keep my page centered at all times?

Posted 20 January 2009 - 11:12 PM

http://www.w3.org/St...ples/007/center
Was This Post Helpful? 0
  • +
  • -

#4 mrmcpott  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 95
  • Joined: 24-November 08

Re: How do I keep my page centered at all times?

Posted 21 January 2009 - 01:09 AM

You could enclose the entire body of your document in a div tag with its alignment set to center.

Example:

<html>
<head>
<title>Some Title</title>

</head>
<body>
<div align="center" id="maindiv">
<!-- Place the rest of the code/content you want centered here -->

<div align="left" id="content1">
You can even add more divs/tables/whatever here. Notice the alignment is set to left? It will still be centered in the page because it is enclosed inside the div container that is set to "center"
</div>

<div id="content2"> More more more lal la alalalalala </div>

<!-- This is the closing tag for "maindiv" -->
</div>
</body>
</html>


That is how I have done it in the past and it works for me
Was This Post Helpful? 0
  • +
  • -

#5 Rakasta  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 20-January 09

Re: How do I keep my page centered at all times?

Posted 21 January 2009 - 08:21 AM

I've tried your suggestions, without really getting to where I want. Although I guess it's because I'm using 6 different blocks plus I've aligned the block positions manually, to get them where I want them to be. With all the different codes I use there's bound to be some conflicts within the code as well.

This is my first block. Should I remove the left and top lines to "free" it?

		#firkanten {
			position: absolute;
			left: 215px;
			top: 490px;
			width: 300px;
			background-color: transparent;


I guess it would make things easier if I put all my 6 blocks inside a big block. That way I can concentrate on centering 1 block instead.
Was This Post Helpful? 0
  • +
  • -

#6 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: How do I keep my page centered at all times?

Posted 21 January 2009 - 08:34 AM

Exactly right. Put all those in a container, and give it these rules:
div#container {
	 width:800px;
	 margin:0 auto;
	 position:relative;
}



What you're doing here is first setting the width of your container, and then setting it's left and right margins to automatically divide up the remaining page area between them. This is a more stable method than text-align:center because text-align isn't intended for block level elements. Finally you set the position to relative. This ensures that any content using absolute positioning will calculate its positions from the top left of your container, rather than the body.
Was This Post Helpful? 1
  • +
  • -

#7 Rakasta  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 20-January 09

Re: How do I keep my page centered at all times?

Posted 21 January 2009 - 02:59 PM

@thehat

Your suggestion worked. Now a problem I've been silently cursing myself with for the last couple of years was solved in less than a day. Brilliant! :D :^:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1