asked on

need green border around exterior of elements on page

HI!

I would greatly appreciate someone showing how to add a 10 pixel green border around the exterior of the elements on this page by either modifying the existing rule(s) or adding a few new rule(s) to the existing style sheet for this page.
http://www.orlando-web-hosting.net/
TIA

SOLUTION

bill30

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

remorina

I'll assume by elements you mean the Plans, the only issue with this part is that you're using a table and rows & columns are shared, so if you still want to keep the same structure you would have to implement additional rules for the first row cells, middle rows and the last row cells.

The 1st row would have a top, right and left border, then middle ones only right and left border, then bottom ones would have left, right and bottom border.

I've taken that portion of your page along with relevent CSS and constructed the below example to show how this can be achieved, try the example below, you'll see that I've added 3 new classes (b1, b2 & b3) and assigned them to the cells respectively.

Cheers!

<!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>
    <title></title>
    <style type="text/css">
        body{
        width:750px;
        background:#2680C6 url(../_themes/hosting-blue/trans_spacer.gif);
        text-align:center;
        margin:0 auto;
        }
        A:hover{
        text-decoration:underline;
        font:bold 14px Arial, Arial, Helvetica, sans-serif;
        color:#F0F;
        }
        tr{
        font-family:Arial, Arial, Helvetica, sans-serif;
        text-align:left;
        font-size:10px;
        }
        .buynowbutton{
        font-size:11px;
        }
        .cat{
        width:100%;
        font-size:14px;
        }
        .col1{
        text-align:center;
        width:75px;
        font-size:14px;
        background:#CCFFFF;
        }
        .col2{
        text-align:center;
        width:75px;
        font-size:14px;
        background:#99CCFF;
        }
        .col3{
        text-align:center;
        width:75px;
        font-size:14px;
        background:#6666FF;
        }
        .col4{
        text-align:center;
        width:75px;
        font-size:14px;
        background:#CCFFFF;
        }
        .col5{
        text-align:center;
        width:75px;
        font-size:14px;
        background:#99CCFF;
        }

        /* New Classes */
        .b1 {border-left:solid 10px green; border-right:solid 10px green; border-top:solid 10px green;}
        .b2 {border-left:solid 10px green; border-right:solid 10px green;}
        .b3 {border-left:solid 10px green; border-right:solid 10px green;border-bottom:solid 10px green;}
    </style>
</head>
<body>
<table width="450" cellspacing="0" cellpadding="0" border="0" id="table5" style="border-collapse: collapse;">
 		  			<tbody><tr>
						<td class="hdr">Windows<br>Hosting Plans</td>
    					<td class="col1 b1"><b>&nbsp;Pewter&nbsp;</b></td>
						<td class="col2 b1"><b>&nbsp;Bronze&nbsp;</b></td>
						<td class="col3 b1"><b>&nbsp;&nbsp;&nbsp;&nbsp;Silver&nbsp;&nbsp;&nbsp;&nbsp;</b></td>
						<td class="col4 b1"><b>&nbsp;&nbsp;&nbsp;&nbsp;Gold&nbsp;&nbsp;&nbsp;</b></td>
						<td class="col5 b1"><b>Platinum</b></td>
					</tr>
					<tr>
						<td class="cat">Disk Space</td>
						<td class="col1 b2">100 MB </td>
						<td class="col2 b2">200 MB </td>
						<td class="col3 b2">300 MB </td>
    					<td class="col4 b2">400 MB </td>
						<td class="col5 b2">500 MB </td>
					</tr>
					<tr>
						<td class="cat">Monthly Transfer</td>
						<td class="col1 b2">2 GB </td>
						<td class="col2 b2">4 GB </td>
						<td class="col3 b2">6 GB </td>
						<td class="col4 b2">8 GB </td>
						<td class="col5 b2">10 GB </td>
					</tr>
					<tr>
						<td class="cat">Monthly hosting</td>
						<td class="col1 b2"><b>$6.50</b></td>
						<td class="col2 b2"><b>$10.95</b></td>
						<td class="col3 b2"><b>$18.95</b></td>
						<td class="col4 b2"><b>$28.95</b></td>
						<td class="col5 b2"><b>$38.95</b></td>
					</tr>
					<tr>
						<td class="cat"><a href="windows-hosting-plans-overview.asp">Windows Comparison</a></td>
		    			<td class="col1 b3">
        				 <form target="_blank" action="https://cp.orlando-web-hosting.net/psoft/servlet/psoft.hsphere.CP" method="Post">
                           <input type="hidden" value="signup" name="action">
                           <input type="hidden" value="7411" name="plan_id">
                           <input type="hidden" value="yes" name="signup">
                           <input type="hidden" value="signup/begin.html/" name="template_name">
                           <input type="submit" value="Buy Now" title="Pewter Windows Hosting Plan Buy Now Button | Orlando Web Hosting" class="buynowbutton">
                         </form>
                        </td>				
						<td class="col2 b3">
						 <form target="_blank" action="https://cp.orlando-web-hosting.net/psoft/servlet/psoft.hsphere.CP" method="Post">
                           <input type="hidden" value="signup" name="action">
                           <input type="hidden" value="7412" name="plan_id">
                           <input type="hidden" value="yes" name="signup">
                           <input type="hidden" value="signup/begin.html/" name="template_name">
                           <input type="submit" value="Buy Now" title="Bronze Windows Hosting Plan Buy Now Button | Orlando Web Hosting" class="buynowbutton">
                         </form>
                        </td>
						<td class="col3 b3">
						  <form target="_blank" action="https://cp.orlando-web-hosting.net/psoft/servlet/psoft.hsphere.CP" method="Post">
                           <input type="hidden" value="signup" name="action">
                           <input type="hidden" value="7413" name="plan_id">
                           <input type="hidden" value="yes" name="signup">
                           <input type="hidden" value="signup/begin.html/" name="template_name">
                           <input type="submit" value="Buy Now" title="Silver Windows Hosting Plan Buy Now Button | Orlando Web Hosting" class="buynowbutton">
                         </form>
                        </td>
						<td class="col4 b3">
                         <form target="_blank" action="https://cp.orlando-web-hosting.net/psoft/servlet/psoft.hsphere.CP" method="Post">
                           <input type="hidden" value="signup" name="action">
                           <input type="hidden" value="7414" name="plan_id">
                           <input type="hidden" value="yes" name="signup">
                           <input type="hidden" value="signup/begin.html/" name="template_name">
                           <input type="submit" value="Buy Now" title="Gold Windows Hosting Plan Buy Now Button | Orlando Web Hosting" class="buynowbutton">
                         </form>
  						</td>
						<td class="col5 b3">
						  <form target="_blank" action="https://cp.orlando-web-hosting.net/psoft/servlet/psoft.hsphere.CP" method="Post">
                           <input type="hidden" value="signup" name="action">
                           <input type="hidden" value="7415" name="plan_id">
                           <input type="hidden" value="yes" name="signup">
                           <input type="hidden" value="signup/begin.html/" name="template_name">
                           <input type="submit" value="Buy Now" title="Platinum Windows Hosting Plan Buy Now Button | Orlando Web Hosting" class="buynowbutton">
                         </form>
                        </td>
					</tr>              
   		   </tbody></table>
</body>
</html>

Open in new window

TrueBlue

ASKER

Remorina & bill30,

I meant a border around the existing page.
I tried bill30's suggestion, but the border seems to stop part way around the page and breaks the bottom of the page where the copyright text is.
Here is a test page:
http://www.orlando-web-hosting.net/testpage1.asp

ASKER CERTIFIED SOLUTION

remorina

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial