#1
  1. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jan 2004
    Location
    Budapest
    Posts
    1,702
    Rep Power
    67

    CSS - Please help me


    Ok, I want web page whose body bgcolor is black, I want a div which will be an overall container for the rest of the sites divs, and it will be 770 in width, and 100% in height of the page. So, no matter how much content in nested in it, it will always reach the browsers bottom. If the browser is larger than than 800 wide, the containing div should be centered, with equal space on both sides. I want all of this as I like a web site which when viewed bigger than 800, it doesn't sit in the left side of the window as most do, with a huge space of nothing beyond its right border...
    Today the world, tomorrow the universe...
  2. #2
  3. Retired Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jan 2004
    Location
    London, UK
    Posts
    6,669
    Rep Power
    147
    Hi,

    How about this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="javascript" type="text/javascript">
      var myWidth = 0, myHeight = 0;
      if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
      } else {
        if( document.documentElement &&
            ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
          //IE 6+ in 'standards compliant mode'
          myWidth = document.documentElement.clientWidth;
          myHeight = document.documentElement.clientHeight;
        } else {
          if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            //IE 4 compatible
            myWidth = document.body.clientWidth;
            myHeight = document.body.clientHeight;
          }
        }
      }
    </script>
    <style type="text/css">
    <!--
    body {
    	background-color: #000000;
    }
    .divmain {
    	height: 100%;
    	width: 770px;
    	background-color: #FFFFFF;
    }
    -->
    </style>
    </head>
    
    <body>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    	<script  language="javascript" type="text/javascript">
    		document.write('<tr height="' + myHeight + '">');	
    	</script>
    		<td align="center"><div class="divmain">Text</font></td>
    	</tr>
    </table>
    </body>
    </html>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    67
    Rep Power
    11
    this actually looks like something i might use, but i would like to know what everything is before i start using it, so first of all:

    why is the java necessary? I don't know any java, and what just wondering why it was necessary?

    thanks
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    67
    Rep Power
    11
    this actually looks like something i might use, but i would like to know what everything is before i start using it, so first of all:

    why is the java necessary? I don't know any java, and what just wondering why it was necessary?

    thanks

    sorry for double post
  8. #5
  9. Bites when cornered
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Back from Iraq!
    Posts
    109
    Rep Power
    13
    The script edwinbrains posted gathers the client area's width and height, and places the height in the <tr> portion of a table statement. That is one method using HTML and javascript, but it seems to set the size only initially, not sure if it is resize friendly. If one had content that fit in the table upon load, and the user made the window larger, then it looks like the table would stay the same size (since the height is set in pixels insted of 100%). From the sound of what you wanted, I'd do it in css only, maybe something like:
    Code:
    /* CSS: */
    body
    {
      padding: 0;
      margin: 0;
      background-color: rgb(0,0,0);
    }
    
    .maincontent
    {
      position: absolute;
      left: 50%;
      width: 770px;
      height: 100%;
    /* margin is negative one half of width */
      margin: -385px;
    /* this with the left: 50% should center an absolutely positioned div */
    }
    Cheers to kk5st who brought the negative margin centering trick to my attention.


    HTH
    Obstruct the doors, cause delays, be dangerous.
  10. #6
  11. Retired Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jan 2004
    Location
    London, UK
    Posts
    6,669
    Rep Power
    147
    I would agree with Detrifuse. I don't think my code is very resize friendly. Detrifuse's code does look better!
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jan 2004
    Location
    Budapest
    Posts
    1,702
    Rep Power
    67
    Interesting thing, I have been using this code and for some reason, the container div is perfectly centered in both Netscape and IE, but there is nothing in the code which is centering it, nor can I move the div so it is left aligned on the page??? Here is the 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" lang="en" xml:lang="en">
    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0" />
    <meta name="ProgId" content="FrontPage.Editor.Document" />
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <title>Navigation</title>
    <style type="text/css" media="screen">
    html{
    height:100%;
    }
    body{
    margin: 0;
    padding: 0;
    font: 85% arial, hevetica, sans-serif;
    color: #000;
    background-color: #00f;
    height: 100%;
    border: 0px solid red;
    }
    #container{
    margin: 0px auto;
    width: 770px;
    height: 100%;
    text-align: left;
    background-color: #f00;
    background-image: url('images/keybg.jpg');
    background-repeat: no-repeat;
    border: 0px solid red;
    }
    </style>
    </head>
    <body>
    <div id="container" >

    </div>
    </body>
    </html>
  14. #8
  15. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    Code:
    #container{
    margin: 0px auto;
    width: 770px;
    height: 100%;
    text-align: left;
    background-color: #f00;
    background-image: url('images/keybg.jpg');
    background-repeat: no-repeat;
    border: 0px solid red;
    }
    Since you are in compliance mode, the "margin: 0 auto;" centers the div even in IE.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jan 2004
    Location
    Budapest
    Posts
    1,702
    Rep Power
    67
    I will look it up, but "compliance mode" as opposed to? and what defines this? Thanks Gary.
  18. #10
  19. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    You will find a decent explanation at AppleDev, plus links to more specific answers.

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jan 2004
    Location
    Budapest
    Posts
    1,702
    Rep Power
    67
    Thanks so much, that site you pointed me to yesterday is unavaiable, that being /*pei*/, unfortuantely. I am just racking my brain out on this stuff, I am trying to understand the "doc flow" so to speak, in relation to positioning, just when I think I am getting it, something like this happens - http://tmh.netdbs.com/turnkey/default7.htm
    I had it all figured out, until I added content to the mainbod area, and by doing so, it just served to extend it beyond the nav area in IE, in NS, it pushes the text right out of its containing block, that being mainbod. As I wrote earlier, I will rtfm and look up various tutorials on positioning. I have an O'Reily book which seems to be fairly good at this. By the way, this devshed site is great, but one the home page, it seems I need to actually generate a "search" to get to the forum section, and once I am in the site and logged in (via cookie I assume) I can't seem to figure out how to go to my personal information and see post I have submitted, etc. Take good care and thanks for advice. Tom PS, I peeked at that above link and it looks really great, thanks!
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jan 2004
    Location
    Budapest
    Posts
    1,702
    Rep Power
    67
    Ok, so the tutorial in the link above pointed me to Appledev and it is an awesome resource which further pointed me in different directions. For this solution only, I have integrated minimal usages of tables to accomplish my design pursuit. (only because I need to get this project done asap) I have it looking identical in both IE and NS but one small problem, I want it to fill 100% of the screen. I tried every variation I could on both the divs, table, and td's, but all to know avail. Here is the site, if anyone could peek at it and tell me how to get 100% height, I sure would apprecaite it. If only in IE, that would be ok for now. Thanks, Tom

    http://tmh.netdbs.com/turnkey/layout.htm
  24. #13
  25. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    As an alternative to a lot of blank space, put your entire page into a single cell table. The default will center the page vertically. An example is here.

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo