Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: Absolute center

  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    51° 03' -78" N -114° 05' 72" W
    Posts
    617
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Absolute center

    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>)

    Code:
    <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

    Code:
    <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>

  • #2
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    1. You can't say javascript: within a CSS declaration block.
    2. Yes, there's an easier way of doing it, if you know the exact dimensions of the block.
    Code:
    #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.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    51° 03' -78" N -114° 05' 72" W
    Posts
    617
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I will have a look at it tommorrow as I am heading off to work but better explinations are always welcome

  • #4
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Location
    51° 03' -78" N -114° 05' 72" W
    Posts
    617
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok that I understand so your saying a cube that is 100 x 100 would be

    Code:
    #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?

  • #6
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    margin: -50px 0 0 -50px is an abbreviation of:
    Code:
    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:
    Code:
    background-color: #fff;
    background-image: url(gif.gif);
    background-position: left center;
    background-attachment: fixed;
    becomes
    Code:
    background: #fff url(gif.gif) left center fixed;
    and
    Code:
    font-family: verdana, serif;
    font-size: 12px;
    line-height: 2em;
    becomes
    Code:
    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.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #7
    Regular Coder
    Join Date
    Jul 2002
    Location
    51° 03' -78" N -114° 05' 72" W
    Posts
    617
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Very cool and useful

  • #8
    Regular Coder
    Join Date
    Jul 2002
    Location
    51° 03' -78" N -114° 05' 72" W
    Posts
    617
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;
    --------------------------------------------------------------------------------

  • #9
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hehe whoops

    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).
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •