CSS/XHTML Centering [Archive]

brau

October 17th, 2004, 11:48 PM

I'm building a site in XHTML and CSS for a friend. I'm using embedded tables for the layout and it's working fine.

I need to know if there's a way to center the entire page in the browser window (like this forum is) without using the align="center" (which this forum uses), which would invalidate it since I'm using the XHTML Strict DTD.

I don't think it can be done with CSS positioning, but my understanding of positioning is not very in-depth, since tables with defined widths for cells do it for you. Eventually, I need to really get down to it and read through my CSS and XHTML books again.

Suggestions? Thanks in advance.

teiz77

October 18th, 2004, 12:13 PM

Why are you using the strict doctype? That is a real pain in the ***.

Her is a positioning example... both xhtml and css are fully w3c compliant.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>
<body>
<div id="horizon">
<div id="content"> foo </div>
</div>
</body>
</html>

maybe this is a start...

deronsizemore

October 18th, 2004, 01:36 PM

In your container Div you could just use margin: auto;

#container {
margin: auto;
}

But I believe you'll still have to use text-align: center; or IE wont recognize it.

ditt0

October 18th, 2004, 04:21 PM

Something like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background-color: #f5f5f5;

}
#container{
margin-right:150px;
margin-left:150px;
color:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-align:justify;
}
#content{
background-color:#AEC8DB;
padding:10px;
}
#banner{
background-color:#336666;
height:70px;}
#footer{
clear:both;
background-color:#336666;
height:70px;}
</style>
</head>
<body>
<div id="container">
<div id="banner"></div>
<div id="content">Text text text</div>
<div id="footer"></div>
</div>
</body>
</html>

brau

October 19th, 2004, 07:29 AM

I'm using Strict because...well...if it's honestly the "future" of HTML, like W3C says - then I see it as my duty to obey. Besides I like the order of it.

Thanks for your suggestions.

My friend said he doesn't really care if it's centered or not now. So, I've avoided that.

However, I do want to get writing tableless XHTML - that is, using DIVs exclusively. I figure I'll need to perfect my understanding of CSS positioning.

Or, if anyone knows of any, could someone direct me to some tutorials or something that discuss tableless XHTML/CSS layout?

Looks like it may be time to buy some more books. :P

ditt0

October 19th, 2004, 09:04 AM

I suggest u try these:

http://www.websitetips.com/css/index.shtml#cssp
http://www.thefixor.com/code_css_01.php
http://www.w3.org/2002/03/csslayout-howto
http://www.csscreator.com/links/linkspage.php

And regarding the books..practice is your best tutor:) Take the html and css code and play with it..experiment anything that comes to your mind and where you feel stuck, google things up.

[m]

October 19th, 2004, 11:52 AM

(this is just a cleanup of previous posts, to make it more clear)

To only center on the horizontal axis:

body{
margin: 0;
padding: 0;
text-align: center; /*ie hack */
}
#container{
text-align: left; /*ie hack */
margin: 0 auto;
}

For absolute middle (on both axis):

container {
position: absolute;
left: 50%;
height: 50%;

width: 500px;
height: 400px;

margin-left: 250px; /* half of the width */
margin-top: 200px; /* half of the height */
}

As for links, this should get you started:

http://www.roderickhoward.com/cssdirectory/
http://www.simplebits.com/notebook/2004/06/21/bonanza.html
http://www.alistapart.com/

brau

October 20th, 2004, 02:48 AM

']

container {
position: absolute;
left: 50%;
height: 50%;
}

I think this is the key. Thanks [m] and ditt0bx for the links! I'll get into this as soon as I get home from work at 8AM. :)

[m]

October 20th, 2004, 11:04 AM

Oh, and please speak softly when talking about XHTML and a table layout. Those things are enemies.

If you are going for a table layout, forget about the DTD. It doesn't do anything really. (other then forcing IE into standard compliance mode, with get you in more trouble if you don't know what you're doing.)

ditt0

October 20th, 2004, 05:06 PM

well.., xhtml and tables may not be "best friends", but they are not enemies(yethttp://kirupaforum.com/forums/images/smilies/happy.gif)

http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/#gl-table-markup

[m]

October 20th, 2004, 05:19 PM

Tables should be used to mark up truly tabular information ("data tables"). Content developers should avoid using them to lay out pages ("layout tables"). Tables for any use also present special problems to users of screen readers (refer to checkpoint 10.3).

Some user agents allow users to navigate among table cells and access header and other table cell information. Unless marked-up properly, these tables will not provide user agents with the appropriate information. (Refer also to guideline 3.)

I never said xhtml and tables, but tables for layout. :)

If you're going for xhtml, that means you are willing to pay attention to things like semantics and accessibility. layout tables hinder that greatly, and is a kb hog.

See google why tables are bad. (for layout)

ditt0

October 20th, 2004, 05:33 PM

brau

October 20th, 2004, 07:45 PM

Well, I've noticed that.

What initially has appealed to me about tables is their rigidity - defined sizes and cascading, if you will, structure - that is, embedded tables to define layout with styles applied for color/borders/size/etc.

That was HTML 4.01. Now, with XHTML and the lack of the "align" attribute - you're almost forced away from tables it seems.

Thanks again for the links, etc. I'll be looking into this. :thumb:

[m]

October 20th, 2004, 08:57 PM

I can only agree with you. Further more, I think divs coding is challenging and sort of addictive:) And since divs started to be used even for tabular data, probably tables will be somehow forgotten, if not deprecated.
Ooh, i sure hope not!

[history lesson coming up!]

The original reason that internet exists today has (in part) to do with tables. First there war this army network thing called "ARPAnet" wich evolved in a way for large colleges and universities to communicate with eachother. One of the most important things was to send experiment data to and form uni's.

You know how that data was represented? Jup. Tables.

The simple fact that what they send was tabular data. It was neccesairy to have a construct like <table> in html, because it was pretty useless otherwise.

[lesson end]

Fast forward to now, and the internet has grown considerably. Communicating experiment data is now one of the things that's kinda got left behind. But that doesn't mean it's not useful anymore! Graph data for instance.

Just don't use it for layout, use for what it was supposed to do. Display tabular data.

(And forms. but I'm not gonna go there. It's bad, but **** handy. Stupid formd)