Okay, I set up a new design that resembles a piece of notebook paper. I like it.
I uploaded to a new test page that has a beta style sheet that I named lptest.css.
This is the markup on my first try:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="This page contains information on how to get life insurance quotes online, so you can find the best policy for your needs." />
<meta name="Keywords" content="life insurance quotes online, life insurance quotes, best life insurance rates, best life insurance policy, life insurance rate quotes, life insurance rate quotes online, 2insure4less, 2insure4less review, life insurance quote site, 2insure4less life insurance" />
<meta http-equiv="Content-Language" content="en" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="../style/lptest.css" rel="stylesheet" type="text/css" media="screen,projection,tv" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<title>Eliminating Financial Vulnerabilities with a Life Insurance Policy</title>
</head>
<body>
<div id="container">
<div id="lpcontent"><!-- begin lpcontent div -->
<div id="topleft"></div>
<div id="topcenter">
<div id="lptitle">
<img src="../insurance/lifeinsurance.gif" class="sectionicon" alt=" " title=" " />
<h1>life insurance</h1>
</div>
</div><!-- end top-center div -->
<div id="topright"></div>
<div id="midleft"></div>
<div id="midcenter"><!-- begin body div -->
<p class="headtitle"><span>Quantifying Life Insurance Costs with Online Quoting Tools</span></p>
<!-- alternating text and images below this line -->
<div class="floatRight">
<img src="../insurance/2insure4lesslifereview1.jpg" title="Life Insurance Policy" alt="Live a bit more securely after obtaining a life insurance policy." />
<p class="hazard">Attention: Without a coverage plan, a death in the family leaves successors liable for unnecessary costs.</p>
<p class="articletext">Choosing a insurance policy package is nearly always a daunting endeavor, from getting an <span class="bold">accurate quote</span> to signing the paperwork after handling the actual insurance provider, which can be <span class="italic">strenuous in and of itself</span>. When dealing with life insurance, there especially seems to be unexpected avenues, leaving an absence of coverage for something you may have wanted to incorporate before. The use of an online quoting tool eliminates much of the frustration as one can see general estimates and communicate with agents to make sure that the <span class="bold">appropriate coverage level</span> is sought after, as we will discover what are the most common mistakes when looking for a proper policy.</p>
</div>
<div class="floatLeft">
<div class="listwrapper">
<img src="../insurance/2insure4lesslifereview2.jpg" title="Ideas for Your Life Insurance" alt="Hopefully, these exposed mistakes help explain how you can make this a simple & painless errand." />
<p class="articletext">The majority of folks have not a clue where to start when deciding what their needs are in their life insurance policy. That's why companies have agents on–hand to help, but let's discuss why life insurance can be more confusing & complex than, say, car insurance. The most common hiccups include the following:</p>
<ul>
<li><span class="bold">Procrastination in getting a policy</span>
<ul>
<li>The older people become and as their health declines, life insurance becomes increasingly expensive, if not entirely unobtainable.</li>
</ul>
</li>
<li><span class="bold">Purchasing the Wrong Term Length</span>
<ul>
<li>Oftentimes, people request the wrong time length for their coverage.</li>
</ul>
</li>
<li><span class="bold">Choosing the wrong coverage amount</span>
<ul>
<li>Make sure to have a good idea of all the expenses to be covered post–mortem. An agent can help to calculate the appropriate coverage amount.</li>
</ul>
</li>
<li><span class="bold">Getting life insurance without a medical exam</span>
<ul>
<li>Without recent medical history, an insurance provider has to average out the mortality risk, which usually raises the rates on term life insurance.</li>
</ul>
</li>
<li><span class="bold">Insuring only the breadwinner</span>
<ul>
<li>It's paramount to realize that other household members hold financial value, as they perform other important tasks like maintaining the home, that otherwise has to be outsourced to maids and lawn service crews.</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="floatRight">
<img src="../insurance/2insure4lesslifereview3.jpg" title="Family Protection with Life Insurance" alt="Every family needs a financial umbrella over them for when a very rainy day comes, and we all know what that means when discussing life insurance." />
<p class="articletext">Now, people need to know where they can find general estimates as well as where to gain access to agents that help sound out the specifics of the coverage families & individuals are in pursuit of. Not only that, but it's also paramount to find the <span class="bold">best brokerage</span> with the most vast network of insurance providers, <span class="bold">guaranteeing</span> that the rates will be the most competitive. This has the effect of expanding one's horizons instead of just going through the carrier directly. One of the efficient online brokerages we were able to find is <a href="../go/2insure4lesslife2.html">2Insure4Less</a>. Make sure to give them a try to see a rate comparison, and try to have some of the aforementioned information at your disposal when making a request.
</p>
</div>
<!-- end alternating text and images -->
<div id="bottomlink">
<h2><a href="../go/2insure4lesslife2.html" title="2Insure4Less">Get Life Insurance Quotes</a></h2>
</div>
</div><!-- end mid-center div -->
<div id="midright"></div>
<div id="botleft"></div>
<div id="botcenter"><!-- begin bottom-center div -->
<form id="emailbox" name="form1" method="get" action="../Scripts/emailtester.php">
<div>
<label for="go">Join the Mailing List!<span></span></label>
<input type="text" name="go" id="go" value="your e-mail" maxlength="30" />
<input type="submit" value="Join" />
</div>
</form>
<div id="invalidemail"></div>
<h3>
<a href="../index.html">Back to the Home Page ––></a><br />
<a href="../insurance.html">Back to the Insurance Section ––></a>
</h3>
<h4>©World Review Group</h4>
</div><!-- end bottom-center div -->
<div id="botright"></div><!-- bottom-right -->
<div id="blackoverlay"></div>
<div id="submissionform"> <!-- begin 2nd form markup -->
<form name="form2" method="post" action="../Scripts/confirmform.php">
<div>
<label for="confirmemail" class="fixedwidth">Confirm your e-mail:<span class="required">*</span></label>
<input type="text" name="confirmemail" id="confirmemail" value="" maxlength="30" class="inputwidth" />
</div>
<div>
<label for="name" class="fixedwidth">Enter your name:<span class="required">*</span></label>
<input type="text" name="name" id="name" value="" maxlength="25" class="inputwidth" />
</div>
<div>
<label for="age" class="fixedwidth">Select your age range:</label>
<select name="age" id="age" class="inputwidth">
<option selected="selected">Select an Age Range</option>
<option>18-35</option>
<option>36-55</option>
<option>55+</option>
<option>17 or younger</option>
</select>
</div>
<div>
<label for="gender" class="fixedwidth">Select your gender:</label>
<select name="gender" class="inputwidth" id="gender">
<option selected="selected">Select Gender</option>
<option>Male</option>
<option>Female</option>
</select>
</div>
<div>
<label for="country" class="fixedwidth">Select your location:<span class="required">*</span></label>
<select name="country" id="country" class="inputwidth">
<option selected="selected">Select Country</option>
<option>United States</option>
<option>United Kingdom</option>
<option>Canada</option>
<option>Australia</option>
<option>Russia</option>
<option>Brazil</option>
<option>Africa</option>
<option>Somewhere else</option>
</select>
</div>
<p id="spamtext">To prevent spam, please answer:<span class="required">*</span></p>
<label for="addition" id="math"></label>
<input name="addition" id="addition" value="" maxlength="3" />
<div id="errormessage">
<p> </p>
</div>
<label for="aicatcher" class="aicatcher">Please leave this field blank:</label>
<input type="text" name="aicatcher" class="aicatcher" id="aicatcher" value="" />
<input type="submit" value="Sign Me Up!" class="formsubmitbutton" id="finalsubmit"/>
<input type="reset" value="Cancel" class="formsubmitbutton" id="cancel"/>
</form>
</div>
<div id="successfulsubmit">
<h3> </h3>
<p> </p>
<h4> </h4>
</div>
</div><!-- end background middle -->
<div id="bgbotm"></div>
</div><!-- end landing page content -->
</div><!-- end container div -->
<script src="http://www.mediatraffic.com/roi.php?iadv=92363"></script>
<script type="text/javascript" src="../Scripts/jQuery.js"></script>
<script type="text/javascript" src="../Scripts/lpemailbox.js"></script>
<script type="text/javascript" src="../Scripts/analytics.js"></script>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</body>
</html>
The styles:
@charset "utf-8";
/* Landing Page Style Sheet */
*{
font-family:"Times New Roman", Times, serif;
padding:0;
margin:0 auto;
}
body{
background-image:url("lpbg.gif");
background-position:50% 0;
background-attachment:fixed;
margin-top:15px;
}
#container{width:960px; margin:0 auto;}
#topleft{
background-image:url("lptopleft1.png");
width:54px;
height:84px;
}
#topcenter{
background:url("lptopcenter1.png") repeat-x;
height:84px;
}
#topright{
background-image:url("lptopright1.png");
width:54px;
height:84px;
}
#midleft{
background:url("lpmidleft1.png") repeat-y;
width:54px;
}
#midcenter{
background:url("lpmidcenter1.gif") repeat;
}
#midright{
background:url("lpmidright1.png") repeat-y;
width:54px;
}
#botleft{
background-image:url("lpbotleft1.png");
width:54px;
height:64px;
}
#botcenter{
background:url("lpbotcenter1.png") repeat-x;
height:64px;
}
#botright{
background-image:url("lpbotright1.png");
width:54px;
height:64px;
}
/* lpcontent is the content area. The negative top and bottom margins extend #lpcontent over #bgtop and #bgbotm. */
#lpcontent{
width:796px;
padding:0px;
margin:-31px auto -70px;
position:relative;
}
/* lptitle contains the section icon and header title */
#lptitle{
height:60px;
overflow:hidden;
}
.sectionicon{
height:60px;
width:60px;
float:left;
margin:0px;
}
h1{
position:relative;
margin:8px 0 0 20px;
padding:0 3px 0 3px;
}
h1{
float:left;
text-align:left;
font-size:25px;
background:url("lpheaderbody.gif") repeat-x scroll 0 0;
width:auto;
height:35px;
text-shadow:1px 1px 1px #030;
letter-spacing:1px;
}
h1:after{
content:" ";
background:url("lpheaderend.gif") no-repeat 100% 0;
height:35px;
right:-14px;
position:absolute;
top:0;
width:14px;
z-index:1;
}
h1:before{
content:" ";
background:url("lpheaderstart.gif") no-repeat 0 0;
height:35px;
left:-14px;
position:absolute;
top:0;
width:14px;
z-index:1;
}
.headtitle{
padding-top:4px;
padding-bottom:2px;
margin:0px;
}
.headtitle span{
border-bottom:2px groove #000;
font-style:italic;
font-size:14pt;
line-height:1;
font-weight:bold;
}
.floatRight,
.floatLeft{
overflow:hidden;
margin:8px 0; /* vertical margin between content sections */
}
.floatRight img{
float:right;
margin-left:2em;
border:3px inset #000;
}
.floatLeft img{
float:left;
margin-right:8px;
border:3px inset #000;
}
p{
padding:0;
margin:0;
}
p + p{margin-top:4px;}
/* bottomlink contains the h2 link */
#bottomlink{
overflow:hidden;
padding-top:16px;
padding-left:130px;
}
h2 a{
position:relative;
margin:0px 0 0px 20px;
padding:1px 1px 0 1px;
}
h2 a{
color:#009;
text-shadow:1px 1px 1px #000;
}
h2 a{
float:left;
font-size:30px;
font-style:italic;
font-weight:bold;
letter-spacing:1px;
text-align:center;
width:auto;
height:44px;
background:url("lplinkbody.gif") repeat-x scroll 0 0 transparent;
}
h2 a:before{
content:" ";
background:url("lplinkstart.gif") no-repeat 0 0;
height:44px;
left:-14px;
position:absolute;
top:0;
width:26px;
z-index:1;
}
h2 a:after{
content:" ";
background:url("lplinkend.gif") no-repeat 100% 0;
height:44px;
right:-14px;
position:absolute;
top:0;
width:26px;
z-index:1;
}
h2 a:hover{color:#FFF; text-decoration:none;}
h2 a:hover:before{
content:" ";
background:url("lplinkstartafter.gif") no-repeat 0 0;
height:44px;
left:-14px;
position:absolute;
top:0;
width:26px;
z-index:1;
}
h2 a:hover{
float:left;
font-size:30px;
font-style:italic;
font-weight:bold;
text-align:center;
width:auto;
height:44px;
background:url("lplinkbodyafter.gif") repeat-x scroll 0 0 transparent;
}
h2 a:hover:after{
content:" ";
background:url("lplinkendafter.gif") no-repeat 100% 0;
height:44px;
right:-14px;
position:absolute;
top:0;
width:26px;
z-index:1;
}
/* lpfoot contains the Mailing List box and the Back To nav links */
#lpfoot{
/*overflow:hidden;*/
padding-top:20px; /* set space beneath the Quotes link here */
position:relative;
}
#emailbox{
float:left;
height:54px;
width:216px;
position:relative;
overflow:hidden;
margin:0px 0 0 60px;
}
#emailbox label,
#emailbox label span{
position:absolute;
top:0;
left:0;
z-index:1;
height:54px;
width:216px;
text-align:center;
font-size:20px;
}
#emailbox label span{
background:url("sectionemailbox.gif") no-repeat 0 0;
}
#go{
width:130px;
margin:30px 0 0 19px;
}
#emailbox input{
position:relative;
z-index:1;
}
.submit{
overflow:hidden;
margin:26px 0 0;
}
#submissionform{
margin:0 auto;
background:url("lpsubmission.gif") no-repeat scroll 50% 0 transparent;
width:330px;
height:320px;
position:absolute;
display:none;
bottom:80px;
left:220px;
z-index:2;
padding:60px 10px 0 26px;
text-align:left;
}
#submissionform div{padding-bottom:3px;}
.fixedwidth{
width:150px;
float:left;
}
.inputwidth{width:160px;}
.required{color:red;}
.formsubmitbutton{margin-left:50px; margin-top:10px;}
#errormessage{color:red; height:40px; padding:0 24px 4px 0; margin-right:10px; font-weight:bold; font-size:15px;}
#errormessage p{margin:0; padding:0;}
#errormessage a{color:#09C;}
#errormessage a:hover{color:#0CC; text-decoration:none;}
#successfulsubmit{
margin:0 auto;
background:url("lpsubmissionsuccess.gif");
width:450px;
height:130px;
position:absolute;
display:none;
bottom:268px;
left:175px;
z-index:3;
}
#successfulsubmit p{
margin:0;
padding-left:27px;
}
#successfulsubmit h3{
margin:0;
text-align:left;
padding:15px 0 2px 13px;
text-shadow:1px 1px 1px #0C3;
}
#successfulsubmit h4{
color:red;
font-weight:bold;
margin:0;
font-size:14px;
padding:10px 14px 0 0;
text-align:right;
}
#blackoverlay{
display:none;
position:fixed;
top:0%;
left:0%;
width:100%;
height:100%;
min-width:1171px;
min-height:1010px;
background-color:black;
z-index:2;
-moz-opacity: 0.8;
opacity:.80;
filter:alpha(opacity=80);
}
.listwrapper ul{
margin:0;
list-style:disc;
list-style-position:inside;
}
.listwrapper ul ul{list-style:square; list-style-position:inside; position:relative; left:2em; margin-right:2em;}
.listwrapper{
zoom:1.0;
overflow:hidden;
}
#spamtext{padding:2px 0 2px 0; margin:0;}
#math{font-weight:bold; text-align:center;}
#addition{width:50px;}
#invalidemail{background:url("invalidemail2.gif") no-repeat scroll 50%; width:140px; height:40px; position:absolute; top:35px; left:94px; z-index:0;}
.aicatcher{display:none; visibility:hidden;}
input, select{background-color:#FFF;}
input:focus, select:focus{background-color:#DEE4EF;}
/* webkit browser fixes */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#submissionform div{padding-bottom:1px;}
}
h3{
line-height:1em;
text-align:right;
margin:9px 60px 0px;
}
h3 a{
color:#f60;
font-size:14px;
}
h3 a:hover,
h3 a:active{
color:#f90;
text-decoration:none;
}
/* "World Review Group" line */
h4{
font-size:8px;
text-align:center;
padding-right:260px;
padding-top:6px;
margin:0;
}
#smaller{font-size:13px; font-weight:bold;}
.hazard{color:#F00; font-size:12pt; font-weight:bold;}
.hazard:hover{text-decoration:blink;}
.headerstatement{font-size:12pt; color:#063; font-weight:bold;}
.articletext{font-size:11pt;}
.articletext a{color:#06C;}
.articletext a:hover{color:#0CF; text-decoration:none;}
.italic{font-style:italic;}
.bold{font-weight:bold;}
.ib{font-weight:bold; font-style:italic;}
@media screen and (max-width:960px){
#bgtop, #bgmid, #bgbotm{
max-width:100%;
height:auto;
width:auto\\9; /* ie8 */
margin:0;
margin-left:2%;
}
#lpcontent{
width:auto;
}
img{
max-width:100%;
height:auto;
width:auto\\9; /* ie8 */
}
}
/* END */
As you will see, there is no mid-left nor mid-right sections appearing. The positioning- well, I’m not really sure what to do there. Maybe the left and right pieces need to be absolutely positioned; whereas, the middle pieces will be relatively positioned. This is what needs to happen first before tackling the media queries.
This design will have to be for more capable devices with larger screen resolutions. I’m going to need to come up with something else for mobile devices.
This is not what I wanted to hear, but it’s the truth.
If anything works out, I’ll let you know, of course.