Automatic Centering of "text"

wbmkk

wbmkk

New Member
Hello, I am new to HTML etc so hope you can help.

I'm designing a web page and will design with a1024px wide screen as my default, allowing a bit of space of course around the edge.

I want to create a 'container' for ALL sections of the site, which will automatically align to the centre, but am a bit stuck.

I opted to have the body 100% wide, so this will then provide a hint of colour no matter how wide the container etc is. I wanted this container to be central, no matter how wide the screen resolution is.

I read somewhere that the postion property only works if the parent has position relativr, so did this for the body, but still no luck

I tried float, left and margin options, but still can't get the container to centrtalise.

Any help would be appreciated

Regards !
 
D

denno020

New Member
Maybe if you put your whole page within one table, and have the cells' properties set to center for horizontal alignment?
This is how I make my content stay in the centre, I start with a table, 1x1, and make the content of that cell to be horizontal centre and vertically top. This always works for me. Then I use another table/s to layout my content etc.
eg:
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">Your content then goes here</td>
</tr>
</table>
</body>

You can see the td properties. I'm not sure if there is a special way I'm supposed to paste code in here, so I hope that's alright..

Denno
 
wbmkk

wbmkk

New Member
Thanks for your reply, but I want to use divs etc rather than the so called 'old fashioned way' of tables
 
K

Kikaider

New Member
I believe you have your html something like this:

HTML: 
<body>
<div id="container">
...
...
</div>
</body>

And you can style them in your CSS:

Code: 
body {
text-align: center;  /* For IE only */
}

#container {
text-align: left; /* For IE only */
width: 900px; /* Any value you like */
margin: 0px auto;
}

The most important property here is margin. The value, auto, will let the container always stay in the centre horizontally when you resize the browser window. If you use IE to test your page, the text-align properties must be specified. You may try to remove them and test it on Firefox or Chrome. I wish it helps. :)
 
wbmkk

wbmkk

New Member
Thanks Kikaider

Although I use Firefon on my main computer, the second one, where I have been trying this over the last couple of days is indeed IE, so that's maybe the problem

I'll try again this evening
 
PixelPusher

PixelPusher

Super Moderator
Staff member
You can use positioning but you just need to be aware of how the rules work. You have the idea somewhat.

When using relative position, an item will position itself relative to its previous neighbor.

When using absolute, an item will position itself (based in the top, right, bottom, left values) to its parent element. If no parent element exists, or a position value other than static is not declared, then it will be the html tag.

When using fixed position, an item will position itself (based in the top, right, bottom, left values) to the browser frame, no matter what.

That being said, you can use relative or absolute positioning to center align a "container" division. The CSS would look something like this:
Code: 
div.conatiner {
width:900px;
height:auto;
position:relative;
left:50%;
margin:0 0 0 -450px;
}

The code above sets the left value to 50%. However, the focal point for this value (left) is the left edge of your "container" div. Meaning the left edge will be dead center all the time. This wont work because we want the center point of the "container" div to be in the center. So you add a negative left margin that is half the width of the "container" div, hence offsetting the left edge of the "container" div and putting the center point in the center of the browser window no matter what size.

Using margin:auto (mentioned by Kikaider) is not a bad method either. You just mentioned positioning, so I thought I would explain how its done. All in all, its purely a personal preference. One thing is for sure, no matter which choice, you must declare a width for either method to work.
 
wbmkk

wbmkk

New Member
Thanks PixelPusher

Brilliant !

Brilliant !!

Brilliant !!!

Brilliant !!!!

Brilliant !!!!!

Brilliant !!!!!!


Brilliant !!!!!!!

That worked perfectly

So easy .. when you know how

I don’t really understand why it works, but who cares .. it does

Many thanks !!!!!!!!
 
orangecopper

orangecopper

New Member
Always Start from the Outermost table, And then the one inside it, and align the parent to center and followed by the ones inside, that would align the stuff correctly.

and rather than using Pixels i suggest you to start using % cos that would readjust at times of resolution changing

cheers
Joshu
 
PixelPusher

PixelPusher

Super Moderator
Staff member
orangecopper said:
Always Start from the Outermost table, And then the one inside it, and align the parent to center and followed by the ones inside, that would align the stuff correctly.

and rather than using Pixels i suggest you to start using % cos that would readjust at times of resolution changing

cheers
Joshu
Click to expand...

Joshu,

Tables? Come on really? Unless you are referring to a tabular data layout there should not be any tables at all. Also, it doesn't matter whether you use percentages or pixels, both will readjust correctly (besides the positioning method I mentioned below uses both).
 
You must log in or register to reply here.
Top