3 Replies Latest reply on May 29, 2010 4:11 PM by anonymousDWuser

    Moving A Navigation Bar?

    anonymousDWuser Level 1



      I am totally new to DreamWeaver, and trying to figure out a few things through trial and error.


      I am working on a simple website. I have the background set, and I just finished making the Nav Bar buttons. After creating the Nav Bar, it is automatically aligned on the top left side of the screen. I can align it left, right, or center it, but I cannot figure out how to move it to an exact location.


      Is there a way to do this with a DreamWeaver function? If not, how can I do it manually through the scripting?


      Any help will be GREATLY appreciated, as I am starting to go nuts figuring this out!





        • 1. Re: Moving A Navigation Bar?
          Ken Binney-GnPIX3 Level 4

          Please post your entire Page and CSS if remote.

          • 2. Re: Moving A Navigation Bar?
            Nancy OShea Adobe Community Professional & MVP

            Short answer, use CSS margins and padding.


            It's helpful to understand the CSS Box Model -



            Margins -



            Padding -




            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists

            • 3. Re: Moving A Navigation Bar?
              anonymousDWuser Level 1

              Thank you both for the quick responses!


              As requested, here is the coding for the nav bar I'm working with:


              <body onload="MM_preloadImages('Adamack Pro/Home Nav Over.png','Adamack Pro/About Nav Over.png','Adamack Pro/Contact Nav Over.png','Adamack Pro/FAQ Nav Over.png')">
              <div align="center"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Home','',1)" onmouseover="MM_nbGroup('over','Home','Adamack Pro/Home Nav Over.png','',1)" onmouseout="MM_nbGroup('out')"><img src="Adamack Pro/Home Nav PNG.png" alt="" name="Home" width="74" height="37" border="0" id="Home" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','About','',1)" onmouseover="MM_nbGroup('over','About','Adamack Pro/About Nav Over.png','',1)" onmouseout="MM_nbGroup('out')"><img src="Adamack Pro/About PNG.png" alt="" name="About" width="74" height="37" border="0" id="About" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Contact','',1)" onmouseover="MM_nbGroup('over','Contact','Adamack Pro/Contact Nav Over.png','',1)" onmouseout="MM_nbGroup('out')"><img src="Adamack Pro/Contact PNG.png" alt="" name="Contact" width="74" height="37" border="0" id="Contact" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','FAQ','',1)" onmouseover="MM_nbGroup('over','FAQ','Adamack Pro/FAQ Nav Over.png','',1)" onmouseout="MM_nbGroup('out')"><img src="Adamack Pro/FAQ PNG.png" alt="" name="FAQ" width="74" height="37" border="0" id="FAQ" onload="" /></a></div>


              As of now, it is centered in the middle of the page. I need to get it into a custom area just above the header. My background is just an one image file, so I am not working with separate image files with which I can use as borders for the nav bar.


              Nancy: I will check out those links and see if I can figure it out. Thanks!