Free Weekly Tech Newsletter

Colonel Sanders · 06-03-2004, 01:55 AM

I'm working on a new look for my web-site. In the end, I want the overall look to have a red background, with white boxes with a thin black border. I've managed a ghetto makeup of this with a bunch of tables, but that gives me the default gray "3d" borders, I simply want a thin sold black line.

Here is a link to the site which inspired me:

http://www.thetechguide.com/

And the page I'm working on for my re-design.

http://users.pld.com/djohns/restart.html

TIA, L J

**Force Flow** · 06-03-2004, 09:13 AM

Here ya go. All you have to do is set all the border colors to black.

PHP Code:


			
<HTML>

<HEAD>

<TITLE>Re-design</TITLE>



<SCRIPT LANGUAGE = "JavaScript">

<!--

       

if (document.images) {



writingon = new Image(132,24);

writingon.src = "http://users.pld.com/djohns/writing_on.jpg";

writingoff = new Image(132,24);

writingoff.src = "http://users.pld.com/djohns/writing_off.jpg";



musicon = new Image(132,24);

musicon.src = "http://users.pld.com/djohns/music_on.jpg";

musicoff = new Image(132,24);

musicoff.src = "http://users.pld.com/djohns/music_off.jpg";



linkson = new Image(132,24);

linkson.src = "http://users.pld.com/djohns/links_on.jpg";

linksoff = new Image(132,24);

linksoff.src = "http://users.pld.com/djohns/links_off.jpg";



abouton = new Image(132,24);

abouton.src = "http://users.pld.com/djohns/about_on.jpg";

aboutoff = new Image (132,24);

aboutoff.src = "http://users.pld.com/djohns/about_off.jpg";



homeon = new Image(132,24);

homeon.src = "http://users.pld.com/djohns/home_on.jpg";

homeoff = new Image (132,24);

homeoff.src = "http://users.pld.com/djohns/home_off.jpg";



}



function imgOn(imgName) {

  if (document.images) {

    document[imgName].src = eval(imgName + "on.src");

  }

}





function imgOff(imgName) {

  if (document.images) {

    document[imgName].src = eval(imgName + "off.src");

  }

}



// -->

</SCRIPT>

</HEAD>



<BODY BGCOLOR="#FF0000">

<TABLE BORDER="0" CELLPADDING="4" CELLSPACING="0" WIDTH="100%">

 <TR>

  <TD COLSPAN="2">

   <TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" BGCOLOR="#FFFFFF" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000">

    <TR>

     <TD COLSPAN="2" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000">

      <DIV ALIGN="CENTER"><FONT SIZE="+6"><B><I>L J's Website</I></B></FONT></DIV>

     </TD>

    </TR>

   </TABLe>

  </TD

 </TR>

 <TR>

  <TD>

   <TABLE BORDER="1" CELLPADDING="4" CELLSPACING="0" BGCOLOR="#FFFFFF" WIDTH="150" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000">

    <TR>

     <TD BGCOLOr="#CCCCCC" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000">

      <DIV ALIGN="CENTER"><FONT SIZE="+1"><B>Navigation</B></FONT></DIV>

     </TD>

    </TR>

    <TR>

     <TD ALIGN="CENTER" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000">

      <A HREF="http://users.pld.com/djohns/writing.html" onMouseOver = "imgOn('writing')" onMouseOut = "imgOff('writing')">

      <IMG SRC="http://users.pld.com/djohns/writing_off.jpg" BORDER=0 width="132" height="24" name="writing"></a>

      <A HREF="http://users.pld.com/djohns/music.html" onMouseOver = "imgOn('music')" onMouseOut = "imgOff('music')">

      <IMG SRC="http://users.pld.com/djohns/music_off.jpg" BORDER=0 width="132" height="24" name="music"></A>

      <A HREF="http://users.pld.com/djohns/links.html" onMouseOver = "imgOn('links')" onMouseOut = "imgOff('links')">

      <IMG SRC="http://users.pld.com/djohns/links_off.jpg" BORDER=0 width="132" height="24" name="links"></A>

      <A HREF="http://users.pld.com/djohns/about.html" onMouseOver = "imgOn('about')" onMouseOut = "imgOff('about')">

      <IMG SRC="http://users.pld.com/djohns/about_off.jpg" BORDER=0 width="132" height="24" name="about"></A>

      <BR><BR>

      <A HREF="http://users.pld.com/djohns/master.html" onMouseOver = "imgOn('home')" onMouseOut = "imgOff('home')">

      <IMG SRC="http://users.pld.com/djohns/home_off.jpg" BORDER=0 width="132" height="24" name="home"></A>

     </TD>

    </TR>

   </TABLE>

  </TD>

  <TD VALIGN="TOP" WIDTH="100%">

   <TABLE BORDER="1" CELLPADDING="4" CELLSPACING="0" BGCOLOR="#FFFFFF" WIDTH="100%" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000">

    <TR>

     <TD WIDTH="100%" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000">

      Remember that redesign I said I was thinking about? Here is my current progress for you to see! I still want to make a few changes, I'm not 100% satisfied with the look, but it's getting better.

     </TD>

    </TR>

   </TABLe>

  </TD>

 </TR>

