News:

Click here for Toll-Free Service for your business starting at $2.00 per month

Main Menu

Help needed in coding a tables layout.......?

Started by Paris, January 29, 2006, 10:10:10 AM

Previous topic - Next topic
Print
Go Down Pages1
User actions

Paris

January 29, 2006, 10:10:10 AM Last Edit: January 29, 2006, 10:26:10 AM by paris
IVe been trying to code this thing on my own for way over a week now but whenever i feel like im about finished a new problem shows up.

1. Right now ive got most of the coding done but one issue still remains, I cannot get my navigation tables(boxes)to go where i want them to. Ive coded the layout so that the content area comes first in the code(in the layout it is right in the middle)and then the right and left navigations. Right now i only have one navigation in the code because i think its easier to ateast get one in correctly before i try the other. The right one is the one that is in the layout so far.

Can someone please tell me how to get both navigations in the correct places and working properly. Also, ofcoarse, how to add the second navigation for the left without disturbing the rest of the layout.

2. For some weird reason i can't get the font color and font type in the navigation to change, i can change the font-weight and size but the color and type isnt changing.

3. This isnt a main problem really, but it would help alot if i could solve it. Can anyone tell me whether there is some way(attribute,element etc) that i can use to get the content inside of the content box and the navigation box to move to a certain percent or area so that it looks nice. The way the bg's are cut it looks really terrible when i put it to right or left like i want to. Like in div's you can put where you want the content on the page exactly....except if i use divs im afraid that the content bg wont stretch like it should for the content.

4. When i look at the page in IE i can see a space about 5-10 pixels in height that breakes the top menu from the rest of the page. What am i doing wrong and how should I fix it.

Below is the code:
Code Select
<html>
<head>
<style>
body{
margin: 0px;
padding: 0px;
background-color: 365665;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-arrow-color: #ffffff;
scrollbar-base-color: #767676;
scrollbar-darkshadow-color: #414141;
scrollbar-face-color: #767676;
scrollbar-highlight-color: #C0C0C0;
scrollbar-shadow-color: #414141;
scrollbar-track-color: 365665;
}
.srch {
background-color: #477817;
border-style: solid;
border-width: 2px;
padding: 1px;
color: #ffffff;
font-weight: 700;
font-family: Tahoma;
font-size: 8pt;
border-top-color: 1e330a;
border-bottom-color: 71c024;
border-right-color: 71c024;
border-left-color: 1e330a;
}
/* main font class */
.mnCon {
color: #ffffff;
font-size: 8pt;
font-family: Tahoma;
text-decoration: none;
font-weight: 900;
}
.head    {
         color: #3b5f6f;
         font-size:10pt;
         font-family: bitdust two;
         text-decoration: none;
         fontweight : none;
}
         
.Conttxt {
         color: #3c6070;
         font-size: 8pt;
         font-family: Tahoma;
         text-decoration: none;
         font-weight: 900;
}
.sbCon {
color: #ffffff;
font-size: 8pt;
font-family: Tahoma;
text-decoration: none;
font-weight: 500;
}
.Small {
color: #ffffff;
font-size: 7pt;
font-family: Tahoma;
text-decoration: none;
        font-weight: 500;
}
a.smLink:link, a.smLink:visited, a.smLink:active {
color: #000000;
font-size: 7pt;
font-family: Tahoma;
text-decoration: none;
        font-weight: 500;
}
a.smLink:hover {
color: ffffff;
font-size: 7pt;
font-family: Tahoma;
text-decoration: underline;
}

td.mn{
background-position: 0px 0px;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 5;
}
td.sb{
background-position: 0px 0px;
padding-top: 0;
padding-bottom: 2;
padding-right: 12;
padding-left: 12;
}
a.btm:link, a.btm:visited, a.btm:active {
color: #ffffff;
font-size: 6pt;
font-family: Tahoma;
text-decoration: none;
font-weight: 500;
}
a.btm:hover {
color: ffff;
font-size: 6pt;
font-family: Tahoma;
text-decoration: underline, overline;
font-weight: 500;
}
</style>
<script>
<!---hide from old browsers

