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

    Moving A Navigation Bar?

    anonymousDWuser Level 1

      Hello:

       

      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!

       

      Thanks,

       

      Tim

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

            http://w3schools.com/css/css_boxmodel.asp

             

            Margins -

            http://w3schools.com/css/css_margin.asp

             

            Padding -

            http://w3schools.com/css/css_padding.asp

             

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists
            http://alt-web.com/
            http://twitter.com/altweb
            http://alt-web.blogspot.com

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

               

              Tim