Web Analytics Made Easy - StatCounter How to centre a <div> in NS6 using CSS? - CodingForum

Announcement

Collapse
No announcement yet.

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

Collapse
X
Collapse
 
  • Page of 2
  • Filter
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • #1

    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
    Tags: None
  • #2
    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

    Comment

    • #3
      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%;
      }

      jasonkarldavis.com

      Comment

      • #4
        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

        Comment

        • #5
          Hi

          I just tried

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

          and this worked in NS6

          Comment

          • #6
            oops sorry didn't read the whole thing!!!!!

            Comment

            • #7
              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.
              jasonkarldavis.com

              Comment

              • #8
                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

                Comment

                • #9
                  Simple answer:

                  <div style="text-align:center;">Content</div>
                  Check out the Forum Search. It's the short path to getting great results from this forum.

                  Comment

                  • #10
                    css

                    vertical-align:middle

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

                    this is a good source for css:
                    404 - Page not found | W3Schools.com
                    http://www.w3schools.com/css/css_reference.asp
                    Sorry! We can't seem to find the resource you're looking for


                    Comment

                    • #11
                      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.
                      jasonkarldavis.com

                      Comment

                      • #12
                        ...to center a DIV horizontally: position: relative; margin-left: auto; margin-right: auto;

                        Comment

                        • #13
                          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

                          Comment

                          • #14
                            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.
                            jasonkarldavis.com

                            Comment

                            • #15
                              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.
                              Check out the Forum Search. It's the short path to getting great results from this forum.

                              Comment

                              Previous 1 2 template Next
                              Working...
                              X