Vertical alignment on large resolution

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • jitu78
    New Member
    • Aug 2006
    • 30
    #1

    Vertical alignment on large resolution

    Hi All,

    How can I align table/DIV in middle on large resolutions?

    Just go to this link, my portfolio

    And this on large resolution, it is coming on top of the page.

    I want to align page content to middle of the browser height.

    Thanks in advance
    Tags: None
    • rachwelian
      New Member
      • Oct 2006
      • 3
      #2
      The only way I know how to do it would be to put it in a table with valign set to "middle" and height="100%"

        Comment

        • jaymanson
          New Member
          • Oct 2006
          • 29
          #3
          Here's a fairly simple trick to do this with CSS:

          First, the HTML file:

          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">
   <title>Untitled Document</title>

   <!-- Link to your CSS style sheet here -->
   <link href="test.css" rel="stylesheet" type="text/css" />

</head>

<body>

   <div id="pixel">

      <div id="wrapper">

         <!-- Put your site content in here -->

      </div>

   </div>

</body>

</html>
          and the CSS:

          Code:
          /* CSS Document */

/* First we make a 1x1 pixel container div.
The 50% / 50% absolute positioning centers it on the screen
The overflow ensures anything inside it will spill out to fill the screen */

#pixel {
	width: 1px;
	height: 1px;
	position: absolute;
	top: 50%;
	left: 50%;
	overflow: visible;	
}

/* Now we make the wrapper to hold your site content.
It can be any width or height, but the 'right' positioning value must be 
set to half the 'width' and the 'bottom' value set to half of the 'height' */

#wrapper {
	width: 400px;
	height: 240px;
	position: relative;
	right: 200px; 
	bottom: 120px;
}
          I've put explanations inside the code. This is all CSS - no tables required :-)

          Let me know if you have any problems.

          - Jay

            Comment

            • jaymanson
              New Member
              • Oct 2006
              • 29
              #4
              Actually, when I think about it, this would be slightly better:

              Code:
              #wrapper {
	width: 400px;
	height: 240px;
	position: relative;
	right: 50%; 
	bottom: 50%;
}
              Setting the right and bottom values to 50% saves having to work it out (not that it's hard to half something, but it does leave less possibility for error!)

              Jay

                Comment

                • jaymanson
                  New Member
                  • Oct 2006
                  • 29
                  #5
                  Originally posted by jaymanson
                  Actually, when I think about it, this would be slightly better:

                  Code:
                  #wrapper {
	width: 400px;
	height: 240px;
	position: relative;
	right: 50%; 
	bottom: 50%;
}
                  Setting the right and bottom values to 50% saves having to work it out (not that it's hard to half something, but it does leave less possibility for error!)

                  Jay
                  Scratch that last post - the 50% thing works in IE but not in FF! Looks like you'll have to get the calculators out and do it the first way I suggested lol

                  It's 1am here and obviously way past my bedtime now!

                    Comment

                    Previous template Next
                    Working...