Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Jun 2002
    Location
    London & Oxford
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to centre a <div> in NS6 using CSS?

    I'm having a few woes with Netscape 6 and CSS. I want to centre a <div> horizontally in the centre of the screen but it won't budge from the left hand side.

    I want to do this using CSS and not by adding align="center" attributes because this will be an XHTML page.

    How can this <div> be centred on the screen in NS6? Also, how can the <div> be made to fill the whole height of the screen like it does in IE?


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>

    <style>
    <!--
    body {
    height: 95%;
    width: 95%;
    text-align: center;
    padding: 0px;
    background-color: #cccccc;
    }

    div.centerdiv {
    text-align: center;
    }

    div.content {
    background-color: #ffffff;
    width: 600px;
    height: 98%;
    text-align: left;
    padding: 6px;
    border: solid 1px #003399;
    }
    //-->
    </style>
    </head>

    <body>

    <div class="centerdiv">
    <div class="content">
    text goes here.
    </div>
    <div>

    </body>
    </html>
    As easy as 3.1415926535897932384626433832795028841

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    paris, france
    Posts
    1,216
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ant specificy help u on that but if you download topstyle lite
    http://www.bradsoft.com/topstyle/index.asp
    it has a table whee you can select the browser you wna tit to be compativle with (+ an all safe table!) and you get all the options there.
    photoshop too expensive? use the GIMP! www.gimp.org

  • #3
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    An example of a 50% width div centered, with its height being the full rendering window:


    html, body {
    height: 100%;
    margin: 0;
    }

    div {
    position: relative;
    left: 25%;
    width: 50%;
    height: 100%;
    }


  • #4
    New Coder
    Join Date
    Jun 2002
    Location
    London & Oxford
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    jkd, that code does what you say but it still doesn't help me get my <div> centered. Is it possible to have a <div> with width 600px centred on the screen rather than have to use a relative width?

    Help! This is driving me mad!
    As easy as 3.1415926535897932384626433832795028841

  • #5
    New to the CF scene
    Join Date
    Jun 2002
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    I just tried

    <div align="center">text</div>

    and this worked in NS6

  • #6
    New to the CF scene
    Join Date
    Jun 2002
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oops sorry didn't read the whole thing!!!!!

  • #7
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    I'm not sure if you can center exactly with CSS specs when using non-relative units.

    px are perhaps the worst units to use for web pages (this is according to W3C), because they don't scale when someone has a 21" monitor at an ungodly resolution, and when someone has a 15" monitor at 800*600.

    I always try using % and em units when designing nowadays because of this fact...

    To center align block level elements with absolute widths, I think XHTML 1.0 and better are not your choice. Sorry.

  • #8
    New Coder
    Join Date
    Jun 2002
    Location
    London & Oxford
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, thanks jkd. I thought that would be the case but wasn't sure. Back to the drawing board I suppose...
    As easy as 3.1415926535897932384626433832795028841

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Simple answer:

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

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    Dallas, Texas
    Posts
    188
    Thanks
    0
    Thanked 0 Times in 0 Posts
    css

    vertical-align:middle

    should be valid for nn4 and up, but i haven't tried it.

    this is a good source for css:
    http://www.w3schools.com/css/css_reference.asp


  • #11
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by Roy Sinclair
    Simple answer:

    <div style="text-align:center;">Content</div>
    That only centers inline elements inside the DIV. They want to center the DIV itself (which is a block-level element).

    As for veritical-align, that is the vertical placement, and has nothing to do with centering horizontally.

  • #12
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ...to center a DIV horizontally: position: relative; margin-left: auto; margin-right: auto;

  • #13
    New Coder
    Join Date
    Jun 2002
    Location
    London & Oxford
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    MCookie is on to something there! I have amagend to acheive the look I was after but now have to get it looking the same in NS4.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>

    <style>
    <!--

    html,body {
    margin: 0px;
    margin-top: 3px;
    height: 96%;
    width: 98%;
    background-color: #cccccc;
    }

    div.test {
    position: relative;
    width: 600px;
    height: 100%;
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    border: solid 1px #003399;
    padding: 8px;
    }

    //-->
    </style>
    </head>

    <body>

    <div class="test">test</div>

    </body>
    </html>
    As easy as 3.1415926535897932384626433832795028841

  • #14
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by MCookie
    ...to center a DIV horizontally: position: relative; margin-left: auto; margin-right: auto;
    Ah, tricky! I guess you do learn something new everyday.

    Thanks for sharing that.

  • #15
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by jkd:
    That only centers inline elements inside the DIV. They want to center the DIV itself (which is a block-level element).
    I tested the code I posted, it works in IE, Netscape 4 and Mozilla 1.0 and worked as requested.

    To reiterate:

    <div style="text-align:center;">Content</div> does the trick. While you might think this should cause the text inside the div to be centered it actually centers the div itself within the containing block.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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