Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I get a table in the middle of the page using css 1

Status
Not open for further replies.
oneil1

oneil1

Technical User
Jan 12, 2005
32
JM
I think this is a very simple problem but I just can't seen to figure it out.

> I just can't seem to get a table in the middle of the web page using css.
I have tried using the horizontal-align and vertical-align attributes but can't get them to work.

I realy need some help here.

>>> PS// the objective is to get my web site in the middle of the browser window at resolutions larger than 800x600. I'm trying this by putting each page into a main table and putting that table in the middle of the page.
 
Sort by date Sort by votes
I usually tell people to avoid tables for site layouts. I won't today, though.

You'll need to do something like this for the horizontal centering:

Code: 
<style type="text/css">
/* for stupid browsers */
body { text-align: center; }

/* for good browswers */
#special { margin: 0 auto; }
</style>

...

<body>
<table id="special">
...
</table>
</body>

Vertical centering can not be easily achieved (x-browser) without some JavaScript.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
hey thanx 4 the quick reply. But how do you sugget that I go about "middling" my site? I have got it centered [thanx again] but how does the javascript thing work to get it in the middle?
 
Upvote 0 Downvote
Do you have an explicit width set for the main table?

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
How to centre a div in a page?

#half {
position:absolute;
width:100px;
left:50%;
top:100px;
margin-left:-50px;
}

The div must not occur in any container div that has positioning on it, either relative or absolute, putting at the bottom of the page, right above <body> works well.

(Or)
You can have three divs #left, #centre and #right with styles
#left { width: 33%; } #centre { width: 33%; } #right{ width: 33%; }

(Or)

#YOURdiv {
margin: 0 auto;
text-align: center;
}

The margin property sets left and right margins to equal amounts based on available space. The text-align part is for IE's benefit.

 
Upvote 0 Downvote
>> RE: explicit window

No cLFlava. The main table does not have an explicit width.
 
Upvote 0 Downvote
i'm pretty busy today, but i'll try to get to building you an example at some point...

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
looking forward to it. Thanx. i'm a bit busy myself
 
Upvote 0 Downvote
As promised:

(Not the prettiest solution, but whattayagonnado?)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<style type="text/css">

body {
  text-align: center;
}

#special {
  margin: 0 auto;
  border: 1px solid #ccc;
  border-collapse: collapse;
  position: absolute;
}

</style>

<script language="javascript"><!--
function middlePos() {
    var t = document.getElementById('special');
    
    // get the height and width of the main table
    var tableHeight = t.scrollHeight;
    var tableWidth = t.scrollWidth;
    
    // get the height and width of the window
    var availHeight = getWindowHeight();
    
    // set the top-most point of the table
    t.style.top = (availHeight / 2) + "px";
    t.style.marginTop = -(tableHeight / 2) + "px";   
    
    // set the left-margin for Micro$oft
    if (navigator.appName.indexOf("Microsoft") > -1)
        t.style.marginLeft = -(tableWidth /2) + "px";
}

function getWindowHeight() {
  var windowHeight;
  
  //Non-IE
  if( typeof( window.innerHeight ) == 'number' ) {
    windowHeight = window.innerHeight;
    
  //IE 6+ in 'standards compliant mode'
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    windowHeight = document.documentElement.clientHeight;
    
  //IE 4 compatible
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    windowHeight = document.body.clientHeight;
  }
  
  return windowHeight;
}

onload = middlePos;
onresize = middlePos;
--></script>

</head>

<body>

<table id="special"><tr>
<td>Text goes here</td>
<td>More text goes here.<br /><br /></td>
</tr></table>

</body>
</html>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
I'm trying your examples mexicomeat, but i'm not understanding your suggestions to well.

I'm kinda new to this thing in a way.
 
Upvote 0 Downvote
Just one word for you cLFlava. GENIUS!!! Works perfectly. Thanx much!

God bless!!!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
820
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
224
lmcate
lmcate
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
816
pmonett
pmonett

Part and Inventory Search

Sponsor

Back
Top