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.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post

    Page in middle of screen

    How do you make a html page show up in the middle of the screen.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Valid doctype then

    html:
    Code:
    <body>
    <div id="wrapper">
    All your page content between this div
    </div>
    </body>
    CSS:

    Code:
    #wrapper {
             width: 960px;
             margin: 0 auto;
    }
    Teed

  • #3
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post
    Quote Originally Posted by teedoff View Post
    Valid doctype then

    html:
    Code:
    <body>
    <div id="wrapper">
    All your page content between this div
    </div>
    </body>
    CSS:

    Code:
    #wrapper {
             width: 960px;
             margin: 0 auto;
    }
    *ohh wait it works never mind

    THat does not work.

    *edit
    Last edited by sherlockturtle; 05-12-2011 at 11:37 PM.

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    one option.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #wrapper {
                    width: 80%;
                    margin: 20px auto 20px auto;
                    border: 1px solid red;
                }
                #gutter {
                    margin: 0px 0px 0px 0px;
                    padding: 20px 20px 20px 20px;
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <div id="wrapper">
                <div id="gutter">
                    <p>
                        Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
                        Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
                        pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
                        ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc.
                    </p>
                    <p>
                        Tortor sit voluptatem pede sodales turpis hac, vel velit suscipit, luctus bibendum molestie lacinia neque. Porttitor ante
                        turpis in voluptate vivamus autem, gravida magna amet porta praesent tincidunt at, nam enim sodales ante non, sit nunc
                        posuere odio libero nibh ac. Amet id dignissim vehicula tempor et eros. Est hendrerit est quis, et viverra est class pede
                        voluptas libero, sed mauris tincidunt, ultrices praesent.
                    </p>
                </div>
            </div>
        </body>
    </html>

  • #5
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,722
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Bullant:
    I seem to have a lot of issues with %'s... Do you find that 80% works for you? *I tried setting up using 100% and it would not work correctly?*

    Teed:
    This is similar to what I do now, only I use 1024px... Is there a "set value" for screen px sizes? I have been told multiple size resolutions for both height and width.

    Sherlock:
    Sorry to hijack your thread

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    [ot]

    Quote Originally Posted by alykins View Post
    Bullant:
    I seem to have a lot of issues with %'s... Do you find that 80% works for you? *I tried setting up using 100% and it would not work correctly?*
    100% or less works fine in my IE9 and FF4. But note, most, if not all, browsers have a default margin/padding on the <body> and so the left and right borders will not quite reach the left and right side of the browser window. You can set margins and paddings to 0px for the <body> in the css to remove any default values.

    Also, note that the % width will set the width of the element to that % width of its parent element.

    Say a parent div is set to 50% of the width of the <body> and the parent div has a child div whose width is also set to 50%. In this case, the child div's width will be 25% of the width of the <body> (0.5 x 0.5 = 0.25).

    If you would like to discuss further, maybe start a new thread with your code and browser name and version causing you problems before we get spanked by the moderators for hijacking the op's thread.

    [/ot]

  • #7
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post
    Im trying to put a border on one of the objects but it goes across the string "the border" how can i fix that?

  • #8
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,722
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Quote Originally Posted by sherlockturtle View Post
    Im trying to put a border on one of the objects but it goes across the string "the border" how can i fix that?
    i dont know exactly what the question is pertaining too.. can you post code?
    in CSS you can set up border properties... these can be as simple as border: 2px ridge gray; or you can go deeper border-top: 3px solid red; border-bottom: 5px solid green;

    hope that helps... if not post code and i can offer what i can also u might need " s around colors... i always use hex code so i cant remember

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #9
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post
    Quote Originally Posted by alykins View Post
    i dont know exactly what the question is pertaining too.. can you post code?
    in CSS you can set up border properties... these can be as simple as border: 2px ridge gray; or you can go deeper border-top: 3px solid red; border-bottom: 5px solid green;

    hope that helps... if not post code and i can offer what i can also u might need " s around colors... i always use hex code so i cant remember
    So i have the width thing but theres a div i have in the middle of the page that the "border" extence all the way to the right side of the screen and i just want a box.

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by sherlockturtle View Post
    So i have the width thing but theres a div i have in the middle of the page that the "border" extence all the way to the right side of the screen and i just want a box.
    Probably going to need all your code or better a link to your live testing site.

    But as a guess, is it a border attribute added with CSS on an element? Or did you insert a horizontal rule(<hr />)?
    Teed

  • #11
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post
    Here is the CSS see it mazuring the border from the left to the right so it drage teh border across the whole screen


    width: 780px;
    margin: 0 auto;


    And i dont have a testing site. I can run it wiht xampp though

  • #12
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Two small lines of CSS is not enough. Post ALL your html and CSS please. Also when you do use the # button to wrap your code in code tags.
    Teed

  • #13
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post
    Quote Originally Posted by teedoff View Post
    Two small lines of CSS is not enough. Post ALL your html and CSS please. Also when you do use the # button to wrap your code in code tags.
    OHhh i know i only posted a snippet i will post the code in a little while


  •  

    Posting Permissions

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