Page 1 of 1

I have a problem with a landing page.

Posted: Thu Oct 06, 2011 8:14 pm
by Supplement
If you look to the right there's a white gap and overlapping. How do I center everything and make it conform to any screen size?

http://estheticianweb.com/


Thanks for any help, I don't do much design work anymore so I'm in need of major help.



CSS
*********************************************


Code: Select all

body {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  text-align: left;
  font-size: small;
}

/* You named this layer Background */
#Layer-1 {
  position: absolute;
  left: -58px;
  top: -208px;
  width: auto;
  height: auto;
  z-index: 1;
}

/* You named this layer Shape 3 */
#Layer-2 {
  position: absolute;
  left: 609px;
  top: 322px;
  width: 7px;
  height: 668px;
  z-index: 2;
}

/* You named this layer Shape 3 copy */
#Layer-3 {
  position: absolute;
  left: 874px;
  top: 644px;
  width: 8px;
  height: 346px;
  z-index: 3;
}

/* You named this layer Shape 3 copy 2 */
#Layer-4 {
  position: absolute;
  left: 1146px;
  top: 644px;
  width: 8px;
  height: 346px;
  z-index: 4;
}

/* You named this layer Shape 4 */
#Layer-5 {
  position: absolute;
  left: 614px;
  top: 645px;
  width: 780px;
  height: 5px;
  z-index: 5;
}

/* You named this layer Included - Welcome Package - */
#Layer-6 {
  position: absolute;
  left: 628px;
  top: 776px;
  width: 235px;
  height: 177px;
  z-index: 6;
}

/* You named this layer Shape 5 */
#Layer-7 {
  position: absolute;
  left: 686px;
  top: 696px;
  width: 118px;
  height: 58px;
  z-index: 7;
}

/* You named this layer Sign up Today for just   199 */
#Layer-8 {
  position: absolute;
  left: 630px;
  top: 660px;
  width: 229px;
  height: 87px;
  z-index: 8;
}

/* You named this layer Our Skin Care  Product Affilia */
#Layer-9 {
  position: absolute;
  left: 353px;
  top: 349px;
  width: 230px;
  height: 70px;
  z-index: 9;
}

/* You named this layer   Skin Care Heaven was founded */
#Layer-10 {
  position: absolute;
  left: 350px;
  top: 446px;
  width: 236px;
  height: 242px;
  z-index: 10;
}

/* You named this layer Screen shot 2011-07-27 at 1134 */
#Layer-11 {
  position: absolute;
  left: 339px;
  top: 718px;
  width: 256px;
  height: 201px;
  z-index: 11;
}

/* You named this layer iStock_000011390980Medium */
#Layer-12 {
  position: absolute;
  left: 633px;
  top: 340px;
  width: 219px;
  height: 305px;
  z-index: 12;
}

/* You named this layer Why Esthetician Web */
#Layer-13 {
  position: absolute;
  left: 791px;
  top: 360px;
  width: 313px;
  height: 33px;
  z-index: 13;
}

/* You named this layer  With Esthetician Web you hav */
#Layer-14 {
  position: absolute;
  left: 867px;
  top: 423px;
  width: 481px;
  height: 208px;
  z-index: 14;
}

/* You named this layer How can we make your life easi */
#Layer-15 {
  position: absolute;
  left: 911px;
  top: 656px;
  width: 212px;
  height: 63px;
  z-index: 15;
}

/* You named this layer stellaexcellent_110 */
#Layer-16 {
  position: absolute;
  left: 965px;
  top: 738px;
  width: 104px;
  height: 66px;
  z-index: 16;
}

/* You named this layer - Provide customer service rat */
#Layer-17 {
  position: absolute;
  left: 902px;
  top: 822px;
  width: 230px;
  height: 141px;
  z-index: 17;
}

/* Here are some examples of how you might want to change the
 * look and behavior of the links on your page.  Some examples for
 * further customization are included in comments.  */
