www.webdeveloper.com
Results 1 to 5 of 5

Thread: Web layout in the center off the screen?

  1. #1
    Join Date
    Jul 2006
    Location
    Sweden
    Posts
    190

    Web layout in the center off the screen?

    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!
    Last edited by pkng; 06-08-2009 at 03:39 PM.

  2. #2
    Join Date
    Sep 2008
    Posts
    408
    Yes, there is.

    Don't use <center> or <table>

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

    HTML Code:
    ...
    <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/floatuto...torial0802.htm
    Mullanaphy!
    http://www.mullanaphy.com/

    Unless code is provided or an exact example is requested I think I'm going to start using psuedo code from now on...

    Also, I freelance as well. Inquire within!

  3. #3
    Join Date
    Jul 2006
    Location
    Sweden
    Posts
    190
    Interesting! Thanks! I'm going to try this and seek for more info about this.

  4. #4
    Join Date
    Jul 2006
    Location
    Sweden
    Posts
    190
    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>
    Last edited by pkng; 06-09-2009 at 02:16 AM.

  5. #5
    Join Date
    Sep 2008
    Posts
    408
    Hehe, awesome. Good to hear too.
    Mullanaphy!
    http://www.mullanaphy.com/

    Unless code is provided or an exact example is requested I think I'm going to start using psuedo code from now on...

    Also, I freelance as well. Inquire within!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles