Help. Totally new to all the best stuff in css (I had just used it before on my old site design to change text color, size, links etc).
I'm trying to incorporate it more on my site redesign and am running into some trouble with the borders of my site using css to call them in. (I'm using Dreamweaver to build with btw).
The problem is best explained by looking at these two site links (a before and after if you will
<!-- m --><a class="postlink" href="http://www.altrap.net/ALTRAPDOTNET/realindex.html">http://www.altrap.net/ALTRAPDOTNET/realindex.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.altrap.net/ALTRAPDOTNET/borderprobs.html">http://www.altrap.net/ALTRAPDOTNET/borderprobs.html</a><!-- m -->
Here's the code...
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"dotnet.css" type="text/css">
</head>
<body bgcolor="#000000" text="#FFFFFF">
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" colspan="3" height="124">
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width=800 valign="top"><img src=http://www.webdeveloper.com/forum/archive/index.php/"altrapgraphics/realtitle.jpg" width="800" height="124"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="142" height="500" valign="top">
<table width="142" border="0" cellpadding="0" cellspacing="0" class="menupixel">
<tr>
<td valign="top" width="142">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="142" height="500" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="142" height="500" valign="top" align="center"><img src=http://www.webdeveloper.com/forum/archive/index.php/"altrapgraphics/realmenu.jpg" width="140" height="500"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="528" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="tile">
<tr>
<td width="109" height="281"></td>
<td width="321"></td>
<td width="98"></td>
</tr>
<tr>
<td height="151"></td>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="box">
<tr>
<td width="321" height="151" valign="top">Content box... no problems
yet...</td>
</tr>
</table>
</td>
<td></td>
</tr>
<tr>
<td height="66"></td>
<td></td>
<td></td>
</tr>
</table>
</td>
<td width="130" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="rightpixel">
<tr>
<td width="130" height="500" valign="top">
<table width="130" border="0" cellpadding="0" cellspacing="0" class="rightbackground">
<tr>
<td width="130" height="500"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" height="108" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="142" height="70" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="menupixel">
<tr>
<td width="142" height="70"></td>
</tr>
</table>
</td>
<td width="528" valign="top">
<table width="528" border="0" cellpadding="0" cellspacing="0" class="tile">
<tr>
<td width="30"></td>
<td width="478" valign="top">
<table width="478" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="478" height="70" valign="middle" align="center" class="box"><img src=http://www.webdeveloper.com/forum/archive/index.php/"altrapgraphics/mobileunderground.gif" width="468" height="60"></td>
</tr>
</table>
</td>
<td width="30"></td>
</tr>
</table>
</td>
<td width="130" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="rightpixel">
<tr>
<td width="130" height="70"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="28" colspan="3" valign="top"><img src=http://www.webdeveloper.com/forum/archive/index.php/"altrapgraphics/realfooter.jpg" width="800" height="28"></td>
</tr>
<tr>
<td height="53"></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="18"></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Please be gentle with me if I'm missing something blindingly obvious - I'm fresh to this stuff!
Thanks in advance.
A to the LDon't use tables for layout; use CSS exclusively. Tables are only for tabular data, not layouts.
I'm trying to incorporate it more on my site redesign and am running into some trouble with the borders of my site using css to call them in. (I'm using Dreamweaver to build with btw).
The problem is best explained by looking at these two site links (a before and after if you will
<!-- m --><a class="postlink" href="http://www.altrap.net/ALTRAPDOTNET/realindex.html">http://www.altrap.net/ALTRAPDOTNET/realindex.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.altrap.net/ALTRAPDOTNET/borderprobs.html">http://www.altrap.net/ALTRAPDOTNET/borderprobs.html</a><!-- m -->
Here's the code...
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"dotnet.css" type="text/css">
</head>
<body bgcolor="#000000" text="#FFFFFF">
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" colspan="3" height="124">
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width=800 valign="top"><img src=http://www.webdeveloper.com/forum/archive/index.php/"altrapgraphics/realtitle.jpg" width="800" height="124"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="142" height="500" valign="top">
<table width="142" border="0" cellpadding="0" cellspacing="0" class="menupixel">
<tr>
<td valign="top" width="142">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="142" height="500" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="142" height="500" valign="top" align="center"><img src=http://www.webdeveloper.com/forum/archive/index.php/"altrapgraphics/realmenu.jpg" width="140" height="500"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="528" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="tile">
<tr>
<td width="109" height="281"></td>
<td width="321"></td>
<td width="98"></td>
</tr>
<tr>
<td height="151"></td>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="box">
<tr>
<td width="321" height="151" valign="top">Content box... no problems
yet...</td>
</tr>
</table>
</td>
<td></td>
</tr>
<tr>
<td height="66"></td>
<td></td>
<td></td>
</tr>
</table>
</td>
<td width="130" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="rightpixel">
<tr>
<td width="130" height="500" valign="top">
<table width="130" border="0" cellpadding="0" cellspacing="0" class="rightbackground">
<tr>
<td width="130" height="500"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" height="108" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="142" height="70" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="menupixel">
<tr>
<td width="142" height="70"></td>
</tr>
</table>
</td>
<td width="528" valign="top">
<table width="528" border="0" cellpadding="0" cellspacing="0" class="tile">
<tr>
<td width="30"></td>
<td width="478" valign="top">
<table width="478" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="478" height="70" valign="middle" align="center" class="box"><img src=http://www.webdeveloper.com/forum/archive/index.php/"altrapgraphics/mobileunderground.gif" width="468" height="60"></td>
</tr>
</table>
</td>
<td width="30"></td>
</tr>
</table>
</td>
<td width="130" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="rightpixel">
<tr>
<td width="130" height="70"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="28" colspan="3" valign="top"><img src=http://www.webdeveloper.com/forum/archive/index.php/"altrapgraphics/realfooter.jpg" width="800" height="28"></td>
</tr>
<tr>
<td height="53"></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="18"></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Please be gentle with me if I'm missing something blindingly obvious - I'm fresh to this stuff!
Thanks in advance.
A to the LDon't use tables for layout; use CSS exclusively. Tables are only for tabular data, not layouts.