</TABLE>

</BODY>

</HTML>

**mairving** · 06-03-2004, 11:38 AM

Actually all of the bordercolor tags are now deprecated. You should use CSS instead.

Example:
In the head section or on an external stylesheet:
<style>
.blackborder {background-color: #FFFFFF;
border : thin solid Black;
</style>

In your TD tags:
<TD class="blackborder">Text Here</TD>

Instead of thin, you can also specify pixel sizes and you can use dotted, dashed, grooved, ridged or double lines.

**mairving** · 06-03-2004, 11:58 AM

Another reason to use CSS is that if you do decide to change colors or anything, you will have to change all of your bordercolor tags instead of just changing the class in css.

Here is a little test page done to show some of the styles.

Colonel Sanders · 06-03-2004, 12:52 PM

Thanks for the help! Mairving, I cant see any difference between the last 3. (haven't looked at the code yet).

L J

**mairving** · 06-03-2004, 01:02 PM

You don't see much difference in the last three since the border was also specified as thin. Removing the thin reference yields this .
The bottom two look fairly similar in this case mostly because of the background.

06-03-2004, 01:55 AM	#1
Colonel Sanders Resident AMD enthusiast Join Date: Jul 2001 Location: Kansas Posts: 1,445	Borders? I'm working on a new look for my web-site. In the end, I want the overall look to have a red background, with white boxes with a thin black border. I've managed a ghetto makeup of this with a bunch of tables, but that gives me the default gray "3d" borders, I simply want a thin sold black line. Here is a link to the site which inspired me: http://www.thetechguide.com/ And the page I'm working on for my re-design. http://users.pld.com/djohns/restart.html TIA, L J Share Share this post on Digg Del.icio.us Technorati Twitter __________________ Main: Gigabyte GA-770T USB3 - Phenom II 840 - 4GB DDR3 - Radeon 5750 1GB HTPC: MSI K9N6PGM2-V2 - Athlon II 250 - 4GB DDR2 - Radeon 5670 512MB HTPC: Zotac GeForce 6100E-E - Athlon X2 5800+ - 4GB DDR2 "Play a Windows CD backwards and you'll hear satanic voices, thats nothing, play it forwards and it installs Windows."

06-03-2004, 09:13 AM	#2
Force Flow Barefoot on the Moon! Staff Premium Member Join Date: Aug 2002 Location: Northeastern USA Posts: 13,285	Here ya go. All you have to do is set all the border colors to black. PHP Code: <HTML> <HEAD> <TITLE>Re-design</TITLE> <SCRIPT LANGUAGE = "JavaScript"> <!-- if (document.images) { writingon = new Image(132,24); writingon.src = "http://users.pld.com/djohns/writing_on.jpg"; writingoff = new Image(132,24); writingoff.src = "http://users.pld.com/djohns/writing_off.jpg"; musicon = new Image(132,24); musicon.src = "http://users.pld.com/djohns/music_on.jpg"; musicoff = new Image(132,24); musicoff.src = "http://users.pld.com/djohns/music_off.jpg"; linkson = new Image(132,24); linkson.src = "http://users.pld.com/djohns/links_on.jpg"; linksoff = new Image(132,24); linksoff.src = "http://users.pld.com/djohns/links_off.jpg"; abouton = new Image(132,24); abouton.src = "http://users.pld.com/djohns/about_on.jpg"; aboutoff = new Image (132,24); aboutoff.src = "http://users.pld.com/djohns/about_off.jpg"; homeon = new Image(132,24); homeon.src = "http://users.pld.com/djohns/home_on.jpg"; homeoff = new Image (132,24); homeoff.src = "http://users.pld.com/djohns/home_off.jpg"; } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); } } function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); } } // --> </SCRIPT> </HEAD> <BODY BGCOLOR="#FF0000"> <TABLE BORDER="0" CELLPADDING="4" CELLSPACING="0" WIDTH="100%"> <TR> <TD COLSPAN="2"> <TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" BGCOLOR="#FFFFFF" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000"> <TR> <TD COLSPAN="2" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000"> <DIV ALIGN="CENTER"><FONT SIZE="+6"><B><I>L J's Website</I></B></FONT></DIV> </TD> </TR> </TABLe> </TD </TR> <TR> <TD> <TABLE BORDER="1" CELLPADDING="4" CELLSPACING="0" BGCOLOR="#FFFFFF" WIDTH="150" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000"> <TR> <TD BGCOLOr="#CCCCCC" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000"> <DIV ALIGN="CENTER"><FONT SIZE="+1"><B>Navigation</B></FONT></DIV> </TD> </TR> <TR> <TD ALIGN="CENTER" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000"> <A HREF="http://users.pld.com/djohns/writing.html" onMouseOver = "imgOn('writing')" onMouseOut = "imgOff('writing')"> <IMG SRC="http://users.pld.com/djohns/writing_off.jpg" BORDER=0 width="132" height="24" name="writing"></a> <A HREF="http://users.pld.com/djohns/music.html" onMouseOver = "imgOn('music')" onMouseOut = "imgOff('music')"> <IMG SRC="http://users.pld.com/djohns/music_off.jpg" BORDER=0 width="132" height="24" name="music"></A> <A HREF="http://users.pld.com/djohns/links.html" onMouseOver = "imgOn('links')" onMouseOut = "imgOff('links')"> <IMG SRC="http://users.pld.com/djohns/links_off.jpg" BORDER=0 width="132" height="24" name="links"></A> <A HREF="http://users.pld.com/djohns/about.html" onMouseOver = "imgOn('about')" onMouseOut = "imgOff('about')"> <IMG SRC="http://users.pld.com/djohns/about_off.jpg" BORDER=0 width="132" height="24" name="about"></A> <BR><BR> <A HREF="http://users.pld.com/djohns/master.html" onMouseOver = "imgOn('home')" onMouseOut = "imgOff('home')"> <IMG SRC="http://users.pld.com/djohns/home_off.jpg" BORDER=0 width="132" height="24" name="home"></A> </TD> </TR> </TABLE> </TD> <TD VALIGN="TOP" WIDTH="100%"> <TABLE BORDER="1" CELLPADDING="4" CELLSPACING="0" BGCOLOR="#FFFFFF" WIDTH="100%" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000"> <TR> <TD WIDTH="100%" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000"> Remember that redesign I said I was thinking about? Here is my current progress for you to see! I still want to make a few changes, I'm not 100% satisfied with the look, but it's getting better. </TD> </TR> </TABLe> </TD> </TR> </TABLE> </BODY> </HTML> Share Share this post on Digg Del.icio.us Technorati Twitter __________________ There are two secrets to staying young, being happy, and achieving success. You have to laugh and find humor every day, and you have to have a dream.

