Solved

Adobe Dreamweaver CS4 Mac---- Navigation bar with rollover stays vertical

Posted on 2010-11-21
9
651 Views
Last Modified: 2012-05-10
I am making a website for a class I am taking.
In Dreamweaver CS4 Mac:
I chose 'Insert --> Image Object --> Navigation Bar'
After entering in a few navigation bars and choosing the proper up/down/over/down while rollover images, it all shows up in a vertical stack. how do i get it to be in a horizontal stack? I see the option in the windows version of the program. see image below...  
for-EE.jpg
0
Comment
Question by:Justin_Edmands
  • 5
  • 4
9 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 34185663
Hi Justin_Edmands,

Your images are surrounded by <p> tags so that makes the line breaks.
0
 

Author Comment

by:Justin_Edmands
ID: 34189583
I don't see any <p> tags here. the only <p> on the screen is for my banner....which is not actually shown in the attached image (I left it out to avoid confusion)
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 34190278
Can you copy and paste the code for the images here, please?
0
 

Author Comment

by:Justin_Edmands
ID: 34190337
<script 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=#006699 text=#000000 link=#000000 vLink=#ffffff aLink=#ffffff 
leftMargin=0 topMargin=0 marginwidth="0" marginheight="0" onLoad="MM_preloadImages('../../../Documents/IS343/techcorner/News_DOWN.jpg','../../../Documents/IS343/techcorner/News_ROLLOVER.jpg','../../../Documents/IS343/techcorner/News_ROLLOVER_WHILE_DOWN.jpg','../../../Documents/IS343/techcorner/Blog_DOWN.jpg','../../../Documents/IS343/techcorner/Blog_ROLLOVER.jpg','../../../Documents/IS343/techcorner/Blog_ROLLOVER_WHILE_DOWN.jpg','../../../Documents/IS343/techcorner/Galleries_DOWN.jpg','../../../Documents/IS343/techcorner/Galleries_ROLLOVER.jpg','../../../Documents/IS343/techcorner/Galleries_ROLLOVER_WHILE_DOWN.jpg','../../../Documents/IS343/techcorner/Reviews_DOWN.jpg','../../../Documents/IS343/techcorner/Reviews_ROLLOVER.jpg','../../../Documents/IS343/techcorner/Reviews_ROLLOVER_WHILE_DOWN.jpg','../../../Documents/IS343/techcorner/Lawsuits_DOWN.jpg','../../../Documents/IS343/techcorner/Lawsuits_ROLLOVER.jpg','../../../Documents/IS343/techcorner/Lawsuits_ROLLOVER_WHILE_DOWN.jpg')">
<style>
BODY {SCROLLBAR-FACE-COLOR: #006699; SCROLLBAR-HIGHLIGHT-COLOR: #006699; SCROLLBAR-SHADOW-COLOR: #999999; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR:  #CCFFFF; SCROLLBAR-TRACK-COLOR: #E3E3E3; SCROLLBAR-DARKSHADOW-COLOR: #666666; }
</style>
<TABLE borderColor=#000000 height=141 cellSpacing=0 cellPadding=0 width=800 
align=center border=2>
  <TR> 
    <TD vAlign=top align=left bgColor=#006699 height=141><p><img src="http://i43.photobucket.com/albums/e352/shockwavecs/theTechCorner_Banner_wide.jpg" width="800" height="141" border="0"></p>
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><a href="../../../Documents/IS343/techcorner/techcorner_homepage.html" target="_top" onClick="MM_nbGroup('down','group1','NewsButton','../../../Documents/IS343/techcorner/News_DOWN.jpg',1)" onMouseOver="MM_nbGroup('over','NewsButton','../../../Documents/IS343/techcorner/News_ROLLOVER.jpg','../../../Documents/IS343/techcorner/News_ROLLOVER_WHILE_DOWN.jpg',1)" onMouseOut="MM_nbGroup('out')"><img src="../../../Documents/IS343/techcorner/News_UP.jpg" alt="NEWS" name="NewsButton" border="0" onload=""></a></td>
        </tr>
        <tr>
          <td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','LawsuitsButton','../../../Documents/IS343/techcorner/Lawsuits_DOWN.jpg',1)" onMouseOver="MM_nbGroup('over','LawsuitsButton','../../../Documents/IS343/techcorner/Lawsuits_ROLLOVER.jpg','../../../Documents/IS343/techcorner/Lawsuits_ROLLOVER_WHILE_DOWN.jpg',1)" onMouseOut="MM_nbGroup('out')"><img name="LawsuitsButton" src="../../../Documents/IS343/techcorner/Lawsuits_UP.jpg" border="0" alt="Lawsuits" onLoad=""></a></td>
        </tr>
        <tr>
          <td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','BlogButton','../../../Documents/IS343/techcorner/Blog_DOWN.jpg',1)" onMouseOver="MM_nbGroup('over','BlogButton','../../../Documents/IS343/techcorner/Blog_ROLLOVER.jpg','../../../Documents/IS343/techcorner/Blog_ROLLOVER_WHILE_DOWN.jpg',1)" onMouseOut="MM_nbGroup('out')"><img name="BlogButton" src="../../../Documents/IS343/techcorner/Blog_UP.jpg" border="0" alt="Blog" onLoad=""></a></td>
        </tr>
        <tr>
          <td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','GalleriesButton','../../../Documents/IS343/techcorner/Galleries_DOWN.jpg',1)" onMouseOver="MM_nbGroup('over','GalleriesButton','../../../Documents/IS343/techcorner/Galleries_ROLLOVER.jpg','../../../Documents/IS343/techcorner/Galleries_ROLLOVER_WHILE_DOWN.jpg',1)" onMouseOut="MM_nbGroup('out')"><img name="GalleriesButton" src="../../../Documents/IS343/techcorner/Galleries_UP.jpg" border="0" alt="Galleries" onLoad=""></a></td>
        </tr>
        <tr>
          <td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','ReviewsButton','../../../Documents/IS343/techcorner/Reviews_DOWN.jpg',1)" onMouseOver="MM_nbGroup('over','ReviewsButton','../../../Documents/IS343/techcorner/Reviews_ROLLOVER.jpg','../../../Documents/IS343/techcorner/Reviews_ROLLOVER_WHILE_DOWN.jpg',1)" onMouseOut="MM_nbGroup('out')"><img name="ReviewsButton" src="../../../Documents/IS343/techcorner/Reviews_UP.jpg" border="0" alt="Reviews" onLoad=""></a></td>
        </tr>
    </table></TD>
  </TR>
  <TR> 

Open in new window

0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 34190348
Images are inside of table rows.  Each row is, well, a row.  So, one image per row per the code above.
0
 

Author Comment

by:Justin_Edmands
ID: 34190463
i'm a little confused. and i am fairly new at this. does TR denote the table row? Is there any way you could just complete the portion of the code to get me on the right track? I think it's just stupid how the windows version of this has a "Horizontally" checkbox while in the insert nav bar dialog box.
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 34190642
>> does TR denote the table row

Yes.

A table looks like this:

<table>  //starts the table
   <tr> //starts a row
       <td></td> // puts a cell (column) in the row
   </tr> // closes the row
</table> // closes the table

So your code above has a table with 5 rows and 1 column and each row contains a rollover image.  What you might want to do is create a table with 5 columns and 1 row and then the images will be horizontal if you have one image per cell.

Something like this:

<table>
  <tr>
     <td>rollover image code 1</td>
     <td>rollover image code 2</td>
      etc. etc. etc.
  </tr>
</table>

Open in new window


>> Is there any way you could just complete the portion of the code to get me on the right track?

I could easily complete the code but you said this was a school assignment.  I'm prohibited by the EE terms of use from doing other's homework for them (and I typically don't like doing that anyway...would rather teach).  I can advise you and present general tutorials but I won't just do it for you.

>> I think it's just stupid how the windows version of this has a "Horizontally" checkbox while in the insert nav
>> bar dialog box.

Yeah.  You are also using a deprecated function to do this.  Most navigation is done with CSS controlling ordered or unordered lists in modern pages.  In DW, you can use Spry to get a wizard to make a horizontal or vertical nav bar with rollover effects but done completely with text.
0
 

Author Comment

by:Justin_Edmands
ID: 34190688
Awesome!

deleted the extra <tr> and </tr> pieces of code and it is in one row now. Thanks a lot!
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 34190745
And there you go!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
This video discusses moving either the default database or any database to a new volume.
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now