Web Analytics Made Easy -
StatCounter Center the entire page - CodingForum

Announcement

Collapse
No announcement yet.

Center the entire page

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Center the entire page

    Hi Guys,

    I want to center my entire page in the center.. so if a persona drags the browser window larger the entire page with stay in the center. I would use a <div> for this but.. Im finiding it hard to do a left: whatpx; tag inside of it. It seems to put it on the outside again.

    Any suggestions?

    Tamarab

  • #2
    http://codingforum.net/showthread.php?t=64166

    Here is how you center two boxes... just make it work with what you want
    Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

    Comment


    • #3
      Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      
      "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
      <title></title>
      <style type="text/css">
      * {
      padding: 0;
      margin: 0;
      }
      body {
      padding: 0;
      margin: 0;
      text-align-center;
      }
      #container {
      width: 600px;
      height: 600px;
      border: 6px solid #c3c;
      margin: 0 auto;
      position: relative;
      text-align: left;
      }
      </style>
      </head>
      <body>
      <div id="container">
      </div>
      </body>
      </html>

      the link Spirit posted was regarding mw2005's desire to center a box both horizontally and vertically on a page. If you just want to center a box horizontally you can try out the code above. The size of the container is just arbitrary numbers to make it show up.

      Just build the page inside the #container and it will always be centered horizontally on the page.
      Stop making things so hard on yourself.
      i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

      Comment


      • #4
        harbingerOTV & SpirtOfGrandeur:

        First of all, thanks for your help!

        I have tried a code like this, but I came across one probelm.

        If I had a two column layout, the first column would line up fine on the left hand side (using absolute positions or even static) but when I needed to add the second column in (usually for main content) I tried using a absolute position and it would just align left and push my left column down if it was static or just sit over top if it was absolute.

        Hope this doesnt sound confusing. How do you specifically align items inside that <div> tag if it has a left align attached to it?

        Many thanks in advance for your speedy response. This is a great forum!
        T

        Comment


        • #5
          Draw me a pretty picture of what you want... and Ill show you how to go about it.
          Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

          Comment


          • #6
            Code:
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
            
            "http://www.w3.org/TR/html4/loose.dtd">
            <html>
            <head>
            <title></title>
            <style type="text/css">
            html {
            }
            body {
            padding: 0;
            margin: 0;
            text-align-center;
            }
            #container {
            width: 600px;
            border: 1px solid #c3c;
            margin: 0 auto;
            position: relative;
            text-align: left;
            }
            #left {
            width: 396px;
            border: 2px solid #ccc;
            height: 600px;
            }
            #right {
            width: 196px;
            border: 2px solid #000;
            height: 600px;
            float: right;
            }
            </style>
            </head>
            <body>
            <div id="container">
            <div id="right"></div>
            <div id="left"></div>
            </div>
            </body>
            </html>
            simple but works.

            The oddball sizes for the divs widths is due to the borders I gave them. The divs + the borders (margin and padding as well ) need to equal up to the width of the container in order for them to sit side by side.

            since the #right div is floated it needs to be above the #left div in the HTML.

            Visa versa if you floated the left and not the right then in the HTML the #left would be written before the #right.
            Stop making things so hard on yourself.
            i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

            Comment


            • #7
              pretty picture coming right up!

              harbingerOTV,

              Thanks! lol, one pretty picture coming right up.
              http://tamarabrooks.com/csspositioni.../trail_100.htm

              I want to create this page using css only.. (this one is using tables).

              The furthest I got was (but I think I need to start from scratch anyhow):
              http://tamarabrooks.com/csspositioning/polis3.html
              http://tamarabrooks.com/csspositioning/polis2.css

              THANK YOU!
              Tamara

              Comment


              • #8
                Cookie Monster (Some random word... lol)

                Code:
                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
                <html>
                	<head>
                		<title>?</title>
                		<style type="text/css">
                			body, html {
                				height: 100%;
                				width: 100%;
                				overflow: hidden;
                				font: 8pt Verdana;
                			}
                			body {
                				background-color: #fff;
                			}
                			
                			#info {
                				position: absolute;
                				top: 50%;
                				left: 50%;
                				margin-left: -300px;
                				margin-top: -200px;
                				width: 600px;
                				height: 400px;
                				overflow: auto;
                				border: 1px black solid;
                				background: lightyellow;
                				color: maroon;
                				z-index: 0;
                			}
                			
                			#header {
                				position: absolute;
                				width: 100%;
                				height: 50px;
                				background: cyan;
                			}
                			
                			#nav {
                				top: 50px;
                				height: 350px;
                				position: absolute;
                				width: 100px;
                				background: pink;
                			}
                			
                			#body {
                				position: absolute;
                				height: 350px;
                				top: 50px;
                				left: 100px;
                				background: lightpurple;
                				overflow: auto;
                			}
                		</style>
                	</head>
                	<body>
                		<div id="info">
                			<div id='header'>Header Image</div>
                			<div id='nav'>Nav Bar</div>
                			<div id='body'>Body HTML</div>
                		</div>
                	</body>
                </html>
                Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

                Comment


                • #9
                  Code:
                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                  
                  "http://www.w3.org/TR/html4/loose.dtd">
                  <html>
                  <head>
                  <title></title>
                  <style type="text/css">
                  * {
                  padding: 0;
                  margin: 0;
                  }
                  body {
                  padding: 0;
                  margin: 0;
                  text-align-center;
                  }
                  #container {
                  width: 600px;
                  border: 1px solid #c3c;
                  margin: 0 auto;
                  position: relative;
                  text-align: left;
                  }
                  #head {
                  width: 596px;
                  border: 2px solid #c69;
                  height: 100px;
                  }
                  #right {
                  width: 392px;
                  border: 2px solid #ccc;
                  height: 500px;
                  float: right;
                  }
                  #left {
                  width: 196px;
                  border: 2px solid #000;
                  height: 500px;
                  }
                  #right-right {
                  width: 126px;
                  height: 376px;
                  border: 2px solid #eef;
                  float: right;
                  }
                  #right-left {
                  width: 254px;
                  height: 376px;
                  border: 2px solid #3ec;
                  }
                  #nav {
                  width: 392px;
                  background-color: #666;
                  height: 120px;
                  }
                  </style>
                  </head>
                  <body>
                  <div id="container">
                  <div id="head"></div>
                  <div id="right">
                  <div id="nav"></div>
                  <div id="right-right"></div>
                  <div id="right-left"></div>
                  </div>
                  <div id="left"></div>
                  </div>
                  </body>
                  </html>
                  Not the prettiest thing but shows you how you could do it.

                  IE is pretty nit picky with floated items so I had to make the boxes all a little smaller so they would sit right. Since your not using borders and using the white background you won't notice that the y don't fit snug. You don't want that anyways

                  Basically you have one box. In that box you have a header. Then under that you have left and right boxes. In the left box you have another 2 boxes.

                  Probally not the greatest example but a decent building block to work with.
                  Stop making things so hard on yourself.
                  i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

                  Comment


                  • #10
                    OMG cookie monster THX!

                    OMG cookie monster THX!
                    this is so nice of you to do this! custom, just for me!
                    I have no idea if it works yet, but Im sure Ill learn from it!

                    Ive been on the comp for like 14hours now.. so I need a break, but I will try it tomorrow and let you know how I make out!

                    THANKS so MUCH, I truly appreciate it!

                    Comment


                    • #11
                      Dont worry about it. Once you become good with CSS, it only takes a few seconds.
                      Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

                      Comment


                      • #12
                        The absolute positioning approach is anotherway to go about it. I guess I'm a fan of floats.

                        One note though. Spirits example uses the css approach to horz. and vert. center a page. looking at your test page you don't want this. I'm veiwing your test page at 1152 resolution. Your container is almost flush with the bottom of my browser. If you use that approch (centering) IE will cut off the bottom of your page in anything smaller than 1152 res and will not give scroll bars to be able to see the rest.

                        I don't see a need to vertically center your site as is.
                        Stop making things so hard on yourself.
                        i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

                        Comment


                        • #13
                          to center or not to center, that is the question...

                          harbingerOTV, good point on the container hitting the bottom of your screen for resolution...

                          I like it to be centered, as a personal preference, but I would be happy if I could align left and get that cool scrolling thing (you know when people select the bottom corner of the window and the entire page seems to re-strucure itself according to the page.

                          (like this site does)

                          Can i accomplish this with CSS? (As you can tell, Im fairly new to HTML too, haha)

                          SpirtOfGrandeur: I tried you code and I get a fairly good working model to work with, so thank you, I learn a lot!!!

                          Comment

                          Working...
                          X