PDA

View Full Version : Borders?

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.

<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:
&lt;style&gt;
.blackborder {background-color: #FFFFFF;
border : thin solid Black;
&lt;/style&gt;

In your TD tags:
&lt;TD class="blackborder"&gt;Text Here&lt;/TD&gt;

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 (http://www.m2hosts.com/style.htm) 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 (http://www.m2hosts.com/style.htm) .
The bottom two look fairly similar in this case mostly because of the background.