HTML/ CSS Resizing Help

8 replies
  • WEB DESIGN
  • |
Hi Fellow Warriors,

I've been working on a landing page for one of my upcoming products but I can't seem to get this simple page working properly.

I'm having trouble centering and making it look good on other browsers. I know you can't make your site look the same on all browsers, but I at least want my site to be centered and have it resize on its own so that it fits any resolution.

I'm still a big noob at this stuff so I would greatly appreciate your guys' help.

Here's the HTML and CSS code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<script type="text/javascript">
function showIt() {
document.getElementById("button").style.visibility = "visible";
}
setTimeout("showIt()", 10000); // 1000 = 1 sec
</script>

<head>
<title>Five80Nine</title>
<link href="589.css" rel="stylesheet" type="text/css" media="screen" />
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />

<body style="overflow:hidden;"/>
</head>
<body>

<div id="container">
<div id="header">
</div><!--end header-->
<div id="video">
<iframe width="400" height="224" src="?&autoplay=1&modestbranding=1&rel=0&showinfo= 0&autohide=1;" frameborder="0" allowfullscreen></iframe>
</div><!--end video-->

<div id="button" style="visibility:hidden" >
<a href="http://fromhomemakemoney.com/dap/paypalCoupon.php?cmd=_xclick-subscriptions&item_number=4&currency_code=USD" target="_blank" id="button" > <img src="images/buybutton.png" border="0" class="dropshadow"/> </a>


</div><!--end button-->
</div><!--end container-->

</body>
<script type="text/javascript">



</script>

</html>


CSS

body {width: 100%; height: auto; margin: 0 auto; padding: 0; font-family:Helvetica ; text-align: center; background-color: black;}



'
body, div, h1, h2, h3, h4, h5, h6, p, ul, img

#container{width: 100%; height: auto; margin: 0 auto; padding: 0; text-align: center;}



#header{
background-image: url(images/589header.png);
background-repeat: no-repeat;
padding:26%;
float: left;
width:100%;
height: 100%;
margin-left: 15%;


}

#video {
position:absolute;
top:57%;
right:25%;
float: ;

}



#button {

position:absolute;
top:110%;
right:38%



}
#css #html or #resizing
  • Profile picture of the author Michael71
    Please consider to pay someone to do it for you.

    You won't make it, you do not even understand basics of CSS and HTML. Sorry to say...

    It begins with the DOCTYPE used... and ends with the usage of overflow:hidden, position: absolute and float: ;...

    Too many errors.

    You can make a simple site like yours look the same on every browser if you know how.
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8108124].message }}
  • Profile picture of the author David V
    There are a bunch of issues with this.... tags in all the wrong places, missing, and more. It's quite a disaster.
    There are tons of free video landing pages.... you might be better to grab a decent one and just fill in your details and don't mess with the code.
    {{ DiscussionBoard.errors[8108133].message }}
  • Profile picture of the author CalcoMedia
    Reading your post.. some advices:

    Avoid the use of absolute position, use the margin: 0 auto; to center things horizontally.

    Read about display modes, it´s not the same working with block, inline-block, table, etc...

    As David said, lot´s of mistakes in the code, but CSS+HTML is easy to learn (at least the basic things) and the best way is writing, then writing more and when you think you know enough, re-write again.

    If you want, send me a PM and I will try to help you to set up your web.
    {{ DiscussionBoard.errors[8108147].message }}
  • Profile picture of the author iamjosan
    So much for trying to code a simple landing page on my own hahaha

    Thanks for your reply Calco. I'll send you a PM.
    {{ DiscussionBoard.errors[8108335].message }}
  • Profile picture of the author Turfhosting
    Heres an example of a centered div that will display correctly on all browsers

    #centereddiv {
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    }

    (or margin:0 auto; )
    Never use absolute positioning for the general layout of your site. Within that div if you want to have 2 columns use:
    #col-right {
    float:right;
    width:50%;
    }
    #col-left {
    float:left;
    width:50%;
    }
    And so on, CSS is very easy once you learn the basics Replace "Centereddiv" with #videos and it should work for you!
    Signature
    Turf Hosting - Quality Shared, Reseller, and VPS Hosting! Current Promotion: Half off your first year, and get a FREE DOMAIN for LIFE!! Originally $35/yr. NOW $22.50 for your first year with coupon code: 35OFF-YEAR

    Varcoe Design - High quality web designer for hire!
    {{ DiscussionBoard.errors[8108690].message }}
  • Profile picture of the author Patrick
    Also in future try to use jsfiddle or something similar to display your code, so that we can see a working example of it as well. But as everyone pointed above, its all in the wrong place ^^..

    javascript after <html> should be before </head>

    The one that bowled me out was ....

    Code:
    <body style="overflow:hidden;"/>
    </head>
    <body>
    {{ DiscussionBoard.errors[8108895].message }}
    • Profile picture of the author Michael71
      Javascript should only be in head when the code styles the layout or adds e.g. text.

      If not then javascript should always be at the bottom of the code, before closing body tag.

      This is called best practice, Google and Yahoo recommends that.

      Originally Posted by schwarzes View Post

      Also in future try to use jsfiddle or something similar to display your code, so that we can see a working example of it as well. But as everyone pointed above, its all in the wrong place ^^..

      javascript after <html> should be before </head>

      The one that bowled me out was ....

      Code:
      <body style="overflow:hidden;"/>
      </head>
      <body>
      Signature

      HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
      ---
      Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

      {{ DiscussionBoard.errors[8109653].message }}
  • Profile picture of the author crescendo
    There are several errors in your code. if you are a fresher in web design I would recommend you to start slow and with small simpler codes.

    Centering a website is simple. All you have to do is margin:0 auto;

    As for the browsers. You'll have to maintain browser compatibility in the CSS code.

    Make the site responsive using bootstraps so that the screen resolutions aren't a problem
    {{ DiscussionBoard.errors[8109083].message }}

Trending Topics