a {
  cursor: pointer;
  outline: none;
}
a:link { color: #F88; }
a:visited { color: #F88; }
a:hover {
  color: #F00;
  /* text-decoration: underline; */
  /* font-weight: bold; */
}

****************************************************************************************

Re: I have a problem with a landing page.

Posted: Thu Oct 06, 2011 8:14 pm
by Supplement
html

******************************************************

Code: Select all

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<title>Esthetician Web | Sign up today</title>


<meta name="description" content="Esthetician Web | Sign up today" />
<meta name="keywords" content="Esthetician Web | Sign up today" />
<meta name="generator" content="Esthetician Web | Sign up today" />
<link rel="shortcut icon" type="image/png" href="/favicon.ico">



<link rel="stylesheet" type="text/css" href="psd2css.css" media="screen" />

<!-- We use the jquery javascript library for DOM manipulation and
some javascript tricks.  We serve the script from Google because it's
faster than most ISPs.  Get more information and documentation
at http://jquery.com -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<!-- This is Drew Diller's PNG fix script that fixes the PNG
transparency problem with IE6.  It's available from here:
http://www.dillerdesign.com/experiment/DD_belatedPNG -->
<!--[if lt IE 7 ]>
<script type="text/javascript" src="DD_belatedPNG_0.0.8a-min.js"></script>
<![endif]-->

<!-- All the javascript generated for your design is in this file -->
<script type="text/javascript" src="psd2css.js"></script>

</head>
<body>

  <!-- This is 'Background' -->
  <div id="Layer-1" class="Background"  >
    <img src="Layer-1.png" width="1752" height="1029" alt="Background" class="pngimg" />
    <!-- This is '- Provide customer service rat' -->
    <div id="Layer-17" class=" Provide customer service rat"  >
     <font size="2px"><!--<ul><li>Provide customer service rated "excellent by STELLA Service"</li><li>Handle all shipping and returns</li><li>Manage product inventory and product purchasing</li><li>Provide customers with product information and samples--></li></ul></font> </div>

    <!-- This is 'stellaexcellent_110' -->
    <div id="Layer-16" class="stellaexcellent 110"  >
      <img src="Layer-16.png" width="104" height="66" alt="stellaexcellent" class="pngimg" /></div>

    <!-- This is 'How can we make your life easi' -->
    <div id="Layer-15" class="How can we make your life easi"  >
      <img src="Layer-15.png" width="212" height="63" alt="How can we make your life easi" class="pngimg" /></div>

    <!-- This is ' With Esthetician Web you hav' -->
    <div id="Layer-14" class=" With Esthetician Web you hav"  >
      <font size="2px"><!--With Esthetician Web, you have the potential to earn commissions for every sale! We offer a very easy program that will allow you to earn a commissioin for referring your clients to your personal domain: yourname.skincareheaven.com We supply you with a unique domain name and a welcome package to get you started. You get 15% commission for the products pruchased through your domain. Using this domain automatically tracks your clients purchases. We handle customer service, returns, shipping, product inventory, product purchasing, samples, and everything in between.--></font></div>

    <!-- This is 'Why Esthetician Web' -->
    <div id="Layer-13" class="Why Esthetician Web"  >
      <h1><!--Why Esthetician Web?--></h1></div>

    <!-- This is 'iStock_000011390980Medium' -->
    <div id="Layer-12" class="iStock 000011390980Medium"  >
      <img src="Layer-12.png" width="219" height="305" alt="iStock" class="pngimg" /></div>

    <!-- This is 'Screen shot 2011-07-27 at 1134' -->
    <div id="Layer-11" class="Screen shot 20110727 at 1134"  >
     <!-- <a href="http://www.skincareheaven.com"><img src="Layer-11.png" width="256" height="201" alt="Screen shot 2011-07-27 at 1134" class="pngimg" /></a>--></div>

    <!-- This is '  Skin Care Heaven was founded' -->
    <div id="Layer-10" class="  Skin Care Heaven was founded"  >
      <!--Skin Care Heaven was founded in 2006 by a team of Doctors, Skin Care Professionals, and Marketing and Sales Executives. We aim to provide the lowest prices and best customer service on the top skin care products purchased on the internet. We carry the top anti-aging skin care products on the market and have a high average order size. <br><p>&nbsp;&nbsp;<a href='www.skincareheaven.com'><h2>Click here to visit skincareheaven.com--></h2></a></p></div>

    <!-- This is 'Our Skin Care  Product Affilia' -->
    <div id="Layer-9" class="Our Skin Care  Product Affilia"  >
      <h1><!--Our Skin Care Product Affiliate--></h1></div>

    <!-- This is 'Sign up Today for just   199' -->
    <div id="Layer-8" class="Sign up Today for just   199"  >
      <!--<img src="Layer-8.png" width="229" height="87" alt="Sign up Today for just   199" class="pngimg" />--></div>

    <!-- This is 'Shape 5' -->
    <div id="Layer-7" class="Shape 5"  >
      <img src="Layer-7.png" width="118" height="58" alt="Shape 5" class="pngimg" /></div>

    <!-- This is 'Included - Welcome Package -' -->
    <div id="Layer-6" class="Included  Welcome Package "  >
      <font size="2px"> <br><!--<ul><li>Welcome Package</li><li>Sales training handout</li><li>X Number of Businesscards</li><li>Personalized domain name and complete setup</li><li>15% Commission on all products sold through your personalized domain name</li></ul>--></font></div>

    <!-- This is 'Shape 4' -->
    <div id="Layer-5" class="Shape 4"  >
      <img src="Layer-5.png" width="780" height="5" alt="Shape 4" class="pngimg" /></div>

    <!-- This is 'Shape 3 copy 2' -->
    <div id="Layer-4" class="Shape 3 copy 2"  >
      <img src="Layer-4.png" width="8" height="346" alt="Shape 3 copy 2" class="pngimg" /></div>

    <!-- This is 'Shape 3 copy' -->
    <div id="Layer-3" class="Shape 3 copy"  >
      <img src="Layer-3.png" width="8" height="346" alt="Shape 3 copy" class="pngimg" /></div>

    <!-- This is 'Shape 3' -->
    <div id="Layer-2" class="Shape 3"  >
      <img src="Layer-2.png" width="7" height="668" alt="Shape 3" class="pngimg" /></div>

  </div>

<!-- This is the p2cedit Text Stylizer dialog and tools.  It will not exist
in the code for your final page. -->
<div id="p2c-edit" style="display: none;"></div>
<script>$('#p2c-edit').load('/app/p2cedit/p2cedit.html');</script>


</body>
</html>

***************************************************************************************************

Re: I have a problem with a landing page.

Posted: Thu Oct 06, 2011 8:28 pm
by Supplement
Thanks Benjamin, I forgot to use the tag button. sorry!

Re: I have a problem with a landing page.

Posted: Fri Oct 07, 2011 2:33 pm
by Supplement
I think I'm just going to start over with my design, cause I made it to big in photoshop to begin with. This might help to render it at 1024 x 768?

Re: I have a problem with a landing page.

Posted: Tue Oct 11, 2011 11:04 am
by Supplement
unless anybody can help me with a fix for this auto-generated code.


:banghead:

Re: I have a problem with a landing page.

Posted: Thu Oct 13, 2011 4:03 pm
by Supplement
ok, I'm pretty much all squared away on this but I'm just wondering why I can't get it to fit fullscreen on larger screens like 22inch 1920 x 1080 resolution.

Should i just design it to something way larger? Or will that cause a problem for the smaller screens having to scroll a bunch?


http://estheticianweb.com/


help please! This thread has been destitute.

:arrow:

Re: I have a problem with a landing page.

Posted: Thu Oct 13, 2011 6:39 pm
by Supplement
so here's where I'm at now:


I got two potential fixes that I've come across. I like the more minimal code strategy but having the same problem ultimately with both.


http://estheticianwe...ll/1/index.html

http://estheticianweb.com/


Whenever you minimize the window the text jumps out of the white space...

it's always one thing or another. ack!