Solved

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

Posted on 2010-11-21
9
687 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

 

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
 
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
This video Micro Tutorial shows how to password-protect PDF files with free software. Many software products can do this, such as Adobe Acrobat (but not Adobe Reader), Nuance PaperPort, and Nuance Power PDF, but they are not free products. This vide…
Michael from AdRem Software outlines event notifications and Automatic Corrective Actions in network monitoring. Automatic Corrective Actions are scripts, which can automatically run upon discovery of a certain undesirable condition in your network.…

726 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