I have a problem with a landing page.

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
Supplement
Forum Commoner
Posts: 45
Joined: Thu Aug 18, 2011 8:52 pm
Location: Oceanside, CA

I have a problem with a landing page.

Post 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; */
}

****************************************************************************************
Last edited by Benjamin on Thu Oct 06, 2011 8:16 pm, edited 1 time in total.
Reason: Added [syntax=php|sql|css|javascript] and/or [text] tags.
User avatar
Supplement
Forum Commoner
Posts: 45
Joined: Thu Aug 18, 2011 8:52 pm
Location: Oceanside, CA

Re: I have a problem with a landing page.

Post 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>

***************************************************************************************************
Last edited by Benjamin on Thu Oct 06, 2011 8:17 pm, edited 2 times in total.
Reason: Added [syntax=php|sql|css|javascript] and/or [text] tags.
User avatar
Supplement
Forum Commoner
Posts: 45
Joined: Thu Aug 18, 2011 8:52 pm
Location: Oceanside, CA

Re: I have a problem with a landing page.

Post by Supplement »

Thanks Benjamin, I forgot to use the tag button. sorry!
User avatar
Supplement
Forum Commoner
Posts: 45
Joined: Thu Aug 18, 2011 8:52 pm
Location: Oceanside, CA

Re: I have a problem with a landing page.

Post 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?
User avatar
Supplement
Forum Commoner
Posts: 45
Joined: Thu Aug 18, 2011 8:52 pm
Location: Oceanside, CA

Re: I have a problem with a landing page.

Post by Supplement »

unless anybody can help me with a fix for this auto-generated code.


:banghead:
User avatar
Supplement
Forum Commoner
Posts: 45
Joined: Thu Aug 18, 2011 8:52 pm
Location: Oceanside, CA

Re: I have a problem with a landing page.

Post 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:
User avatar
Supplement
Forum Commoner
Posts: 45
Joined: Thu Aug 18, 2011 8:52 pm
Location: Oceanside, CA

Re: I have a problem with a landing page.

Post 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!
Post Reply