<!-*******************************************************
FLASH DETECT 2.5
Coded by http://photoshoptower.com, unless otherwise noted.
(c) 2006-2007 Paris.
http://www.charmed-designs.co.nr
*******************************************************->

// This script will test up to the following version.
flash_versions = 20;

// Initialize variables and arrays
var flash = new Object();
flash.installed=false;
flash.version='0.0';

// Dig through Netscape-compatible plug-ins first.
if (navigator.plugins && navigator.plugins.length) {
for (x=0; x < navigator.plugins.length; x++) {
if (navigator.plugins[x].name.indexOf('Shockwave Flash') != -1) {
flash.version = navigator.plugins[x].description.split('Shockwave Flash ')[1];
flash.installed = true;
break;
}
}
}

// Then, dig through ActiveX-style plug-ins afterwords
else if (window.ActiveXObject) {
for (x = 2; x <= flash_versions; x++) {
try {
oFlash = eval("new ActiveXObject('ShockwaveFlash.ShockwaveFlash." + x + "');");
if(oFlash) {
flash.installed = true;
flash.version = x + '.0';
}
}
catch(e) {}
}
}

// Create sniffing variables in the following style: flash.ver[x]
// Modified by mjac
flash.ver = Array();
for(i = 4; i <= flash_versions; i++) {
eval("flash.ver[" + i + "] = (flash.installed && parseInt(flash.version) >= " + i + ") ? true : false;");
}

function searchFeature(){
terms = document.search.q.value;
alert('you wanna search for '+terms+' eh?');
}
//done hiding--->
</script>
<!--nonflash header-->
</head>
<body background="techlytbg.jpg">
<center>
<!--start header-->
<table height="1" width="778" bgcolor="#2a480d" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="1" width="778"></td></tr></table>

<table height="1" width="778" bgcolor="#2a480d" cellpadding="0" cellspacing="0" border="0">

<tr>
<td height="417" width="778" bgcolor="#2a480d" background="banner.jpg" valign="top"></td>
</td>
</tr>
</table>
<!--end header-->

<!--start navigation table --->
<table height="20" width="778" bgcolor="#2a480d" cellpadding="0" border="0" cellspacing="0">
<tr>
<td>
<img src="hd5.jpg" width="778" height="120" border="0" alt="" usemap="#hd5_Map">
<map name="hd5_Map">
<area shape="rect" alt="" coords="690,0,742,19" href="linkus.php" target="_self">
<area shape="rect" alt="" coords="552,0,637,19" href="contact.php" target="_self">
<area shape="rect" alt="" coords="369,0,423,18" href="index.php" target="_self">
<area shape="rect" alt="" coords="153,0,221,20" href="siteinfo.php" target="_self">
<area shape="rect" alt="" coords="30,0,80,19" href="index.php" target="_self">
</map>
</td>
</tr>
</table>
<!--end navigation table-->


<!--start Page-->

<table cellpadding="0" cellspacing="0" border="0" width="778" height="1" bgcolor="#2a480d">
<tr>
<td valign="top" width="778" height="1">

<!--start main content-->

<table border="0" cellpadding="0" cellspacing="0" width="778" bgcolor="#2a480d">
<td width="778" bgcolor="#2a480d" background="pagebg.jpg" align="center">

<!--start main content box 1-->
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#2a480d" height="1" width="372"><tr>
<td height="42" width="372" bgcolor="#2a480d" background="conttop.jpg" class="head"><p align="center">CONTENT</p></td></tr>

<tr>
<td height="42" width="372" bgcolor="#2a480d" background="contbg.jpg" valign="top">

<table align="center" height="100%" width="312" border="0" cellpadding="0" cellspacing="1" border="0"><tr>
<td height="100%" width="312" valign="top" align="center" class="Conttxt">

<span>
<b>Lorem Ipsem</b><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
<b>Lorem Ipsem</b><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
<b>Lorem Ipsem</b><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>

</span>
</tr>
</td>
</table>
</td>
</table>
</td>
</td></tr></table>
</td></tr></table>
</td></tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#2a480d" height="1" width="372"><tr>
<td height="42" width="372" bgcolor="#2a480d" background="contbtm.jpg"></td></tr>
</table>
</td>
</td>
</tr></table>

<!-------end content box 1--------------->
</td></tr></table>

<!--end main content-->


<!--start NAVIGATION Right-->
<table border="0" cellpadding="0" cellspacing="0" width="778" bgcolor="#2a480d">
<td width="778" bgcolor="#2a480d" background="pagebg.jpg">

<!-------------------START NAVIGATION BOX 1------------------------------------------->

<td bgcolor="#2a480d" height="1" valign="top" align="center" width="184">
<table bgcolor="#2a480d" cellpadding="0" cellspacing="0" border="0" height="100%" width="184"><tr>
<td bgcolor="#2a480d" height="33" width="184" background="navrighttop.jpg" class="head"><p align="center" valign="bottom"></p></td></tr>
<tr>
<td bgcolor="#2a480d" height="100%" width="184" background="navbg2.jpg" valign="top">
<table align="center" height="100%" width="150" border="0" cellpadding="0" cellspacing="1" border="0">
<p align="center" class="head">TUTORIALS<p>
<tr>
<td height="100%" width="75%" valign="top" class="Small">
<span>
<p align="center">
<a href="index.php">Photoshop</a>
<br>
<a href="index.php">Image Ready</a>
<br>
<a href="index.php">HTML</a>
<br>
<a href="index.php">PHP</a>
<br>
<a href="index.php">CSS</a>
<br>
<a href="index.php">lookup</a>
<br>
<a href="index.php">Guild</a>
<br>
<a href="index.php">Misc</a>
</span></td></tr>
</table>
<tr>

<td height="33" width="184" background="navrightbtm.jpg">
</td></tr>
</td></tr></table>
</td></table>
</td>

</table>
</table>
</td>
</td>
<!------------------END NAVIGATION BOX 1---------------------------------------------->


<!--end sidebar-->
<!--end page-->
</td></table>

<!--start footer-->
<table cellpadding="0" cellspacing="0" border="0" width="778" bgcolor="#365665">
<tr><td align="right" valign="bottom">
<img src="cpfooter.jpg" width="778" height="72" border="0" alt="" usemap="#cpfooter_Map">
<map name="cpfooter_Map">
<area shape="rect" alt="" coords="309,52,485,71" href="index.php" target="_self">
</map>
&nbsp;&nbsp;&nbsp;

<BR>
</td></tr></table>
<!--end footer-->
</center>
</body>
</html>


Below is how it should look:


Here is how it currently looks:
Top screenshot-


Bottom screenshot-


Hope someone can help.......

::Thanx::

geminigeek

#1
February 02, 2006, 09:23:27 AM
First, I would really suggest you to prevent the usage of table. It's confusing and messy.

anyway, i do hope you can try to use the DIV positioning technique, which is a lot better and not that messy.
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Paris

#2
February 17, 2006, 06:23:48 AM
i didnt know you could make boxes using divs? I mean like the ones i need for this layout. Where can i learn?

sixthcrusifix

#3
February 17, 2006, 07:28:11 AM
what the hey? Isn't that bottom screenshot how you wanted it too look? Remember I helped you with it not long ago.. the pics you gave are very different from eachother.. as in totaly different images and stuff...

hmm. okay you're not new to HTML, sorry.
Visite me website at http://www.sixthcrusifix.com

geminigeek

#4
February 17, 2006, 10:05:13 AM
Quote from: paris on February 17, 2006, 06:23:48 AM
i didnt know you could make boxes using divs? I mean like the ones i need for this layout. Where can i learn?

Yes you can. Try this few tutorials/guide on how to create columns site using DIV.
http://glish.com/css/
http://www.bluerobot.com/web/layouts/
http://maxdesign.com.au/presentation/page_layouts/
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
Print
Go Up Pages1
User actions