...

View Full Version : Absolute center



Crash1hd
12-17-2003, 06:09 PM
Is there a way of taking the following code! and moving the parts in red right into a css (inbetween the <STYLE TYPE="text/css"> in here </STYLE>)



<html><head><title>How to Center A Layer</title>
<script>
var ns=(document.layers);
var ie=(document.all);
var w3=(document.getElementById && !ie);

function layerObject(id,left,top) {
if (w3){
this.obj = document.getElementById(id).style;
this.obj.left = left;
this.obj.top = top;
return this.obj;
}
if(ie) {
this.obj = document.all[id].style;
this.obj.left = left;
this.obj.top = top;
return this.obj;
}
if(ns) {
this.obj = document.layers[id];
this.obj.left = left;
this.obj.top = top;
return this.obj;
}
}

function avwh() {
if(ns||w3) {
available_width=window.innerWidth;
available_height=window.innerHeight;
layerSetup();
}
if(ie) {
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
layerSetup();
}
}

function layerSetup() {

//this has to be in this order? dont know why other wise doesnt work! reads from the right to left

DivCenter = new layerObject('DCenter', available_width/2-50, available_height/2-50);

}

function Resize() {
if(ns||ie||w3) {
location.reload();
}}
</SCRIPT>
<STYLE TYPE="text/css">

.style {
position: absolute;
width: 100px;
height: 100px;
background-color: #CCCCCC;
layer-background-color: #CCCCCC; /*This is for older browsers like Netscape 4.8*/
clip:rect(0,100,100,0);/*This is for older browsers like Netscape 4.8*/
border-style: None;
border-color: None;
z-index: 1;
}
</STYLE>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="avwh()" onResize="Resize()">

<div id="DCenter" Class="style" align="center">This is in the center and middle of the page</div>

</body></html>


into something like



<STYLE TYPE="text/css">

.style {
position: absolute;
Left: Javascript:available_width/2-50
Top: Javascript:available_height/2-50
width: 100px;
height: 100px;
background-color: #CCCCCC;
layer-background-color: #CCCCCC; /*This is for older browsers like Netscape 4.8*/
clip:rect(0,100,100,0);/*This is for older browsers like Netscape 4.8*/
border-style: None;
border-color: None;
z-index: 1;
}
</STYLE>
:confused:

me'
12-17-2003, 08:14 PM
You can't say javascript: within a CSS declaration block.
Yes, there's an easier way of doing it, if you know the exact dimensions of the block.
#center {
positon: absolute;
left: 50%;
top: 50%;
margin: -xxxpx 0 0 -yyypx }where xxx is half the block's height, and yyy is half the block's width.

If you want to understand this a bit better, post again and ask me.

Crash1hd
12-17-2003, 08:23 PM
I will have a look at it tommorrow as I am heading off to work but better explinations are always welcome :)

me'
12-17-2003, 08:27 PM
Alright:

The left: 50% and top: 50% position the top left corner of the element halfway along the screen and halfway down (if the element has a position: value of anything other than static or nothing, which actually are the same thing). Obviously, we don't want the top left hand corner to be in the center of the page, we want the center point of the element to be in the center of the page. So, we need to pull the element back over to the left and up. We do this with negative margins, which 'pull' an element in the direction that the margin is (ie: a negative left margin will pull an element to the left). Half the element's size puts the center point in the middle of the page.

Warning: IE5.0 doesn't support negative margins.

Crash1hd
12-17-2003, 08:31 PM
Ok that I understand so your saying a cube that is 100 x 100 would be



#center {
positon: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px }


so if -50 is the top and left what are the 0 0 in the middle?

me'
12-17-2003, 08:39 PM
margin: -50px 0 0 -50px is an abbreviation of:
margin-top: -50px;
margin-left: 0;
margin-bottom: 0;
margin-left: -50px; I make it a personal rule that if I have two or more definitions of the same property than can be abbrievated, I abbreviate it (ie: I'll write margin-top: 0; but not margin-top: 0; margin-left: 0).

Abbreviations are always written in the order top, right, bottom, left (clockwise). You can also abbreviate other properties, too, so:
background-color: #fff;
background-image: url(gif.gif);
background-position: left center;
background-attachment: fixed;becomes
background: #fff url(gif.gif) left center fixed;and
font-family: verdana, serif;
font-size: 12px;
line-height: 2em;becomes
font: 12px/2em verdana, serif;Note that this abbreviation is different, in that normally you abbrievate properties that all start with the same word, but with font: you can include line-height as well.

Crash1hd
12-17-2003, 08:43 PM
Very cool and useful

Crash1hd
01-05-2004, 05:03 AM
I was wondering when you wrote



margin: -50px 0 0 -50px is an abbreviation of:
code:
--------------------------------------------------------------------------------
margin-top: -50px;
margin-left: 0;
margin-bottom: 0;
margin-left: -50px;
--------------------------------------------------------------------------------


did you mean to have 2 margin-left: or is one of them supposed to be margin-right: ?? ie

margin: -50px 0 0 -50px is an abbreviation of:
code:
--------------------------------------------------------------------------------
margin-top: -50px;
margin-right: 0;
margin-bottom: 0;
margin-left: -50px;
--------------------------------------------------------------------------------

me'
01-05-2004, 11:01 AM
Hehe whoops :o

Just to clarify anyway:

If there's 1 value, that value is applied to all four directions (top, right, bottom, left).
If there's 2 values, the first is applied to the top and bottom, and the second to the left and right.
If there's 3 values, the first is applied to the top, the second to the left and right, and the third to the bottom.
If there's 4 values, the first is applied to the top, the second to the right, the third to the bottom, and the fourth to the left (clockwise).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum