How to put labels of text on the buttons in the navigation bar

Hello.  I have a bar using Dreamweaver CS4 to browsing.

After you create 2 simple rectangles 100 x 40 pixels with different gradients in photoshop and save them as button.png and button2.png, I've created an html file, then went to the Menu bar and insert > Image objects > Navigation bar.

I went through the whole process, has successfully all the links for the different States of my nav and added buttons added to my library as a sidebar.

I then added this a test .html and books of navigation very well.

The only part I have a problem getting labels on the buttons.

I know that I can mark each individual button early on in Photoshop, but it would mean having a bunch of slightly different buttons / png which will add to the duration of download / file size.  Is it possible to add text labels after the fact (that way I only need a few images of the different buttons that are used over and over again throughout the site, with only the labels changing)?

I tried to place an AP Div tag with a high index z on the navigation bar and text placed above each button, but it stopped working navigation (the hand icon doesn't display above if I hover over a button because the AP Div with text is in front of it).

Suggestions as to how (or if) I can put on the labels?  I guess a solution would be a small label in a transparent part of the button, but I hope that there is a simple way to do it where the text can be placed in front of the button without interfering.

Here is a link to the test showing page buttons and text interfere with features of navigation bar.

http://henrythewren.com/indextest.html

Thank you

You must use the image as a background image on a link, then another to show in the overview.

Here's a good tutorial of how it's done... no need to use the cells in a table, just use a list:

http://CSS.maxdesign.com.au/Listamatic/vertical11.htm

and here's the master list of how to style of the bars of different menus using css:

http://CSS.maxdesign.com.au/Listamatic/

--

Nadia

Adobe® Expert community: Dreamweaver

--------------------------------------------------

Unique templates CSS | Tutorials | SEO articles

http://www.DreamweaverResources.com

--------------------------------------------------

Book: Ultimate CSS reference

http://www.SitePoint.com/launch/005dfd4/3/133

---------------------------------------------------

http://Twitter.com/nadiap

Tags: Dreamweaver

Similar Questions

  • How to create a pick list in the navigation bar

    Hello

    I use apex5 universal theme and I have an obligation to create a selection list in the navigation bar (before the username and logout) and join a dynamic action. Can someone tell me please how to do this.

    Note: I have created a page zero region. But none of the region of downtown suites this obligation to show the point just before the username and logout.

    Thank you

    Stephanie.

    Guys,

    I thought about a way myself. Its works fine as well. Please find the steps below.

    • Create a region in page zero as a model "empty with attributes.
    • Create a P0_SELECTION to a P0_SELECTION class (if you do not use this class, you can still refer with ID P0_SELECTION, your choice)
    • Create a bar the entrance to the navigation list with the following properties-online class/Image = SELECTIONPOSITION, entry list Label =, Target = URL, target URL = javascript: void (0);

    When you have finished the above activities, go to a page where you would like this item placed in the navigation bar. Simply put the code below in the section JS page (Execute when the Page loads).

    $(". P0_SELECTION')

    .appendTo(".) SELECTIONPOSITION");

    The jquery above to add the item to the navigation class class. Now the best way is to designate the ID. All you need to do is change as below.

    $("#P0_SELECTION")

    .appendTo ("#SELECTIONPOSITION");

    In this way, you can position your elements from anywhere in the page. All you need to do is to create and DISPLAY or class position and adds the element using jQuery.

    Hope this information is useful for someone struggling to position elements in the Web page.

    Thank you

    Stephanie.

  • display the text in the navigation bar when the user connects

    Hi all

    I'm (still ) on Apex 4.2.6.

    Currently, I have in my page templates, the following code snippet:

          <div class="logoBar">

              <img src="#IMAGE_PREFIX#themes/theme_125/images/logo_.png" />

              <h1><a href="#HOME_LINK#" id="uLogo">#LOGO#</a></h1>

            <div class="userBlock">

              <span>Username: &APP_USER.</span>

              #NAVIGATION_BAR#

            </div>

          </div>

    I have an obligation to display the user name (APP_USER) and of the company the user works for point Application AI_COMPANY, only when the user is connected. When the user is not connected; instead of these elements, I must show a connection link. Well, I know how to display a link to the login page, only when the user is not authenticated, using the navigation bar. Currently, when a user is not authenticated; the page shows: username: person. It's because he's in my page template. How can I show only the user name when the user connects? And then only display the name of the company?

    My first thought was to add an item in the navigation bar. But these elements comes in the form of links. Is it possible to add a navigation bar element and let it display as text? Of course, I could write a dynamic action on page 0 to remove the link, but I'm looking for a nicer sollution or better.

    I have apreciate your help!

    I take it, you use the same model of your home page and login page.

    You could use 2 different models or get out your elements in your model and put them in page 0.

    You can then make them conditional based on the number of page

    Gus

  • Universal theme 42 - too long text in the Navigation bar

    Hello

    I use APEX 5.0 (1000 likes ;-) with Oracle 11.2.

    I created an application with theme universal theme 42.

    Navigation should look like this (for example, without sense):

    1. presentation of the members

    1.1 first presentation of car deveopment

    1.1.1another point to navigate

    2. the means of production

    3. last menu point

    3.1. .....

    3.1.1...

    3.1.2...

    ...

    The text is truncated or not completely display. For example only "1.1. "first conception of ' appears in the navigation menu. The rest is not visible.

    Is it possible to stop the wrapping text in the navigation menu. Looking for the corresponding model, I need to change, I found the 'Link List' model with the CSS classes "t-LinkList - nowrap ' to 'Disable the text wrapping' but I don't no weather is the right way to solve the problem or where I have to activate the Option nowrap.

    Another, perhaps better elsewhere would attend the larger navigation bar. But I can't find the right place in the style sheet to change this.

    Any suggestions?

    Ben

    Oh, I found the solution. I created a custom in the theme roller css, save under and so on.

  • How to change an existing color in the navigation bar...

    Inherited this site as a project.  Could change almost everything, but can not find the file to change the color "gold" on the navigation bar at a better "yellow."  Company that has prepared an initial site is no longer in the biz.  See attached link...

    http://www.banners4churches.com/current/index.php

    Still learn a lot from DW, but it left me speechless.  Any ideas?

    The color is defined in the CSS file

    http://www.banners4churches.com/_ui/2007/CSS/skin_2007_.CSS

    #left ul.sidebar {}
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fcc11b; / * Yellow BG Color on navigation bar * /.
    text-align: left;
    Width: 167px;
    padding: 3px 3px 1px 1px;
    }

  • JavaScript text in the navigation bar

    Hello, I would like to know how to do this javascript line running in the navigation bar of sensitivity (or header)

    Here is the example:

    http://Apex.Oracle.com/pls/OTN/f?p=31517:1:1161053821502832

    I created an entry in the navigation bar (targettype = URL)
    JavaScript:Alert('Hello_World!!');
    You can see who is working here: [http://apex.oracle.com/pls/otn/f?p=41715:49]

  • How to disable "on: newtab ' text in the address bar of each new tab Firefox 13

    Many of us are used to open a new tab and begin to write search queries / web address in the address bar

    with Firefox 13 if I open new tab and just try to get firefox
    following appears in the address bar

    Subject: newtabfirefox

    (topic: newtab is already written in the new tab address bar)

    If you want to open a new tab in a some URLs (like www.google.com or another site) go to Subject: config find/type browser.newtab.url , double click (or right click on it and select Edit) and type the url you want. Whenever you open a new tab, you open it in this url/site.

    If you want to open a new tab like a Virgin tab, so you can write search queries / web address in the address bar, do the same thing and type Subject: vacuum .
    Each new tab in the future, it opens in white.

    Thank you

    Please check 'Resolved' the answer really solve the problem, to help others with a similar problem.

  • How to put a small icon in the title bar of the main screen

    Hi all, I'm new to the BlackBerry Forum.

    I can display a small icon in the title bar in the main Blackberry screen to warn users when my application is received something and it is reduced?

    Thanks in advance!

    Yes you can do this by using the following code.

    ApplicationIndicatorRegistry reg = ApplicationIndicatorRegistry.getInstance();                EncodedImage image = EncodedImage.getEncodedImageResource("Indicator.png");            ApplicationIcon icon = new ApplicationIcon( image );            indicator = reg.register( icon, false, true);            indicator.setIcon(icon);            indicator.setVisible(true);
    
  • How to remove the text in the navigation bar "this catalog has no subgroup catalogs." or to say something

    I made this bread crumbs on the model of module and it made me lose all my products. Any advice would be welcome

    Thank you

    Martin

    Hi Martin,

    In order to get rid of the message you will need to log into your admin console and access the Site Manager > Module models > online store Layouts > overall planning and change the {tag_cataloguelist} and {tag_productlist}.

    Reference KB "customize the appearance of list of catalogues under;

    http://KB.worldsecuresystems.com/606/bc_606.html#main_Customizing_catalogs

    Kind regards

    -Sidney

  • Global menu in the navigation bar?

    Hello

    I managed to put a menu list in the navigation of a page, but I would like to put a global menu in the navigation bar on all pages. How can I do?

    Thank you

    Hello

    Create page zero and place/copy your list to this page

    BR, Jari

  • I don't want to search for the navigation bar. I want to put the address and it goes to the address. But I now I put the address of and he did a search instead. Why? How can I change that.

    Like I said how can I just put the address in the navigation bar, and it goes to the address instead of search.

    See:

  • How to put in place measures in the application of health?

    How to put in place measures in the application of health?

    What do you mean 'the configuration steps? If you want steps if poster on the health dashboard, tap on health at the bottom of the screen data. Tap fitness. Tap measures. The value "Show on dashboard" on.

    The health app is really more than one application storage and synchronization. You can't do things as targets for a particular metric. If you want to set a goal of step and follow it, use one of the many followed apps available that can extract data from health. Map My Fitness, My Fitness Pal, Jawbone UP and Fitbit (both can be used with the phone if you have an iPhone 5 or a later version). If you like to compete with others, the Club activities is fun.

  • How to copy and paste text from the page of the book one photo to another.

    Hello, I downloaded this software 2 days ago, and I had so much fun with it. pls I need help on how to copy and paste text from the page of the book one photo to another. Second, how to copy my photo book completed pages project to another laptop computer for printing. Thank you

    Wow! I solved the first problem, I clicked on 'ctrl c' to copy and "ctrl v" to paste. yipppppeee! now am loving this software d most just need help with the second question now

  • How to put windows 7 pro on the new computer using the same key on the side of the other computer

    I have a computer comes with windows 7 pro. I am now building a new computer. How to put windows 7 pro on the new computer using the same key on the side of the computer. I don't have a Windows 7 disc.

    Original title: Windows 7 pro

    Tuesday, October 14, 2014 20:31:20 + 0000, 4hammond wrote:

    I have a computer comes with windows 7 pro. I am now building a new computer. How to put windows 7 pro on the new computer using the same key on the side of the computer. I don't have a Windows 7 disc.

    You can not, for at least one (and two possible) reasons.

    1. it isn't clean if you want to have two computers, or you
    you want to remove from the old computer and put it on the new. If
    you want once, you can't do that - the rule is very clear: there
    a copy (or a license) for each computer.

    There is nothing new here. This is exactly the same rule that has been in
    effect on all versions of Windows from at least with Windows 3.1.

    2. but even if you want it on a single and from uninstall
    the old computer, you can't do it. It is because if it came with the
    computer, it is an OEM version and the biggest drawback to he a
    OEM version, is that its license it permanently binds to the first
    It is installed on the computer. He can never legally be moved to another
    computer, sold or assigned (except with the original computer).

  • How to add and edit text in the form created by adobe acrobat 9?

    How to add and edit text in the form created by adobe acrobat 9?

    Actually, that's exactly what you should do, you don't need to create

    all fields again.

    After you have edited the original and create a new static PDF, open the old

    version and use the command replace Pages to insert the new pages

    those in the old file. This will keep all the form fields in tact.

    Tuesday, August 25, 2015 at 10:28, susanna323 [email protected]>

Maybe you are looking for