Topic: Positioning Tables With CSS (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=27194" title="Pages that link to Topic: Positioning Tables With CSS (Page 1 of 1)" rel="nofollow" >Topic: Positioning Tables With CSS <span class="small">(Page 1 of 1)</span>\

 
Skatefx
Bipolar (III) Inmate

From: Rochester, Ny
Insane since: Mar 2001

posted posted 12-21-2005 23:30

I am trying to position a table so it centers to the middle of the browser all the time. I know it has someting to do with absolute position, sill can't figure out how to do it right though. Sorry if this is a dumb question but I am just starting back at website design and i'm quite rough around the edges. Thanks.

+ Mike +

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted posted 12-21-2005 23:48

are you talking center as in vertical or horizontal? If it's horizontal then you just set the table to :

code:
align="center"



Or in the css you can center everything with

code:
body{
     margin:0px;
     padding:0px;
     text-align:center;
}


if it's verticle then that has to be done with Javascript. I have it somewhere where Bugs helped me with it. I'll see if I can dig it up if that is what you need.

Now...why not use only CSS? You can do it pretty easily with CSS only stuff. Check out this page for some ideas.

and you can see vertical positioning here or here

Later,

C:\



(Edited by CPrompt on 12-21-2005 23:53)

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 12-22-2005 00:47

please don't use either of the code bits CPrompt posted

did you want horizontal centering, vertical centering, or both?

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted posted 12-22-2005 04:19
quote:

reisio said:

please don't use either of the code bits CPrompt posteddid you want horizontal centering, vertical centering, or both?




well, while it might not be the best way to do it, it would work. However, I am not sure what SkateFX wants so...
Maybe SkateFX can show a mock up of what the desired outcome should look like and we can go from there

Later,

C:\

Skatefx
Bipolar (III) Inmate

From: Rochester, Ny
Insane since: Mar 2001

posted posted 12-22-2005 04:51

Basically I am trying to take a table about 400x600px and postion it in the middle of the screen. I want it to be in the middle no matter what the screen resolution.

+ Mike +

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 12-22-2005 05:46
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
html {
    overflow: hidden;
}
body {
    margin: 0;
    padding: 0;
}
table {
    width: 400px;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 -200px;
    background: #ddeeff;
}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td></td>
            </tr>
        </table>
    </body>
</html>

Skatefx
Bipolar (III) Inmate

From: Rochester, Ny
Insane since: Mar 2001

posted posted 12-22-2005 07:12

Thanks alot reisio. One question though. What purpose does this code serve?

code:
html {
    overflow: hidden;
}



and the two 0's in this:

code:
margin: -300px 0 0 -200px;



Thanks!

+ Mike +

(Edited by Skatefx on 12-22-2005 07:13)

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 12-22-2005 13:47
quote:
Skatefx said:

What purpose does this code serve?

code:
html {
    overflow: hidden;
}



Kills the scrollbar that IE has on by default.

quote:
Skatefx said:

and the two 0's in this:

code:
margin: -300px 0 0 -200px;



That's shorthand for:

code:
margin-top: -300px;
margin-right: 0;
margin-bottom: 0;
margin-left: -200px;


http://www.w3.org/TR/CSS21/box.html#propdef-margin

(Edited by reisio on 12-22-2005 13:49)

Skatefx
Bipolar (III) Inmate

From: Rochester, Ny
Insane since: Mar 2001

posted posted 12-22-2005 18:30

Thanks alot man

+ Mike +



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu