Centering with CSS?

Forums: Web Development, Css
Email this Topic • Print this Page

I'm trying to make a webpage with no tables and only using CSS to line things up. I'm looking for a way to center a page and I can't seem to find a way without a table. I'm using position:absolute and specifying the top and left for all the areas. Any input would be helpful, thanks!

Dave

Topic Stats
Top Replies
Link to this Topic

Type: Discussion • Score: 2 • Views: 3,902 • Replies: 27

No top replies

Hi dwk,

Either wrap the whole page's content with:

Code:<div style="text-align: center;"> </div>

Or put this code in <body>:

Code:<body style="text-align: center;">

'text-align: center;' will center all the inline content of any block-level element. The element itself still occupies all of the available width.

Now for the complicated stuff (unrelated to your question, most likely)...

If ya wanna center block-level elements themselves, not their content, it's only possible when the block-level element has a width that's less than the available horizontal space. By default, all block-level elements (except <table>, which is a special case) expand to fill the entire available horizontal space, even when they don't need to on behalf of their content.

To help you get the feel for it, you should prolly set temporary colored borders on the block-level element to see what's happening in various browsers.

0 Replies

You can also just add the text align to the class for your div.

0 Replies

yeah, or add it to the class for your body.

0 Replies

Well, the way I have lined the page up is with divs. There are 4 div tags with information in them. A top banner, a left menu, a main area and the a bottom banner. They contain text and a background. Each one is layed out with a left and top value and positioning is absolute. What I am trying to do is make those divs center.

I have tried wrapping the whole page with <div align="center"> and <center> tags which, if they worked, would have been so simple but because they are positioned absolute don't want to move.

I'm thinking I will have to change my positioning value and some how work around that?

Thanks for the info so far hope to hear more Very Happy

0 Replies

Do you want to align your test or your divs?

You can't just use absolute positioning and still have it come out centered in different drowser resolutions.

0 Replies

Craven's right. Absolute positioning = absolute.

A thought, though... Craven, is it possible to position multiple things relative to a single point on a layer? I use CSS positioning as little as possible so I don't recall if there might be a way.

If it's doable, you could position all your content relative to the top left corner of a div of a specified width (say 780px). You could then center that div itself (rather than just its content) by setting the body to align center.

0 Replies

That will still have a determined width. There are two ways to do what he wants.

Use Javascript to dynamically write the positioning or use an old CSS trick:

Send the Div to the center of the page then give it a negative margin, like so:

Code:

#the div {

	position:absolute;

	left:50%;

	width:500px;

	margin-top:50px;

	margin-left:-266px;

	padding:15px;

	}

That will do what he wants (he has to tinker with the numbers of course.

But there is still a downside. The centered div is not liquid. It has to have a specified width.

To get truly liquid centering you need to dynamically write the positioning based on the browser resolution.

0 Replies

Thanks for the input guys! Right now all my divs have a specified width to work with the background so I guess its off to Javascript to get things working argh Razz

I'm looking for that dynamic centering of the divs working the same way as the align="center" value does.

Thanks again for the input!

On a side note how do you usually line your pages up Monger?

0 Replies

dwk,

In that case why not position the background and work off the center for every absolute position using the method described above?

I have an old javascript for the javascript option of you need it but the javascript option will loook horrible for users with Javascript turned off. Using the negative margin might actually work for you and you won't have to resort to JavaScript.

0 Replies

Craven, you are my savior! Razz

With lining it up left at 50% then specifying the margin it created the effect that I wanted!

Thanks again! Very Happy

Dave

0 Replies

Good to know. Make sure to get the pixels right. You should make the negative margin like this:

X = total width of the div

P = padding

(X / 2) + P + 1 = negative margin

The 1 represents the border pixel.

If you ahve any other web development questions you know where to ask. ;-)

0 Replies

Heres the finished product Very Happy

Website

0 Replies

Alright, so I've got my page all lined up now!! Very Happy

What i'm looking to do is have a scrolling text area in the main section. If there lots of text it gets cut off or goes further down then the main area. Any ideas on how to create a see through text area that scrolls without moving away from the CSS layout? I'm thinking flash or javascript to pull it off but maybe you guys know of a better way to do it? Searched for a simple HTML tag to do it but didn't turn up anything Confused

Thanks again,
Dave

0 Replies

Okay, i've been messing around with textarea and CSS styles with it and I can almost get the affect that I want. Although the textarea doesn't want to work in a div.. weird. Anyway, i'm gonna keep pluggin away on it here.

0 Replies

I'd not go with a text area, I'd use an inline frame. If you want I can give you a script for a really nice scrolling inline frame.

0 Replies

Well, I got the textarea to work kinda

Transparent textarea

But send me your inline frame script anyway. I found that the CSS scroll-bar properties don't work in browsers other then IE. Does inline work any better?

0 Replies

LOL, when you said "scrolling" I thought you wanted it to scroll automatically.

BTW, it's a "kinda" because you are doing the negative margin wrong. You need to take into account the div margins and border.

But isntead of positioning the text area why not just put it in a positioned DIV and just specify the textarea's "look" through the CSS?

0 Replies

Hrm, not sure what you mean by doing the negative margin thing wrong. Here is what I use to line up the main area.

Code:



div.mainPage {	position: absolute;

		top: 100px;

		left: 50%;

		margin-left: -300px;

		width: 580px;

		height: 350px;

		font-size: 16px;

	     }

When I put the textarea in the mainPage div it doesn't show up/work. So I put the layout info into the textarea tag as follows.

Code:



textarea	{

		font-family:  Verdana, Microsoft Sans Serif, Arial;

		color: #999999;

		background-color:transparent;

		position: absolute;

		top: 100px;

		left: 50%;

		margin-left: -300px;

		width: 630px;

		height: 285px;

		font-size: 16px;

		border-top : none; 

		border-bottom : none;

		border-left : none; 

		border-right : none;

		scrollbar-face-color: #004174;

		scrollbar-highlight-color: #CCCCCC;

		scrollbar-shadow-color: #666666;

		scrollbar-3dlight-color: #004174;

		scrollbar-arrow-color: #CCCCCC;

		scrollbar-track-color: #004174;

		scrollbar-darkshadow-color: #004174;

	}

It works but I would rather line things up with divs Rolling Eyes

Another problem I am going to run into with textarea is putting links in. Because it doesn't support HTML it looks like i'm going to have to move to iframes.

0 Replies

If you want linsk etc you definitely need to move to Iframes.

When I said the negative margin is not correct it's because you have an even number. But it's no biggie, it just means you are off by one pixel.

If you want to do it perfectly use the math I posted: (width/2) + margins + border (at least 1 pixel).

0 Replies

Centering with CSS?

Related Topics

Quick Links

My Account

able2know