SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast shotdsherrif's Avatar
    Join Date
    Oct 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Top Bottom Centering of Landing Page

    Hello,

    I've been asked to create a landing page for a new site and to have it be centered top to bottom for viewing on larger monitors. It kind of makes sense since the page is just a large img w/ an email form element.

    And though I can do this easily with margin: 0px, auto; - this doesn't to the job for top to bottom. What I've read is browsers still default top margin to 0.

    Another twist is that the form element has to be placed relative to the img in the bottom right hand corner ... so relative vs absolute placement is question there.

    The url is here: Smitten on Paper - Coming Soon!

    And my markup below:

    A part of my question here is about HTML5 (this will be an html5 site) with it and larger monitors being on the upswing, I'm wondering what the most current best practice is in this situation.

    PHP Code:
    [HIGHLIGHT="HTML4Strict"]<!DOCTYPE HTML>
    <
    html>
    <
    head>
    <
    title>Smitten on Paper Coming Soon!</title>
    <
    meta charset="UTF-8">
    <
    script type="text/javascript">

    </script>
    <style>
    html,body  {
        height:100%;
        margin:0;
        padding:0;


    #landingpage {
        width:960px;
        height:576px;
        margin: 0px auto;
    }

    #emailform {
        font-size: 10px; 
        background-color: transparent;   
        border: 1px solid #900; 
        font-family: Verdana, Arial, Helvetica, sans-serif; 
        width: 100px;
    }

    #submit {
        color: #900;
        font-size: 10px; 
        font-weight: bold;
        background:none;
        border:0;
        padding-left:0;
    }
    </style>
    </head>

    <body>
    <div id="landingpage">
    <img src="images/landingpage.png" alt="" >
    <div id="emailform">
    <form name="emailform" action="email.php" method="post" >
    <input type="text" name="email" id="email">
    <input type="submit" value="Submit" id="submit">
    </form>
    </div>
    </div>
    </body>
    </html>[/HIGHLIGHT] 

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    There are plenty of ways to do this, such as described here:

    Easy Vertical Centering with CSS

    Wrap everything is a container and follow the directions in that article. Post back if you have questions!


Bookmarks

Posting Permissions

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