PDA

Click to See Complete Forum and Search --> : Web layout in the center off the screen?

pkng
06-08-2009, 04:29 PM
Hi!

I want to have my webpage in the center om the screen. Should I use plain HTML like <center> and then create different parts for text and images with <table>? But I would also like to use <div> with absolute positions and layers within this <table>!?

Is there a better way to create a layout that is in the center of the screen where I also can use <div> and so on?! I haven't done much webdesign for some time and I would like to know new standards that are used today.

Appreciate som help!

Thanks!
Shorts
06-08-2009, 04:39 PM
Yes, there is.

Don't use <center> or <table>

The way to go is having a container DIV something like:


...
<style type="text/css">
body { text-align:center; }
#container { margin:0 auto; position:relative; text-align:left; width:800px; }
</style>
</head>
<body>
<div id="container">PAGE</div>
...


The margin:0 auto, 0 is for the top and bottom margin, auto is for left and right, that will position it in the middle. The position:relative will allow you to use position:absolute inside that DIV which will make it relative to it.

More ideas:
http://css.maxdesign.com.au/floatutorial/tutorial0802.htm
pkng
06-08-2009, 04:52 PM
Interesting! Thanks! I'm going to try this and seek for more info about this.
pkng
06-09-2009, 03:02 AM
EDIT: Ooops! Sorry, I wrote wrong </title>! Now it works in Inter Explorer!

Hi again!

I used the code above, but it didn't work in Internet Explorer 6!? It worked well in Firefox. I thought this simple CSS code would work i all browsers? What could be wrong and how should it be done tto work in all browsers? Thanks!

<html>

<title>test</test>

<head>
<style type="text/css">
body { text-align:center; }
#container { margin:50px auto; position:relative; text-align:right; width:800px; }
</style>
</head>
<body>
<div id="container">PAGE</div>

</body>

</html>
Shorts
06-09-2009, 01:34 PM
Hehe, awesome. Good to hear too.