[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Rounded, Shaded Table

Posted on 2011-10-22
1
Medium Priority
?
225 Views
Last Modified: 2012-05-12
I'm trying to determine how to add a transparent, rounded border to an existing table.  Similar to how this demo site has theirs...

http://samples.cpasitesolutions.com/sample435/?style=435

Any ideas??
0
Comment
Question by:tru504187211
1 Comment
 
LVL 3

Accepted Solution

by:
varontron earned 2000 total points
ID: 37012048
Hi,  

It's done with css background rules.  Look at the source code of the example site.  There is a header div nested in a footer div, and each div has a css background image associated to it.

       <div class="splash-box-footer">
            	<div class="splash-box-header">
                	<div class="content-box-1">
                    	<h3>
                        	Tax Center
                        </h3>
                        • <a href="taxrefunds.php">Track Your Refund</a>
                        <br>
                        • <a href="taxduedates.php">Tax Due Dates</a>
                        <br>
                        • <a href="taxrates2.php">Tax Rates</a>
                        <br>
                        • <a href="taxpublications.php">IRS Tax Forms</a>
                        <br>
                    </div>
                	<div class="content-box-2">
                    	<h3>
                        	Resources
                        </h3>
                    	• <a href="calc-section.php">Financial Calculators</a>
                    	<br>
                    	• <a href="clientportal.php">Client Portal</a>
                    	<br>
                    	• <a href="books.php">Recommended Books</a>
                    	<br>
                    	• <a href="links.php">Internet Links</a>
                    	<br>
                    </div>
                	<div class="content-box-2">
                    	<h3>
                        	Guides
                        </h3>
						• <a href="life-events.php">Life Events</a>
                    	<br>
                    	• <a href="business-strategies.php">Business Strategies</a>
                    	<br>
                    	• <a href="quickbookstips.php">QuickBooks Tips</a>
                    	<br>
                    	• <a href="frequently-asked-questions.php">Frequently Asked Questions</a>
                    <br>   
                    </div>
                    <br class="clearfloat">
                </div>
            </div>

Open in new window


The css:
.splash-box-footer {
    background:url(/images/galleries/style/435/splash_box_footer.png) bottom no-repeat;
    min-height:140px;
}
.splash-box-header {
    background:url(/images/galleries/style/435/splash_box_header.png) top no-repeat;
    min-height:140px;
}

Open in new window


Typically, folks create a rounded corner png for each corner (TLBR), and then reuse them.  

Check out the source code on other pages you see with effects like these.

Dave
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question