Universally Centered Webpage (for the most part)

Discussion in 'Software' started by Draith, May 11, 2004.

  1. Draith

    Draith Private E-2

    Hey all,

    It's been a while since i've last posted here. So i'll make up for it with a web programming tip.

    Recently I've been updating many of my pages, switching over to XHTML and CSS2. For those not quite in the know, XHTML is essentially HTML version 5, and a stepping stone to using XML as the new web standard. CSS2 is the second version of CSS - Cascading Style Sheets - basically a nice little formatting code that's a bit more intricate and dynamic than html.

    Well i came across a major problem when i was switching over, mainly that i had a number of my pages set up to be vertically centered in the browser window - although i did it through illegal coding probably ;) None the less, xhtml is much more strict in forcing proper coding structure, and not only that, the some attributes such as height were nixed out of xhtml, which i used for my centering trick. So i searched long and hard for a solution, since some of my pages are more artsy, and their content is less than a browser window's length, and i wanted them properly centered no matter how you resized the window. No one posted any tips on any sites i searched, so after lots of tweaking and testing, here's the trick i came up with using some small css and tables.

    I broke down the centering to the most basic code needed to perform the trick, here it is:

    Code:
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Perfectly Centered</title>

</head>
<body style="height: 100%; margin-top: auto; margin-bottom: auto;">

<table align="center" style="height: 100%; vertical-align: middle;">
<tr><td>

Perfectly Centered Text

</td></tr>
</table>

</body>
</html>
    You'll notice that no matter what size you set your window to, it will still sit exactly in the middle...unless you're using an older browser that doesn't support css or xhtml.

    ciao all!
    o Draith
     
    Draith, May 11, 2004
    #1

MajorGeeks.Com Menu

Downloads All In One Tweaks \ Android \ Anti-Malware \ Anti-Virus \ Appearance \ Backup \ Browsers \ CD\DVD\Blu-Ray \ Covert Ops \ Drive Utilities \ Drivers \ Graphics \ Internet Tools \ Multimedia \ Networking \ Office Tools \ PC Games \ System Tools \ Mac/Apple/Ipad Downloads

Other News: Top Downloads \ News (Tech) \ Off Base (Other Websites News) \ Way Off Base (Offbeat Stories and Pics)

Social: Facebook \ YouTube \ Twitter \ Tumblr \ Pintrest \ RSS Feeds