Well I have this html code:
<html>
<head>
<title>Masta Gamerz; Dark</title>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Site Images (MgDark.jpg) -->
<table id="Table_01" width="1025" height="768" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="images/MgDark_01.gif" width="1024" height="71" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="71" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/MgDark_02.gif" width="1024" height="46" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="46" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/MgDark_03.gif" width="28" height="622" alt=""></td>
<td>
<img src="images/MgDark_04.gif" width="172" height="254" alt=""></td>
<td rowspan="5">
<img src="images/MgDark_05.gif" width="85" height="622" alt=""></td>
<td rowspan="3">
<img src="images/MgDark_06.gif" width="690" height="442" alt=""></td>
<td rowspan="5">
<img src="images/MgDark_07.gif" width="49" height="622" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="254" alt=""></td>
</tr>
<tr>
<td>
<img src="images/MgDark_08.gif" width="172" height="24" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="24" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/MgDark_09.gif" width="172" height="252" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="164" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/MgDark_10.gif" width="690" height="180" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="88" alt=""></td>
</tr>
<tr>
<td>
<img src="images/MgDark_11.gif" width="172" height="92" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="92" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/MgDark_12.gif" width="1024" height="29" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="29" alt=""></td>
</tr>
</table>
<!-- End Site Images -->
</body>
</html>
But it ends up looking like this: http://www.masta-gamerz.com/MgDark/MgDark.html (http://www.masta-gamerz.com/MgDark/MgDark.html)
Everything to one side, looks different in all resolutions, etc etc.. now, what I was curious as to how to do, was make it so the the images are apart like so: www.g-masters.com (http://www.g-masters.com) notice there's a gap in-between that stays the same in all resolutions? How would I get mine like that; use a style.css? I've never made one before and have no Idea where to start. So if you's could guide me through or link me somewhere that could guide me through pulling them apart and making the site the same in all resolutions I'd be eternally grateful. :)
I know tables are old fashioned; therefore I asked if I could do it using CSS, if I can is there anywhere you's can link me to that can show me what and how I'd need to put?
Well, there are two examples; the top is mine, the bottom is what I'm talking about. :)
www.masta-gamerz.com/MgDark/MgDark.html (http://www.masta-gamerz.com/MgDark/MgDark.html)
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg19.imageshack.us%2Fimg19%2F6796%2Fmgdarkzg5.th.jpg&hash=7469c04179d7163d567e5a1537e2ef4c2b82ec74) (http://img19.imageshack.us/my.php?image=mgdarkzg5.jpg)
www.g-masters.com (http://www.g-masters.com)
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg201.imageshack.us%2Fimg201%2F5691%2Fgmbo2.th.jpg&hash=0a40d30c6d73996e42e787f23603d36dfa0d843d) (http://img201.imageshack.us/my.php?image=gmbo2.jpg)
See, in the first screenshot, I'd like to have the square news box in the middle more to the right like in the second screenshot; I'd also like to have the banner(header?) and footer stay the same size in all resolutions as well. I mean, my current resolution is 1280 x 800 so it comes up weird like that, but in 1024 x 768 it looks perfect.
So... you want your navigation tables seperated like in G-Masters?