Forum Moderators: open
I'm trying to design a web page with a border all around the outside of the page in two colors (first color which is Navy, appearing to wrap all the way around the outside of the page and same for 2nd color which is purple) with both of them overlaying a med blue background with the center of the page in a tan background.
I've got the upper left side looking the way I want but I don't know how to replicate it so it's mirrored on the right side of the page. I'm sure it's a row or column problem but my brain just bogs down when a design gets this technical.
I left the borders on so you can see the edges of the table cells.
I also want the borders on the bottom but I think I can figure that out when I get the sides working.
If anyone can help me with this I would appreciate it.
Lori
<body bgcolor="#3399cc">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr><td bgcolor="#003366" width="100%" colspan="3">
</td></tr><tr><td bgcolor="#003366" width="2%" rowspan="2">
</td><td bgcolor="#330099" width="96%" colspan="3">
</td></tr><tr><td bgcolor="#330099" width="2%">
</td><td align="center" width="92%">
<h1>TITLE GOES HERE</h1>
<table align="center" width="85%" border="0" cellspacing="0" cellpadding="8">
<tr><td bgcolor="#cccc99" align="center">
###bodytext#####
</td></tr></table>
</td><td width="2%" bgcolor="#330099">
</td><td width="2%" bgcolor="#003366">
</td></tr></table>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head><title>test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">body {padding:2px;margin:2px;background-color:#39c;}#outer {margin:0;padding:2px;background-color:#036;}h1 {margin:0;padding:5px;color:#fff;background-color:#309;}#content {margin:0;background-color:#cc9;}#content p {margin:0;padding:5px;}</style></head><body><div id="outer"><h1>title here</h1><div id="content"><p>body text here</p></div> <!-- close content div --></div> <!-- close outer div --></body></html>This will get you started.
I gleaned some ideas off this thread and also an idea using borders from some research on the internet and also my CSS 1 book by O'Reilly and came up with the following.
(the above sample did not work for me as I'm inputing 2 border in different colors and the title goes on med blue background, etc.)
The following produces what I want (navy border outside, purple border inside, with blue background on page showing through under title and footer and then body of page on a tan background, except the borders aren't wide enough to visually determine the change in colors of the two borders and I can't get this code to increase the border width. I want each border a little less than 3/8 inch wide (i'm not sure what that is in pixels).
Is there a limit to a border width? Can someone see an error below that will cause the border to not increase? I have them set at 30 pixels but the don't appear to go about 10.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Border test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#3399cc" link="#003366" alink="#330099" vlink="#330099">
<style type=text/css">
body {font-family: Arial, Helvetica, sans-serif;color: #000000;
font-size: 12px;background-color: #3399cc;
top:0;left:0;margin:0;padding:0;}
H1 { color: #000000;
text-align: center;
background: transparent;}
/*Navy border*/
#outerborder1 { border: groove;
border-color: #003366;
30px; }
/*Purple border*/
#outerborder2 { border: groove;
border-color: #330099;
30px; }
#content {margin:15;
background-color:#cccc99;
padding:5px;
}
</style>
<div id="outerborder1">
<div id="outerborder2">
<h1>TITLE GOES HERE on blue background</h1>
<div id="content">
<p align="center">###bodytext on tan background#####</p>
</div>
</div>
</div>
</body>
</html>
I figured out the problem--I had neglected to put in "border-width:" (which I changed to 10px) and one other minor problem I can't remember now, and then it worked perfectly on my Mac 9.0, however it doesn't work on my clients WinXP (borders are different widths, background shows in upper left corner and no lines on right side--not sure why).
If anyone knows why it should work on an old mac and not a Newer PC please let me know.
Lorel
