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
TrueBlueAsked:
Who is Participating?
 
remorinaCommented:
Ok, apologies for my mis-understanding.
Now you need to wrap your whole page in a div and give it a border, the wrapper you already have will work but you need to adjust its width, currently you have it set to 350px wide

Update the class as below, and remove the height as well.
#wrapper {
    background: none repeat scroll 0 0 #FFFFFF;
    margin-left: auto;
    margin-right: auto;
    width: 750px;
}

Open in new window

0
 
bill30Commented:
wrap this code around what you want to have a green border
<div id="wrapper" style="border:10px solid green;">
everything to have 10 px green border
</div>



or instead of "green" look up the hex code http://www.malin.us/htmlstuff.htm
and put in the format of #FFFFFF

0
 
remorinaCommented:

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

0
 
TrueBlueAuthor Commented:
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

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.