9 Replies Latest reply on May 20, 2010 3:32 PM by Nancy OShea

    My webpage does not fill the entire browser screen

    karene9797

      Hey first off, I know very little about webpages. I have been teaching myself. I am using CS4 and my web page looks good but when I pull it up in internet explorer I have about 2 inches of white space on the right hand side. I built the pages via templates not CSS. Only because I just don't understand CSS.

       

      I know very little about code, but have learned some small things by looking at it web pages via split view. If any one can dumb down a way for me to get this page to either fill the browser or recenter it so the white space is evenly distributed I would really appreciate it.

       

      Tks,

       

      Karen

        • 1. Re: My webpage does not fill the entire browser screen
          Nancy OShea Adobe Community Professional & MVP

          Hi Karen, for best results here you need to post a URL to your page so we can see it.

           

          Example 2-column, Liquid Layout

          (resize viewport to see it in action)

          http://alt-web.com/TEMPLATES/2-col-liquid-layout.shtml

           

          To center a web page, you need 3 things:

          a) a valid document type,

          b) a container width in pixels, ems or percentages,

          c) margin-left and margin-right of 'auto' (browser default).

           

          Example of a 3-column, Fixed-width, Centered Layout

          http://alt-web.com/TEMPLATES/3-col-white-gray.shtml

           

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          • 2. Re: My webpage does not fill the entire browser screen
            karene9797 Level 1

            Nancy,

             

              Unfortunately this is a website for work and on a intranet so can not post a URL, I have a copy of the shell (basic page with out the information linked) on my home computer that I could send or upload (if there is a place to upload) if that would be more helpful.

             

            Karen

            • 3. Re: My webpage does not fill the entire browser screen
              Nancy OShea Adobe Community Professional & MVP

              If the links I provided don't help you, we would need to see your HTML and CSS code.  

              To paste code into a forum reply, use the Double Arrows >> Syntax Highlighting > Plain.

               

              This is what code looks like...
              

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb
              http://alt-web.blogspot.com

              • 4. Re: My webpage does not fill the entire browser screen
                BrooklynDakar

                I have a similar problem.  I have a logo I want to be vertically and horizontally centered with the rest of the browser filled with black (or any color) .  My logo gets centered at the top and then the screen gets cut off.  I started out  with a single column centered css template then went to the three column to try to push the logo to the center.  Basically I want to place my logo as you have your centered box on your vertically and horizonally centered layout.  I can't seem to get my css to do it however.

                 

                 

                My logo is in the main content div and the css is in a seperate file.

                 

                Here is my css

                 

                 

                @charset "UTF-8";
                body {
                    font: 100% Verdana, Arial, Helvetica, sans-serif;
                    background: #000;
                    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
                    padding: 0;
                    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
                    color: #000000;
                }
                .oneColLiqCtrHdr #container {
                    width: 80%;  /* this will create a container 80% of the browser width */
                    height: 80%;
                    background: #000;
                    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
                    border: 1px solid #000000;
                    text-align: left; /* this overrides the text-align: center on the body element. */
                }
                .oneColLiqCtrHdr #header {
                    background: #000;
                    padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
                }
                .oneColLiqCtrHdr #header h1 {
                    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
                    padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
                }
                .oneColLiqCtrHdr #mainContent {
                    padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
                    background: #000;
                    margin-left: -25px;
                    margin-top: -25px;
                    overflow:auto;/*scrollbars appear when needed*/
                }
                .oneColLiqCtrHdr #footer {
                    padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
                    background:#000;
                }

                 

                 

                 

                Here is my html

                 

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <title>Untitled Document</title>
                <link href="oneColLiqCtrHdr.css" rel="stylesheet" type="text/css" />
                </head>

                 

                <body class="oneColLiqCtrHdr">

                 

                <div id="container">
                  <div id="header">
                    <h1>Header</h1>
                  <!-- end #header --></div>
                  <div id="mainContent">
                <img src="SophistikatStudios_logo_onBlack.png" width="648" height="270" alt="Sophistikat Logo" />
                <!-- end #mainContent --></div>
                  <div id="footer">
                    <p>Footer</p>
                  <!-- end #footer --></div>
                <!-- end #container --></div>
                </body>
                </html>

                 

                Thanks

                • 5. Re: My webpage does not fill the entire browser screen
                  Nancy OShea Adobe Community Professional & MVP

                  Copy and paste this code into a new, blank document.

                   

                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                  <html xmlns="http://www.w3.org/1999/xhtml">
                  <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                  <title>Vertical Centered logo</title>
                  
                  <style type="text/css" media="all">
                  
                  body {
                  margin:0;
                  padding:0;
                  width:100%; 
                  height:100%; 
                  text-align:center; 
                  background:#000;
                  font-family:Geneva, Arial, Helvetica, sans-serif;
                  }
                  
                  #centered {
                  padding: 10px;
                  background:#FFF url(SophistikatStudios_logo_onBlack.png) no-repeat center center;
                  border:5px solid #4488C3;
                  width: 648px; /**changed from 50% to image width**/
                  height: 50%;
                  text-align: center;
                  color: #000;
                  position: absolute;
                  left: 25%; /*half the width of your container*/
                  top: 25%; /*half the height of your container*/
                  margin-left: -25px;
                  margin-top: -25px;
                  overflow:auto;/*scrollbars appear when needed*/
                  }
                  
                  </style>
                  </head>
                  <body>
                  <div id="centered">
                  <p>Your text goes here</p>
                  </div>  <!--end centered -->
                  </body>
                  </html>
                  
                  
                  
                  

                   

                  You can see a working demo here:

                  http://alt-web.com/DEMOS/vertical-centered-logo.html

                   

                   

                  Nancy O.
                  Alt-Web Design & Publishing
                  Web | Graphics | Print | Media  Specialists
                  http://alt-web.com/
                  http://twitter.com/altweb
                  http://alt-web.blogspot.com

                  • 6. Re: My webpage does not fill the entire browser screen
                    BrooklynDakar Level 1

                    Thank you, that was very helpful but I don't want the image as a 

                    background and I am trying to use an external style sheet to learn css.

                     

                    Jacob

                     

                    Quoting "Nancy O." <forums@adobe.com>:

                     

                    Copy and paste this code into a new, blank document.

                     

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  

                    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                    <html xmlns="http://www.w3.org/1999/xhtml">

                    <head>

                    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

                    <title>Vertical Centered logo</title>

                    >

                    <style type="text/css" media="all">

                    >

                    body {

                    margin:0;

                    padding:0;

                    width:100%;

                    height:100%;

                    text-align:center;

                    background:#000;

                    font-family:Geneva, Arial, Helvetica, sans-serif;

                    }

                    >

                    #centered {

                    padding: 10px;

                    background:#FFF url(SophistikatStudios_logo_onBlack.png) no-repeat  

                    center center;

                    border:5px solid #4488C3;

                    width: 648px; /*changed from 50% to image width*/

                    height: 50%;

                    text-align: center;

                    color: #000;

                    position: absolute;

                    left: 25%; /half the width of your container/

                    top: 25%; /half the height of your container/

                    margin-left: -25px;

                    margin-top: -25px;

                    overflow:auto;/scrollbars appear when needed/

                    }

                    >

                    </style>

                    </head>

                    <body>

                    <div id="centered">

                    <p>Your text goes here</p>

                    </div>  <!--end centered -->

                    </body>

                    </html>

                    >

                    >

                    >

                    >

                     

                    You can see a working demo here:

                    http://alt-web.com/DEMOS/vertical-centered-logo.html

                     

                     

                    Nancy O.

                    Alt-Web Design & Publishing

                    Web | Graphics | Print | Media  Specialists

                    http://alt-web.com/

                    http://twitter.com/altweb

                    http://alt-web.blogspot.com

                    >

                    • 7. Re: My webpage does not fill the entire browser screen
                      Nancy OShea Adobe Community Professional & MVP

                      For expedience sake on this web forum, we embed the CSS code directly into the document so you can see how it works on the page.  Naturally, when your project is nearly complete you should move your embedded styles to an external stylesheet.   

                       

                      As far as centering an image vertically, the CSS background-position (center, center) makes this possible. I'm afraid it won't work on inserted images.  Sorry my solution was not everything you hoped for. 

                       

                      Best of luck on your project,

                       

                      Nancy O.
                      Alt-Web Design & Publishing
                      Web | Graphics | Print | Media  Specialists
                      http://alt-web.com/
                      http://twitter.com/altweb
                      http://alt-web.blogspot.com

                      • 8. Re: My webpage does not fill the entire browser screen
                        BrooklynDakar Level 1

                        OK following your example I managed to get my image centered,

                         

                        What does the -25px margin do?  I removed it and it seems the same to me.

                         

                        Now, I want to add some text below the logo and it appears at the top of the page.  How would I go about placing text on the page where I want it.

                         

                        Thank you.

                        • 9. Re: My webpage does not fill the entire browser screen
                          Nancy OShea Adobe Community Professional & MVP

                          Now, I want to add some text below the logo and it appears at the top of the page.  How would I go about placing text on the page where I want it.

                           

                          CSS:

                          ----------------

                          .caption {margin-top: 38%} /**adjust to suit your needs**/

                           

                           

                          HTML

                          -----------------

                          <div id="centered">
                          <p class="caption">caption text goes here</p>
                          </div>  <!--end centered -->

                           

                           

                          Nancy O.
                          Alt-Web Design & Publishing
                          Web | Graphics | Print | Media  Specialists
                          http://alt-web.com/
                          http://twitter.com/altweb
                          http://alt-web.blogspot.com