Table problems

@DaanOMay 02.2005

Hey people. I’m just about to put my website online but first i need to fix that one last bug and i just can’t fix it or find a solution. (even though i did search on google and html sites)

My site basically consists of a table with 5×5 icons (100×100 pixels for each icon, cellspacing is 4 pixels) that are buttons. Because i want the website to be in the middle of the page, i used align=center for the table but that doesn’t put it right in the center of the browser, but only in the center horizontically. So i added an empty row in the table to make it go down a bit as a whole. It looks fine now at 1280×960. I tested it at 1024×768 as well, but then a small part of the website is so low that a scrollbar is activated and you need to scroll to see the lowest buttons completely and obviously, that’s not what i want.

Just removing the empty row is not an option since i doesn’t look good at a higher resolution, i just want the table to be in the middle.

I was wondering if there’s a way to put tables right in the middle (both horizontically and vertically). Or else (but i’d prefer the other, more clean solution) would it be possible to somehow scan the resolution that is used and adjust the empty row (make it bigger) accordingly.

I have tried fiddling around with relative (in percentage instead of pixels) sizes of cells but that didn’t go nice at all. ? Thanks in advance for the help, Daan

to post a comment

HTML

13 Comments(s) _↴

@zer0May 02.2005 — #First off, take out the align and use style. Align is deprecated. To align it horizontally, use style="text-align: center". To align it vertically, use style="vertical-align: middle".

@DaanOauthorMay 02.2005 — #That doesn't work for me. I've tried to add it at several places but well, no good. Here's my table.

<body>

<table border="0" cellspacing="4" cellpadding="0" align="center">

<tr><td width="100" height="100"></td></tr>

<tr>

(row)

</tr>

<tr>

(row)

</tr>

<tr>

(row)

</tr>

<tr>

(row)

</tr>

<tr>

(row)

</tr>

</table>

</body>

Each row has five 100x100 pixel icons.

@zer0May 02.2005 — #Are you using a CSS-supporting browser?

@DaanOauthorMay 02.2005 — #I defined an external CSS file and it works just fine so i guess. I'm using Mozilla Firefox, the latest version as far as i know. Where would i put the tag then?

@zer0May 02.2005 — #

[CODE]<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <body>
 <table style="height: 100%; width: 100%; text-align: center; vertical-align: middle">
 <tr>
 <td>
 OMFG
 </td>
 </tr>
 <tr>
 <td>
 OMFG
 </td>
 </tr>
 <tr>
 <td>
 OMFG
 </td>
 </tr>
 <tr>
 <td>
 OMFG
 </td>
 </tr>
 </table>
 </body>
 </html>[/CODE]

@DaanOauthorMay 02.2005 — #Tried that, and it spreads all the icons out over the page. I want them to be grouped in the middle, with 4 pixels in between. Sorry man ?

@zer0May 02.2005 — #Try using that style in a div and add the table without the style.

@DaanOauthorMay 02.2005 — #Still nothing. To be sure i did it correct, here's what i did

<html>

<body>

<div style="height: 100%; width: 100%; text-align: center; vertical-align: middle">

<table >

<tr>

<td>

OMFG

</td>

</tr>

<tr>

<td>

OMFG

</td>

</tr>

<tr>

<td>

OMFG

</td>

</tr>

<tr>

<td>

OMFG

</td>

</tr>

</table>

</div>

</body>

</html>

@zer0May 02.2005 — #I really don't know what to tell you. It doesn't work for me either. Unless... Try adding a table without the style but with the pictures into the table with the style but without anything else. If this doesn't work, I'm crashing for the night.

@DaanOauthorMay 02.2005 — #Nope, doesn't work. :/ Just tested the div method in IE and there it at least aligns things horizontically so i'll fiddle around with that some more. Thanks for all the help and good night.

@zer0May 02.2005 — #All right, sorry. I give up. I will think about it tomorrow, though. I know this cannot be impossible.

@DaanOauthorMay 02.2005 — #http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Just found that and i think it means that it should all be possible. My HTML is not that good so i'm having trouble understand all of it but i'm fiddling around with things

@DaanOauthorMay 02.2005 — #<html>

<head>

<style type="text/css">
body, html {height: 100%;}

#outer {height: 100%; overflow: hidden;}

 #outer[id] {display: table; position: static;}
 
   #middle {position: absolute; top: 50%;}
   #middle[id] {display: table-cell; vertical-align: middle; position: static;}
 
   #inner {position: relative; top: -50%} 
  </style>

</head>

<body>

<center>

<div id="outer">

<div id="middle">

 <div id="inner">
   any text<br>
   <b>any height</b><br>
   any content, for example generated from DB<br>
   everything is vertically centered<br>
   </div>
  </div>

</div>

</center>

</body>

</html>

That little piece of code seems to center things vertically, but it adds a scrollbar, trying to get rid of that.

Edit: Started off with 99% height for the size of the whole thing and the scrollbar is gone!

Edit2: Just applied this code to my own website and tested it in multiple resolutions and it worked! God i'm happy now. Thanks for all the help, hope you slept well ?

Also in #HTML _↴

"nowrap" or "nobr" in a cell doesn't work HTML extention help please Email Redirects?

Success!

Help @DaanO spread the word by sharing this article on Twitter...

Tweet This

Table problems

13 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Table problems

13 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #HTML _↴