Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Procedure to use a image as a menu bar?

  1. #1
    Junior Member
    Join Date
    Nov 2010
    Posts
    16

    Default Procedure to use a image as a menu bar?

    Ive made a simple design in Photoshop and then used Fireworks to make slices of each object.

    I have this long menu bar that stretches across the screen that I would like to use as a navigation menu.



    Whats the best way to do this?
    Do I have to divide the image into smaller sections or could I somehow just place the whole image in NoF and then add the text for Home, Contact Us etc. on top of it?

  2. #2
    Senior Member RayC's Avatar
    Join Date
    Apr 2010
    Location
    Toronto-ish, Canada
    Posts
    1,731

    Default

    There are a couple of ways to approach this.

    If you wanted to use the entire image as-is, and it is exactly the size you want, you could create a 1x1 table and use this as a background image. Then have simple text links for your navigation within the table cell.

    What I tend to do (admittedly, I don't always do the smart thing ) is the following:
    • Create a slice, or slices, of your image. Say a 2 px wide slice from the middle, and if you want the curved ends, one for each end just wide enough to create the effect
    • Take another chunk the size of your navigation buttons, and use this to define the nav buttons in your SiteStyle.
    • Create a 1 row x 3 column table and use the 2 px wide slice as the background in the middle cell, and place the end pieces in the left and right cell. (Shrink the column width in the left and right cells to something smaller than the width of the graphic so it forces the column wider when you insert the end pieces.)
    • Place your Nav Bar in the middle cell, and the buttons should blend with the background.
    • Alternatively, you could skip the table, and define end caps in your SiteStyle for your nav bar using your two end pieces. Your Navigation Bar will then be only as long as the number of buttons you define.


    HTH
    Ray Cambpell
    Sounds In Sync
    Linked in

  3. #3
    Junior Member
    Join Date
    Nov 2010
    Posts
    16

    Default

    Ray, many thanks for your help, those instructions should get me started.

    Im used to Fusion MX where I used the BitMotion Page Position addon to make a page centered.

    I noticed I can center a page in Fusion 12 with the Layout Properties but what if I need a colored background?



    Ive tried using frames but when re-sizing the page in the browser the layout area grows instead of the left and right frames/borders.

    Any ideas?
    Last edited by Litreb; 06-30-2011 at 02:40 PM.

  4. #4
    Senior Member gotFusion's Avatar
    Join Date
    Jan 2010
    Location
    www.gotHosting.biz
    Posts
    4,526

    Default

    This tutorial will explain how to get a different color background and layout color: http://www.gotfusion.com/tutorials/t...mID=4048#color
    NetObjects Fusion Cloud Linux enabled Web Hosting, support + training starts at $14.95
    NetObjects Fusion web Hosting and support + ASP + PHP + ColdFusion + MySQL + MS SQL
    FREE NetObjects Fusion Support & training comes with all web hosting accounts
    NetObjects Fusion Web Hosting: http://www.gotHosting.biz

  5. #5
    Junior Member
    Join Date
    Nov 2010
    Posts
    16

    Default

    Thank you, this site is awesome, such fast answers.

    I will try that, I installed my old copy of Fusion MX to check on a old site and noticed I had used Layout Regions. I had set the style background to grey and then added white Layout Regions to the content areas. I guess its the opposite way of doing it but with a similar result?
    Last edited by Litreb; 06-30-2011 at 04:36 PM.

  6. #6
    Senior Member chuckj's Avatar
    Join Date
    Jan 2010
    Location
    www.beyondfusion.com - Florida
    Posts
    1,302

    Default

    I use top, bottom and layout Layout Regions for the purpose of having a centered page with a background surrounding the content area.

    Been doing it since Fusion 3.
    Chuck Joslin
    www.BeyondFusion.com
    PHP & MySQL development with Fusion
    Fusion support for AllWebMenus (Likno) Contact me for custom AWM menus for your sites.
    Tutorials and Forums

  7. #7
    Senior Member RayC's Avatar
    Join Date
    Apr 2010
    Location
    Toronto-ish, Canada
    Posts
    1,731

    Default

    Here I go hijacking a thread again...

    Chuckj, can you elaborate on this a little? I think I know what you mean, but I'd like to be sure I understand.

    I'm always curious about other approaches to layout. Ya never know when it might come in handy.
    Ray Cambpell
    Sounds In Sync
    Linked in

  8. #8
    Junior Member
    Join Date
    Nov 2010
    Posts
    16

    Default

    RayC, we set a Sitestyle background color but since this is also visibe in the Top, Bottom and Layout sections we need to paint/cover these areas with something.

    By inserting "Layout Regions" on top of the Layout and changing their color and size we are able to cover up the Sitestyle background.

    Last edited by Litreb; 07-01-2011 at 12:06 AM.

  9. #9
    Junior Member
    Join Date
    Nov 2010
    Posts
    16

    Default

    Quote Originally Posted by RayC View Post
    There are a couple of ways to approach this.

    If you wanted to use the entire image as-is, and it is exactly the size you want, you could create a 1x1 table and use this as a background image. Then have simple text links for your navigation within the table cell.

    What I tend to do (admittedly, I don't always do the smart thing ) is the following:
    • Create a slice, or slices, of your image. Say a 2 px wide slice from the middle, and if you want the curved ends, one for each end just wide enough to create the effect
    • Take another chunk the size of your navigation buttons, and use this to define the nav buttons in your SiteStyle.
    • Create a 1 row x 3 column table and use the 2 px wide slice as the background in the middle cell, and place the end pieces in the left and right cell. (Shrink the column width in the left and right cells to something smaller than the width of the graphic so it forces the column wider when you insert the end pieces.)
    • Place your Nav Bar in the middle cell, and the buttons should blend with the background.
    • Alternatively, you could skip the table, and define end caps in your SiteStyle for your nav bar using your two end pieces. Your Navigation Bar will then be only as long as the number of buttons you define.


    HTH
    I guess the Navbar will be group together or it somehow possible have some links at the left side of the bar and then have the contact link at the far right?

  10. #10
    Junior Member
    Join Date
    Nov 2010
    Posts
    16

    Default

    Ive made a sample menu that is visible at:

    http://www.wartan.se

    Since I wasnt sure how to make it like that and maintain its rollover functions I moved it from the Top Masterborder into the normal Layout section. I guess it works but its a bit annoying with the flickering on page reloads.

    Is there anyway I could make a similar look and function with the menu placed in the Top Masterborder?
    Last edited by Litreb; 11-29-2011 at 11:05 AM. Reason: spelling correction

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •