PDA

View Full Version : navigationbar/table problems


Nicky
03-16-2007, 01:30 PM
I have a table of 900 width and put a banner at the top. Below that on the left, I've made a navigationbar and clicked on the table in the options so Dreamweaver makes the navigationbar into a table. (otherwise the images finish up split apart)
Now the problem, of course I want to put text next to the navigationbar but every time the text is longer than the bar, the bar splits as it's made out of 6 seperate images to create the buttons. Dreamweaver created rows and that seems to effect the rest of it all on the entire table.
I have tried to make another table next to the navigation bar but that doesn't seem to work either. How on earth do I solve this problem? I've been trying for days on end and can't figure it out but I'm sure it's probably a simple solution that I just don't see.

This is the code:

<table width="900" height="860" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<!--DWLayoutTable-->
<tr>
<td width="900" height="200" valign="top"><img src="stela-banner.jpg" width="900" height="200">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','navbartop','nav1.jpg', 1)" onMouseOver="MM_nbGroup('over','navbartop','nav1.jpg','nav1.jpg ',1)" onMouseOut="MM_nbGroup('out')"><img src="nav1.jpg" alt="" name="navbartop" width="228" height="329" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="index.htm" target="_top" onClick="MM_nbGroup('down','group1','home','nav2b.jpg',1)" onMouseOver="MM_nbGroup('over','home','nav2b.jpg','nav2b.jpg',1 )" onMouseOut="MM_nbGroup('out')"><img src="nav2.jpg" alt="" name="home" width="228" height="42" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="profile.htm" target="_top" onClick="MM_nbGroup('down','group1','profile','nav3b.jpg',1 )" onMouseOver="MM_nbGroup('over','profile','nav3b.jpg','nav3b.jpg ',1)" onMouseOut="MM_nbGroup('out')"><img src="nav3.jpg" alt="" name="profile" width="228" height="39" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="media.htm" target="_top" onClick="MM_nbGroup('down','group1','media','nav4b.jpg',1)" onMouseOver="MM_nbGroup('over','media','nav4b.jpg','nav4b.jpg', 1)" onMouseOut="MM_nbGroup('out')"><img src="nav4.jpg" alt="" name="media" width="228" height="40" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="news.htm" target="_top" onClick="MM_nbGroup('down','group1','news','nav5b.jpg',1)" onMouseOver="MM_nbGroup('over','news','nav5b.jpg','nav5b.jpg',1 )" onMouseOut="MM_nbGroup('out')"><img src="nav5.jpg" alt="" name="news" width="228" height="40" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','navbottom','nav6.jpg', 1)" onMouseOver="MM_nbGroup('over','navbottom','nav6.jpg','nav6.jpg ',1)" onMouseOut="MM_nbGroup('out')"><img src="nav6.jpg" alt="" name="navbottom" width="228" height="53" border="0" onload=""></a></td>
</tr>
</table> </td>
</tr>
</table>
</body>
</html>

domedia
03-16-2007, 02:36 PM
Welcome to the forums Nicky!
Can you post the url/code to the full page please?

Nicky
03-16-2007, 07:39 PM
What do you mean? I don't have the page online yet, no way near ready. I left out the java script at the top as I didn't think it was relevant to the bit of table.

domedia
03-16-2007, 07:54 PM
Post the whole page, I can't even tell which doctype you are using, or if any CSS or Javascript might interfere.

Nicky
03-16-2007, 08:19 PM
Oh I see. The Dreamweaver version I'm using is Studio MX.

Here's the entire code of the page and thanks for having a look at it. It's driving me up the wall and I didn't think it could be anything interfering as Dreamweaver wrote it :confused:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="bg.css" rel="stylesheet" type="text/css">

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>

<body bgcolor="#013294" onLoad="MM_preloadImages('images/nav004b.jpg','nav1.jpg','nav2b.jpg','nav3b.jpg','n av4b.jpg','nav5b.jpg','nav6.jpg')">
<table width="900" height="860" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<!--DWLayoutTable-->
<tr>
<td width="900" height="200" valign="top"><img src="stela-banner.jpg" width="900" height="200">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','navbartop','nav1.jpg', 1)" onMouseOver="MM_nbGroup('over','navbartop','nav1.jpg','nav1.jpg ',1)" onMouseOut="MM_nbGroup('out')"><img src="nav1.jpg" alt="" name="navbartop" width="228" height="329" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="index.htm" target="_top" onClick="MM_nbGroup('down','group1','home','nav2b.jpg',1)" onMouseOver="MM_nbGroup('over','home','nav2b.jpg','nav2b.jpg',1 )" onMouseOut="MM_nbGroup('out')"><img src="nav2.jpg" alt="" name="home" width="228" height="42" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="profile.htm" target="_top" onClick="MM_nbGroup('down','group1','profile','nav3b.jpg',1 )" onMouseOver="MM_nbGroup('over','profile','nav3b.jpg','nav3b.jpg ',1)" onMouseOut="MM_nbGroup('out')"><img src="nav3.jpg" alt="" name="profile" width="228" height="39" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="media.htm" target="_top" onClick="MM_nbGroup('down','group1','media','nav4b.jpg',1)" onMouseOver="MM_nbGroup('over','media','nav4b.jpg','nav4b.jpg', 1)" onMouseOut="MM_nbGroup('out')"><img src="nav4.jpg" alt="" name="media" width="228" height="40" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="news.htm" target="_top" onClick="MM_nbGroup('down','group1','news','nav5b.jpg',1)" onMouseOver="MM_nbGroup('over','news','nav5b.jpg','nav5b.jpg',1 )" onMouseOut="MM_nbGroup('out')"><img src="nav5.jpg" alt="" name="news" width="228" height="40" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','navbottom','nav6.jpg', 1)" onMouseOver="MM_nbGroup('over','navbottom','nav6.jpg','nav6.jpg ',1)" onMouseOut="MM_nbGroup('out')"><img src="nav6.jpg" alt="" name="navbottom" width="228" height="53" border="0" onload=""></a></td>
</tr>
</table> </td>
</tr>
</table>
</body>
</html>

