Loading ...
Sorry, an error occurred while loading the content.

Re: [NH] Re: CSS - Center a

Expand Messages
  • Don Passenger
    Mike, the red square is vertically centered on the blue background, but the blue isn t centered on anything as near as I can figure ... No idea what you were
    Message 1 of 7 , May 3, 2002
    • 0 Attachment
      Mike, the red square is vertically centered on the blue background, but the
      blue isn't centered on anything as near as I can figure ...
      No idea what you were trying to do.

      > If you check the link I provided, you will see a simplistic version
      > that uses JavaScript and does what I want. My original reply mangled
      > the link, so here it is again:
      > http://websites-graphics.biz/centered.htm
    • wilkinsonm
      My goal was to center the blue square horizontally within the browser window. Since this technique use CSS positioning, I expect it will only work in IE5+ and
      Message 2 of 7 , May 3, 2002
      • 0 Attachment
        My goal was to center the blue square horizontally within the browser
        window. Since this technique use CSS positioning, I expect it will
        only work in IE5+ and NS6.

        If you resize your browser window, then click on Refresh, hopefully
        you will see that the blue square becomes centered. If not, I would
        appreciate your feedback. It would be helpful to know what browser
        and version you're using.

        Thanks!

        Mike Wilkinson
        http://websites-graphics.biz

        "Don Passenger" wrote:
        > Mike, the red square is vertically centered on the blue background,
        but the
        > blue isn't centered on anything as near as I can figure ...
        > No idea what you were trying to do.
      • david brown
        My IE5+=Looks like its gotta come a tad left. ScreenShot of it=Attachment. ... From: wilkinsonm To: Sent:
        Message 3 of 7 , May 3, 2002
        • 0 Attachment
          My IE5+=Looks like its gotta come a tad left. ScreenShot of it=Attachment.
          ----- Original Message -----
          From: "wilkinsonm" <mikew@...>
          To: <ntb-html@yahoogroups.com>
          Sent: Friday, May 03, 2002 13:02
          Subject: [NH] Re: CSS - Center a <DIV>


          > My goal was to center the blue square horizontally within the browser
          > window. Since this technique use CSS positioning, I expect it will
          > only work in IE5+ and NS6.
          >
          > If you resize your browser window, then click on Refresh, hopefully
          > you will see that the blue square becomes centered. If not, I would
          > appreciate your feedback. It would be helpful to know what browser
          > and version you're using.
          >
          > Thanks!
          >
          > Mike Wilkinson
          > http://websites-graphics.biz
          >
          > "Don Passenger" wrote:
          > > Mike, the red square is vertically centered on the blue background,
          > but the
          > > blue isn't centered on anything as near as I can figure ...
          > > No idea what you were trying to do.
          >
          >
          >
          >
          >
          > Your use of Yahoo! Groups is subject to http://docs.yahoo.com/info/terms/
          >
          >


          [Non-text portions of this message have been removed]
        • Don Passenger
          Oh, now I see, I have to hit refresh for it to work. You can trigger it automatically on resize of course (so I assumed you had). I was looking at it on MSIE
          Message 4 of 7 , May 3, 2002
          • 0 Attachment
            Oh, now I see, I have to hit refresh for it to work.

            You can trigger it automatically on resize of course (so I assumed you had).
            I was looking at it on MSIE 5.5, but not hitting refresh.

            Replace your body tag with the following:
            <BODY onResize="window.location.href = window.location.href;">

            > My goal was to center the blue square horizontally within the browser
            > window. Since this technique use CSS positioning, I expect it will
            > only work in IE5+ and NS6.
          • wilkinsonm
            Thanks for the feedback. My example is definitely just a prototype. I do like your code snippet. It s simpler than what I had in mind. Thanks! Mike Wilkinson
            Message 5 of 7 , May 3, 2002
            • 0 Attachment
              Thanks for the feedback. My example is definitely just a prototype. I
              do like your code snippet. It's simpler than what I had in mind.
              Thanks!

              Mike Wilkinson
              http://websites-graphics.biz
            • Larry Hamilton
              Works in IE 6.x, WinXP Home. Larry
              Message 6 of 7 , May 3, 2002
              • 0 Attachment
                Works in IE 6.x, WinXP Home.

                Larry

                > My goal was to center the blue square horizontally within the browser
                > window. Since this technique use CSS positioning, I expect it will
                > only work in IE5+ and NS6.
                >
                > If you resize your browser window, then click on Refresh, hopefully
                > you will see that the blue square becomes centered. If not, I would
                > appreciate your feedback. It would be helpful to know what browser
                > and version you're using.
              • Lotta
                ... Mike, since you have an explicit width and use absolute positioning anyway you can easily center the element by positioning it in the middle of the screen
                Message 7 of 7 , May 3, 2002
                • 0 Attachment
                  >My goal was to center the blue square horizontally within the browser
                  >window. Since this technique use CSS positioning, I expect it will
                  >only work in IE5+ and NS6.

                  Mike, since you have an explicit width and use absolute positioning anyway
                  you can easily center the element by positioning it in the middle of the
                  screen and then give it a negative margin of half it's own width. No
                  scripting needed.

                  div
                  { width: 700px; height: 200px; background-color: blue;
                  position: absolute; top: 100px; left: 50%; margin-left: -350px;
                  margin-right: auto }

                  Lotta
                Your message has been successfully submitted and would be delivered to recipients shortly.