Creating menu bar in Photoshop

Question

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

Answer 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" <[email protected]> wrote in
message
news:[email protected]...
>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--