No replies
EK378996
EK378996's picture
Offline
newbie
Last seen: 6 years 2 weeks ago
Timezone: GMT-5
Joined: 2013-11-19
Posts: 4
Points: 6

I have designed this pricing table myself and I'm having a little trouble getting it exactly how I would like it. I want the larger div to be in front of the smaller divs with a shadow around it. Also, I'd like the smaller divs to have a shadow as well. I'd also like to center the entire table on the page, right now it's sitting to the left.

To get height and widths, I've used classes like .h020 { height: 20px;} and .width33 { width: 33% }. I didn't include those in the css I pasted here as there's a lot of them.

Right now, the far right div is over-shadowing the larger div instead of being behind it. I know my coding is redundant as I haven't played with CSS in a while and trying to read up on CSS3. Any help would be appreciated.

Here is the HTML:

<div class="ePricingTable">
	<div class="ePricingBox width25 left">
		<div class="ePackageName left h050">
			<h1>Personal</h1>
		</div>
		<div class="ePackageInfo h210">
			<p>&nbsp;</p>
			<ul class="checkmark green">
				<li><strong>4 </strong>Design Concepts</li>
				<li><strong>2 </strong>Dedicated Designers</li>
				<li><strong>2 </strong>Design Revisions</li>
				<li><strong>7 </strong>Final Files</li>
			</ul>
		</div>
		<div class="ePriceBox ePriceShadow h060">
			<h2>$179</h2>
		</div>
		<div class="ePricingButton h060"><a class="readon smallmarginright" href="index.php?option=com_proforms&amp;view=form&amp;jid=2&amp;Itemid=188"><span>WORK REQUEST</span></a>
		</div>
	</div>
	<div class="ePricingBox eBestValue width25">
		<div class="ePackageName h050">
			<h1>Business</h1>
		</div>
		<div class="ePackageInfo h225">
			<p>&nbsp;</p>
			<ul class="ePricingTable">
				<li><strong>6 </strong>Design Concepts</li>
				<li><strong>3 </strong>Dedicated Designers</li>
				<li><strong>Unlimited </strong>Design Revisions</li>
				<li><strong>7 </strong>Final Files</li>
				<li><strong>250 </strong>Printed Business Cards</li>
			</ul>
		</div>
		<div class="ePriceBox eValuePriceShadow h060">
			<h2>$299</h2>
		</div>
		<div class="ePricingButton h060"><a class="readon smallmarginright" href="index.php?option=com_proforms&amp;view=form&amp;jid=2&amp;Itemid=188"><span>WORK REQUEST</span></a>
		</div>
		<div class="h015">&nbsp;</div>
	</div>
	<div class="ePricingBox width25 right">
		<div class="ePackageName right h050">
			<h1 epricingplain="">Business Pro</h1>
		</div>
		<div class="ePackageInfo h210">
			<p>&nbsp;</p>
			<ul class="ePricingTable">
				<li><strong>10 </strong>Design Concepts</li>
				<li><strong>5 </strong>Dedicated Designers</li>
				<li><strong>Unlimited </strong>Design Revisions</li>
				<li><strong>7 </strong>Final Files</li>
				<li><strong>1000 </strong>Printed Business Cards</li>
			</ul>
		</div>
		<div class="ePriceBox ePriceShadow h060">
			<h2>$499</h2>
		</div>
		<div class="ePricingButton h060"><a class="readon smallmarginright" href="index.php?option=com_proforms&amp;view=form&amp;jid=2&amp;Itemid=188"><span>WORK REQUEST</span></a>
		</div>
	</div>
</div>

Here is the CSS:

/* ePricing Box
--------------------------------------------*/
 
.ePricingTable {
    text-align: center;
	border: 0px;
}
 
.ePricingBox {
	background: none repeat scroll 0 0 #F5F6F7;
    overflow: hidden;
    text-align: center;
	float:left;
	border: 1px solid #D2D3D4;
 	 -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
        -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
             box-shadow: 2px 2px 9px rgba(0,0,0,0.3);;
    margin: 0;
}
 
.eBestValue {	
	margin: -15px 0;
	  -webkit-border-radius: 6px;
         -moz-border-radius: 6px;
              border-radius: 6px;
 	 -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
        -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
             box-shadow: 2px 2px 9px rgba(0,0,0,0.3);;
 
}
 
.ePackageName {
    background: #505152; /* Old browsers */
background: -moz-linear-gradient(top, #505152 0%, #28292a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505152), color-stop(100%,#28292a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #505152 0%,#28292a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #505152 0%,#28292a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #505152 0%,#28292a 100%); /* IE10+ */
background: linear-gradient(to bottom, #505152 0%,#28292a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505152', endColorstr='#28292a',GradientType=0 ); /* IE6-9 */
    color: #FFFFFF;
    overflow: hidden;
    text-align: center;
    text-shadow: 0 1px 0 #000000;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
}
 
.left {
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}
 
.right {
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}
 
.ePackageName h1 {
	margin-top:10px;
	font-size:28px;
}
 
.ePricingTable ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
	font-size: 16px;
}
 
.ePriceShadow
{
text-shadow: 0 0 2px #4F5051;
}
 
.eValuePriceShadow
{
text-shadow: 0 0 2px #2B9DE6;
}