domedia
03-16-2007, 08:52 PM
Where did you insert the text Nicky? You're example looks fine, just want to make sure I test with text in the right place.

Nicky
03-16-2007, 09:03 PM
That's the problem, it won't work with text next to it so I started all over again as I also have a massive problem deleting things, can't seem to do that either.
Anyway, I can make a small cell next to the navigationbar as long as it's the same length but as soon as the text goes further than the length of the navbar, it splits it up, so the pics in the navbar come apart as it seems connected to the navbar table. So I don't know how to fix that as I don't seem to be able to put another table next to the navbar.
What I like is to have the navbar on the left and then next to that, the text, no matter how long as on my profile page, the text will be quite long.

domedia
03-17-2007, 12:02 AM
ok, sounds like you just need another column in your table.
All I did was to add this to your table
<tr>
<td>
Put all your text here
</td>
</tr>

Complete page with my addition:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="bg.css" rel="stylesheet" type="text/css">

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>

<body bgcolor="#013294" onLoad="MM_preloadImages('images/nav004b.jpg','nav1.jpg','nav2b.jpg','nav3b.jpg','n av4b.jpg','nav5b.jpg','nav6.jpg')">
<table width="900" height="860" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<!--DWLayoutTable-->
<tr>
<td width="900" height="200" valign="top"><img src="stela-banner.jpg" width="900" height="200">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','navbartop','nav1.jpg', 1)" onMouseOver="MM_nbGroup('over','navbartop','nav1.jpg','nav1.jpg ',1)" onMouseOut="MM_nbGroup('out')"><img src="nav1.jpg" alt="" name="navbartop" width="228" height="329" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="index.htm" target="_top" onClick="MM_nbGroup('down','group1','home','nav2b.jpg',1)" onMouseOver="MM_nbGroup('over','home','nav2b.jpg','nav2b.jpg',1 )" onMouseOut="MM_nbGroup('out')"><img src="nav2.jpg" alt="" name="home" width="228" height="42" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="profile.htm" target="_top" onClick="MM_nbGroup('down','group1','profile','nav3b.jpg',1 )" onMouseOver="MM_nbGroup('over','profile','nav3b.jpg','nav3b.jpg ',1)" onMouseOut="MM_nbGroup('out')"><img src="nav3.jpg" alt="" name="profile" width="228" height="39" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="media.htm" target="_top" onClick="MM_nbGroup('down','group1','media','nav4b.jpg',1)" onMouseOver="MM_nbGroup('over','media','nav4b.jpg','nav4b.jpg', 1)" onMouseOut="MM_nbGroup('out')"><img src="nav4.jpg" alt="" name="media" width="228" height="40" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="news.htm" target="_top" onClick="MM_nbGroup('down','group1','news','nav5b.jpg',1)" onMouseOver="MM_nbGroup('over','news','nav5b.jpg','nav5b.jpg',1 )" onMouseOut="MM_nbGroup('out')"><img src="nav5.jpg" alt="" name="news" width="228" height="40" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','navbottom','nav6.jpg', 1)" onMouseOver="MM_nbGroup('over','navbottom','nav6.jpg','nav6.jpg ',1)" onMouseOut="MM_nbGroup('out')"><img src="nav6.jpg" alt="" name="navbottom" width="228" height="53" border="0" onload=""></a></td>
</tr>
</table></td>
</tr>
<tr>
<td>
Put all your text here
</td>
</tr>
</table>
</body>
</html>

If you use one of the premade layouts in DW, you could do this without the pain of tables.

Nicky
03-17-2007, 09:59 AM
When I do that it puts all the text underneath the navigationbar, not next to it.

domedia
03-17-2007, 04:29 PM
No it doesnt, copy and paste my code above into a new document and you will see.

Nicky
03-17-2007, 06:36 PM
That's weird because I made a new document, copied all your code and it still puts it underneath the navigation bar for me :confused:

Well, finally. I did as you suggested and used the predesign that looked most like what I wanted and yup, it worked and it was a colspan missing. Weird thing is that I tried that, I put the colspan in different places but probably not the right order/place so now it's ok. Sigh of relieve I have to say.
The code line is this: <td width="900" height="200" colspan="2" valign="top"> <img src="stela-banner.jpg" width="900" height="200">

Anyway thanks for helping, if you hadn't suggested using the predesign, I would have never thought of that. It could have saved me hours and hours and days of frustration but that's how you learn ;)

Oh yeh, there is a little yellow marker that shows up below the banner. What does that mean? It doesn't show up in the browser but when I'm working in Dreamweaver.