06-03-2004, 11:38 AM	#3
mairving Staff Premium Member Join Date: Jul 1999 Location: Arlington, TN Posts: 5,538	Actually all of the bordercolor tags are now deprecated. You should use CSS instead. Example: In the head section or on an external stylesheet: <style> .blackborder {background-color: #FFFFFF; border : thin solid Black; </style> In your TD tags: <TD class="blackborder">Text Here</TD> Instead of thin, you can also specify pixel sizes and you can use dotted, dashed, grooved, ridged or double lines. Share Share this post on Digg Del.icio.us Technorati Twitter

06-03-2004, 11:58 AM	#4
mairving Staff Premium Member Join Date: Jul 1999 Location: Arlington, TN Posts: 5,538	Another reason to use CSS is that if you do decide to change colors or anything, you will have to change all of your bordercolor tags instead of just changing the class in css. Here is a little test page done to show some of the styles. Share Share this post on Digg Del.icio.us Technorati Twitter

06-03-2004, 12:52 PM	#5
Colonel Sanders Resident AMD enthusiast Join Date: Jul 2001 Location: Kansas Posts: 1,445	Thanks for the help! Mairving, I cant see any difference between the last 3. (haven't looked at the code yet). L J Share Share this post on Digg Del.icio.us Technorati Twitter Last edited by Colonel Sanders; 06-03-2004 at 01:04 PM.

Need Some Help? Type Your Keywords Here:

Still Need Help? Type Your Keywords Here:

Free Weekly Tech Newsletter

06-03-2004, 01:02 PM	#6
mairving Staff Premium Member Join Date: Jul 1999 Location: Arlington, TN Posts: 5,538	You don't see much difference in the last three since the border was also specified as thin. Removing the thin reference yields this . The bottom two look fairly similar in this case mostly because of the background. Share Share this post on Digg Del.icio.us Technorati Twitter

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Subscribe to THE INSIDER

Need Some Help? Type Your Keywords Here:

Still Need Help? Type Your Keywords Here:

Free Weekly Tech Newsletter