etidd,
Just for fun, give these a try. You might like them.
@charset "utf-8";
/* ///filename: lp2.css \\\\\\ */
/* DELETE the lines commented "LAYOUT TESTING" before publishing */
* { /* probably not a great idea */
font-family:Verdana, Geneva, sans-serif;
padding:0;
margin:0 auto;
}
body {
background-image:url("lpbg.gif");
background-position:50% 0;
background-attachment:fixed;
margin-top:15px;
}
#bgtop {
background-image:url("lpheader.gif");
background-repeat:no-repeat;
width:960px;
height:60px;
}
#bgmid {
background-image:url("lpbody.gif");
background-repeat:repeat-y;
width:960px;
padding:1px 0;
}
#bgbotm {
background-image:url("lpfooter.gif");
background-repeat:no-repeat;
width:960px;
height:90px;
}
/* lpcontent is the content area. The negative top and bottom margins extend #lpcontent over #bgtop and #bgbotm. */
#lpcontent {
outline:1px solid magenta; /* LAYOUT TESTING */
/* background-color:#fdf; /* LAYOUT TESTING */
width:796px;
padding:0px;
margin:-31px auto -70px;
/* position:relative; /* LAYOUT TESTING required for lpcontent bg color to reach footer */
}
/* 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; /* add space above the "Lowest ... Costs Here" line. */
padding-bottom:2px; /* add space below the "Lowest ... Costs Here" line. */
margin:0px;
}
.headtitle span { /* text says "Find the Lowest ... Costs Here" */
border-bottom:2px groove #000;
font-style:italic;
font-size:14pt;
line-height:1;
font-family:"Lucida Console", Monaco, monospace;
}
.floatRight,
.floatLeft {
overflow:hidden;
margin:8px 0; /* vertical margin between content sections, if desired */
}
.floatRight img {
float:right;
margin-left:4px;
}
.floatLeft img {
float:left;
margin-right:8px;
}
p {
padding:0;
margin:0;
}
p + p {margin-top:4px;}
/* getquotes contains the "Get Quotes" link */
#getquotes {
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;
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:99;
}
h2 a:after {
content:" ";
background:url("lplinkend.gif") no-repeat 100% 0;
height:44px;
right:-14px;
position:absolute;
top:0;
width:26px;
z-index:99;
}
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:99;
}
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:99;
}
/* 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 */
}
#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;
}
h3 {
line-height:1em;
text-align:right;
margin:9px 60px 0px;
}
h3 a {
color:#f60;
font-size:14px;
}
h3 a:hover,
h3 a:active,
h3 a:focus {
color:#f90;
text-decoration:none;
}
/* "World Review Group" line */
h4 {
font-size:8px;
text-align:center;
padding-top:4px;
margin:0;
}
.hazard {color:#F00; font-size:12pt; font-weight:bold;}
.hazard:hover {text-decoration:blink;}
.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;}
<!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">
<!--
http://www.sitepoint.com/forums/showthread.php?885559-Hover-Effect-on-H2-Bottom-Link-is-Weird
Sep 14, 2012 10:02
Thread: Hover Effect on H2 Bottom Link is Weird
etidd
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="This page contains information on how to get home insurance quotes online, so you can find the best policy for your needs." />
<meta name="Keywords" content="home insurance quotes online, home insurance quotes, best home insurance rates, best home insurance policy, home insurance rate quotes, home insurance rate quotes online" />
<meta http-equiv="Content-Language" content="en" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="../style/lp2.css" rel="stylesheet" type="text/css" media="screen,projection,tv" />
<title>Get Home Insurance Rate Quotes from All Carriers</title>
</head>
<body>
<div id="bgtop"></div>
<div id="bgmid"> <!-- begin body div -->
<div id="lpcontent"> <!-- begin lpcontent div -->
<div id="lptitle">
<img src="homeinsurance.gif" class="sectionicon" id="homeinsurance" alt=" " title="homeinsurancesection" />
<h1>home & property insurance</h1>
</div>
<p class="headtitle"><span>Protect Your Home's Investment with Home Insurance Rate Quotes!</span></p>
<!-- alternating text and images go BELOW this line -->
<div class="floatRight">
<img src="homeinsurancerates1.jpg" title="Protect your #1 investment!" alt="Protect your #1 investment!" />
<p class="hazard">Attention! What will Cover Your Losses Resulting from a Natural Disaster?</p>
<p class="articletext">Getting quotes from a large number of home insurance providers is the best solution to getting the most comprehensive coverage for a reasonable premium. Services like these will expand your horizons, so the consumer can get the full spectrum of the property insurance world. Act now so there will be coverage for your home if and when disaster strikes!</p>
</div>
<div class="floatLeft">
<img src="homeinsurancerates2.jpg" title="Keep your home looking like this after a storm." alt="Keep your home looking like this after a storm." />
<p class="articletext">We have made a considerable effort to bring you the quoting tools you need to shop for the best policy for your needs. <!-- aff link needed --><a href="#">Insurelane</a> offers an efficient tool for receiving quotes for property insurance, but there are a bunch of other available applications. Another one that's worth checking out can be found at <!-- aff link needed --><a href="#">LowerMyHomeInsuranceRate.com</a>.</p>
</div>
<!-- alternating text and images go ABOVE this line -->
<div id="getquotes">
<h2><a href="#">Get a Property Insurance Quote</a></h2>
</div>
<div id="lpfoot">
<form id="emailbox" name="form1" method="post" action="">
<div>
<label for="go">Join the Mailing List!<span></span></label>
<input type="text" name="go" id="go" value="your e-mail" onclick="input_focus(this)" onblur="input_reset(this)" />
<input type="submit" value="Join" />
</div>
</form>
<h3>
<a href="../index.html">Back to the Home Page ––></a><br />
<a href="../insurance.html">Back to the Insurance Section ––></a>
</h3>
</div>
<h4>©World Review Group</h4>
</div>
</div>
<div id="bgbotm"></div>
<script type="text/javascript" src="../Scripts/emailbox.js"></script>
</body>
</html>
<!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">
<!--
http://www.sitepoint.com/forums/showthread.php?901107-Bottom-Graphic-Not-Fully-Appearing&p=5215481&viewfull=1#post5215481
Thread: Bottom Graphic Not Fully Appearing
etidd
In etidd's version, the images were stagger-floated in a common div without obvious separation between text. Interesting effect.
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="This page contains information on how to get health insurance quotes online, so you can find the best policy for your needs." />
<meta name="Keywords" content="health insurance quotes online, health insurance quotes, best health insurance rates, best health insurance policy, health insurance rate quotes, health insurance rate quotes online" />
<meta http-equiv="Content-Language" content="en" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="../style/lp2.css" rel="stylesheet" type="text/css" media="screen,projection,tv" />
<title>Get Health Insurance Rate Quotes from All Carriers</title>
</head>
<body>
<div id="bgtop"></div>
<div id="bgmid"> <!-- begin body div -->
<div id="lpcontent"> <!-- begin lpcontent div -->
<div id="lptitle">
<img src="healthinsurance.gif" class="sectionicon" alt="" title="healthinsurancesection" />
<h1>health insurance</h1>
</div>
<p class="headtitle"><span>Find the Lowest Out-of-Pocket Health Insurance Costs Here</span></p>
<!-- alternating text and images go BELOW this line -->
<div class="floatLeft">
<img src="healthinsurancerates1.jpg" title="Select the healthcare plan best for your needs." alt="Select the healthcare plan best for your needs."/>
<p class="hazard">Attention! You run the risk of being liable for all healthcare costs if you are not covered by an insurace policy.</p>
<p class="articletext">Paying out-of-pocket for health insurance usually results in the insured does not get benefits from one's employer and is otherwise an irritating, yet necessary, expense. Injuries, illnesses, and other ailments can occur to anyone at any unexpected time, though, and having no coverage leaves one at great risk of crippling expenses to get the required healthcare at the time of emergency. So, given its essential value, how can you be covered in the most cost-efficient way? Getting quotes from a large number of health insurance providers is one of the only known options available to minimize the cost of healthcare premium. Here you can find tools to evaluate available policy options and achieve peace of mind when you discover the rates you found possible with these online health insurance quote tools.</p>
</div>
<div class="floatRight">
<img src="healthinsurancerates2.jpg" title="Keep your home looking like this after a storm." alt="Keep your home looking like this after a storm." />
<p class="articletext">Take advantage of the opportunity to weigh in on out-of-pocket health insurance costs. <!-- aff link needed --> <a href="#">This health insurance site</a>, Health Quote Insider, offers effective quotes from a plethora of carriers, but there are <!-- aff link needed --> <a href="#">other quotes available</a> with COBRA alternatives if you qualify. Check out the other <!-- aff link needed --> <a href="#">health insurance quote website</a> at BestQuotes.com, and one of the most thorough healthcare insurance quote tools we know of is brought to you by <!-- aff link needed --> <a href="#">Quote It 4 Me</a>. The last healthcare solutions provider we know of is <!-- aff link needed --> <a href="#">US Insurance Online</a>, and they provide all types of insurance solutions to people within the fifty states.</p>
</div>
<!-- alternating text and images go ABOVE this line -->
<div id="getquotes">
<h2><a href="#">Get Health Insurance Quotes</a></h2>
</div>
<div id="lpfoot">
<form id="emailbox" name="form1" method="post" action="">
<div>
<label for="go">Join the Mailing List!<span></span></label>
<input type="text" name="go" id="go" value="your e-mail" onclick="input_focus(this)" onblur="input_reset(this)"/>
<input type="submit" value="Join" />
</div>
</form>
<h3>
<a href="../index.html">Back to the Home Page ––></a><br />
<a href="../insurance.html">Back to the Insurance Section ––></a>
</h3>
</div>
<h4>©World Review Group</h4>
</div> <!-- /lpcontent -->
</div> <!-- /bgmid -->
<div id="bgbotm"></div>
<script type="text/javascript" src="../Scripts/emailbox.js"></script>
</body>
</html>