5 Replies Latest reply on Sep 27, 2008 6:03 AM by Newsgroup_User

    Creating menu bar in Photoshop

      I created a menu bar with individual buttons and hover buttons in photoshop. I want the background buttons positioned in a set place and to have the hover buttons work when I hover over each button. What's the best way to do this? I started with making a div wrap, but now I'm not sure if I should be doing this in a table. Is there an example anyone knows of to do this with divs or a table?
      --Theresa--
        • 1. Re: Creating menu bar in Photoshop
          Level 7
          Export the images for the buttons (NOT the HTML) from Photoshop, and build
          the page in DW.

          You can put each button's image in adjacent table cells, or in adjacent list
          elements, depending on your layout skills. You can use Dreamweaver's
          SwapImage behavior to roll the buttons on hover, or you can use CSS to do
          that, again depending on your skills.

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "Traveler815" <webforumsuser@macromedia.com> wrote in message
          news:gbdk4q$pgr$1@forums.macromedia.com...
          >I created a menu bar with individual buttons and hover buttons in
          >photoshop. I
          > want the background buttons positioned in a set place and to have the
          > hover
          > buttons work when I hover over each button. What's the best way to do
          > this? I
          > started with making a div wrap, but now I'm not sure if I should be doing
          > this
          > in a table. Is there an example anyone knows of to do this with divs or a
          > table?
          > --Theresa--
          >

          • 2. Re: Creating menu bar in Photoshop
            Level 1
            quote:

            Originally posted by: Newsgroup User
            Export the images for the buttons (NOT the HTML) from Photoshop, and build
            the page in DW.

            You can put each button's image in adjacent table cells, or in adjacent list
            elements, depending on your layout skills. You can use Dreamweaver's
            SwapImage behavior to roll the buttons on hover, or you can use CSS to do
            that, again depending on your skills.

            --
            Murray --- ICQ 71997575
            Adobe Community Expert
            (If you *MUST* email me, don't LAUGH when you do so!)
            ==================
            http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
            http://www.dwfaq.com - DW FAQs, Tutorials & Resources
            ==================


            "Traveler815" <webforumsuser@macromedia.com> wrote in message
            news:gbdk4q$pgr$1@forums.macromedia.com...
            >I created a menu bar with individual buttons and hover buttons in
            >photoshop. I
            > want the background buttons positioned in a set place and to have the
            > hover
            > buttons work when I hover over each button. What's the best way to do
            > this? I
            > started with making a div wrap, but now I'm not sure if I should be doing
            > this
            > in a table. Is there an example anyone knows of to do this with divs or a
            > table?
            > --Theresa--
            >





            I have my spliced image buttons with the menu text and saved them as .gif format to use in DWCS3. I'd like to use the CSS but I'm not sure what I need to include.

            I'm working on the CSS behavior for
            <div id="menubar-container">
            <div id="menubar-bar">
            <div class="menubar">

            stylesheet:

            #menubar-container {
            height: 47px;
            width: 970px;
            position: relative;
            padding: 0px 0px 0px 0px;
            margin: 0 auto;
            }

            #menubar-bar {
            margin: 0 auto;
            width: 960px;
            height: 47px;
            }

            #menubar {
            height: 47px;
            background-color: #CCCCCC;
            }

            and because I'm not 100% sure of what I'm doing I've been trying a few CSS codes and to work up the proper code in my html page... here's more of my CSS sample (mess)
            #menu-home { width: 125px; }
            #menu-home a span {
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
            width: 125px;
            height: 47px;
            background:url(../Images/btn_Products.jpg) -118px 0 no-repeat;
            }
            #menu-home a:hover span { background-position: -118px -40px;
            background: url(../Images/btn_Products_hover.jpg);
            }

            #menu-products { width: 125px; }
            #menu-products a span {
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
            width: 125px;
            height: 40px;
            background: url(../Images/btn_NewsEvents.jpg) -235px 0 no-repeat;
            }
            #menu-products a:hover span { background-position: -235px -40px;
            background: url(../Images/btn_NewsEvents_hover.jpg);
            }

            Is there a better way?
            --Theresa--
            • 3. Re: Creating menu bar in Photoshop
              Level 7
              > Is there a better way?
              --Theresa--

              You may want to look at the various ways to create menus using css
              http://css.maxdesign.com.au/listamatic/


              this is an example using background images:
              http://css.maxdesign.com.au/listamatic/horizontal26.htm



              Nadia
              Adobe® Community Expert : Dreamweaver
              ----------------------------------------
              CSS Templates |Tutorials |SEO Articles
              http://www.DreamweaverResources.com
              ~ Customisation Service Available ~
              http://www.csstemplates.com.au
              ----------------------------------------------------
              Spry Widget Examples
              http://www.dreamweaverresources.com/spry-widgets/
              ----------------------------------------------------
              ~ Forum Posting Guidelines ~
              http://www.adobe.com/support/forums/guidelines.html
              CSS Tutorials for Dreamweaver:
              http://www.adobe.com/devnet/dreamweaver/css.html

              • 4. Re: Creating menu bar in Photoshop
                Level 1
                quote:

                Originally posted by: Newsgroup User
                > Is there a better way?
                --Theresa--

                You may want to look at the various ways to create menus using css
                http://css.maxdesign.com.au/listamatic/


                this is an example using background images:
                http://css.maxdesign.com.au/listamatic/horizontal26.htm



                Nadia
                Adobe® Community Expert : Dreamweaver
                ----------------------------------------
                CSS Templates |Tutorials |SEO Articles
                http://www.DreamweaverResources.com
                ~ Customisation Service Available ~
                http://www.csstemplates.com.au
                ----------------------------------------------------
                Spry Widget Examples
                http://www.dreamweaverresources.com/spry-widgets/
                ----------------------------------------------------
                ~ Forum Posting Guidelines ~
                http://www.adobe.com/support/forums/guidelines.html
                CSS Tutorials for Dreamweaver:
                http://www.adobe.com/devnet/dreamweaver/css.html




                Thanks Nadia, I'll play with this over the weekend to get the menu bar working. I made this post because I didn't want to cause myself more work if there's something streamlined that works well.

                • 5. Re: Creating menu bar in Photoshop
                  Level 7
                  "Traveler815" <webforumsuser@macromedia.com> wrote in message
                  news:gbj8p5$o$1@forums.macromedia.com...
                  >
                  quote:

                  Originally posted by: Newsgroup User
                  > > Is there a better way?
                  > --Theresa--
                  >
                  > You may want to look at the various ways to create menus using css
                  > http://css.maxdesign.com.au/listamatic/
                  >
                  >
                  > this is an example using background images:
                  > http://css.maxdesign.com.au/listamatic/horizontal26.htm

                  >
                  > Thanks Nadia, I'll play with this over the weekend to get the menu bar
                  > working. I made this post because I didn't want to cause myself more work
                  > if
                  > there's something streamlined that works well.

                  You're welcome and good luck :-)


                  --
                  Nadia
                  Adobe® Community Expert : Dreamweaver
                  ----------------------------------------
                  CSS Templates |Tutorials |SEO Articles
                  http://www.DreamweaverResources.com
                  ~ Customisation Service Available ~
                  http://www.csstemplates.com.au
                  ----------------------------------------------------
                  Spry Widget Examples
                  http://www.dreamweaverresources.com/spry-widgets/
                  ----------------------------------------------------
                  ~ Forum Posting Guidelines ~
                  http://www.adobe.com/support/forums/guidelines.html
                  CSS Tutorials for Dreamweaver:
                  http://www.adobe.com/devnet/dreamweaver/css.html