Navigation Bar Image

Hello,
Is there a way to display the image of the navigation bar entry on the top instead of in line
with the text? I tried several things with my moderate html knowledge but didn't get it
working.
Denes Kubicek

Edit your page template and change the "Navigation Bar Entry" attribute.
This is an example of a navigation bar entry sub template:
<td valign="top">#TEXT#</td><td valign="top">
<img src="#IMAGE_PREFIX#themes/theme_9/separator.png"/>
</td>
If you are using a theme upgraded from a 1.5 version of HTML DB this page template attribute may not be supplied; however if you use a 1.6 or 2.0 theme it should be populated.
You have another alternative as well; you can use an HTML DB list to build a navigation bar. You will need to put a region display position in your page template where you have your nav bar; then you can create a list on page 0 and it will show on all pages.
Mike

Similar Messages

  • Centering Navigation Bar Images and Text

    I'm using a Navigation Bar entry of
    #TEXT#<img src="#IMAGE_PREFIX##IMAGE#" title="#ALT#" alt="#ALT#" style="display:block" />#TEXT#
    which is similar to the way the APEX Page Definition navigation bar is designed. The images do appear directly above the text but the text is right justified. How do you get the text to be centered, as it appears in the APEX Page Definition?

    I used the theme 10 and there is a thread where I explained the solution I found:
    Navigation Bar Image
    and here is the result:
    http://htmldb.oracle.com/pls/otn/f?p=31517
    Denes Kubicek

  • Space between navigation bar images?

    I have 8 image in my navigation bar. When I had 7 (home, contacts, forums, etc) I had no space between them, but now that I have 8, a small space appeared between the images. How can I remove the space?
    Here is the problem:
    http://mjackson.freevar.com/home.html

    Instead of using a <p> tag and using align=center to enclose the navigation bar, I would use a div, give it a width (total width all the buttons added together)  and then use margin:0 auto; to center it on the page.
    Without having access to the images it's difficult to bring the code into DW for testing, but make sure there is no 'whitespace' in the code between the button images.

  • Please help. How can I get rid of this red dotted border around my navigation bar images?

    If you go to my site here...
    http://metalwolf92.zymichost.com/
    And left-click and hold down your mouse, but don't release, on any of the navigation button images. Notice the red dotted border? How can I get rid of those?
    All images already have border set to 0.

    I just noticed your page has no css. so in Code View, replace this closing tag:
    </head>
    with this:
    <style type="text/css">
    a:active {
      outline: none;
    </style>
    </head>
    E. Michael Brandt
    www.divahtml.com
    www.divahtml.com/products/scripts_dreamweaver_extensions.php
    Standards-compliant scripts and Dreamweaver Extensions
    www.valleywebdesigns.com/vwd_Vdw.asp
    JustSo PictureWindow
    JustSo PhotoAlbum, et alia

  • How do I add an image to my navigation bar?

    How do I add an image to my navigation bar? I created my own. Let's say for example I wanted to a page dedicated to the lakers rss feed, and instead of having text in the box "Lakers", I want it to be the lakers logo. I already have the hyperlink in that box working.

    That didn't sound right:
    How do I add an image to my navigation bar? I created my own. Let's say for example I wanted to have a page dedicated to the lakers rss feed, and instead of having text in the box on the bar that reads "Lakers", I want it to be the lakers logo. I already have the hyperlink in that box that will direct you to that page.

  • How do I change the background image for a single tab on the navigation bar

    I'm creating a movie website for TDKR and for the navigation bar, I intend to have a different character for each tab. However, I'm having trouble putting a single image each separate tab. Instead one image appears on each of the tabs. Here's an example of the source and CSS.
    <td width="200"><ul id="navigation"><br />
          <li><a href="../pages/index.html">Home</a></li><br />
          <li><a href="../pages/cast.html">Cast</a></li><br />
          <li><a href="../pages/pictures.html">Pictures</a></li><br />
          <li><a href="../pages/soundtrack.html">Music</a></li><br />
          <li><a href="../pages/interview.html">Interviews</a></li><br />
          <li><a href="../pages/links.html">Links</a></li><br />
        </ul>
        </td>
    #navigation {
              list-style-type: none;
              padding: 0px;
              margin: 0px;
    #navigation li {
              margin: 0px;
              padding: 0px;
              list-style-type: none
    #navigation li a:link, #navigation li a:visited {
              display: block;
              width: 200px;
              height: 100px;
              text-decoration: none;
              text-align: center;
              line-height: 100px;
              font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
              font-weight: bold;
              -webkit-transition: 1000ms ease;
              -moz-transition: 1000ms ease;
              -ms-transition: 1000ms ease;
              -o-transition: 1000ms ease;
              transition: 1000ms ease;
              color: #648AAE;
              background-repeat: no-repeat;
              background-image: url(../Images/gifs/Batman-still-2.gif);
              background-position: center bottom;
              text-transform: uppercase;
              letter-spacing: 0.79em;
              border-radius: 5px;
    #navigation li a:focus, #navigation li a:hover, #navigation li a:active {
              color: #000000;
              background-image: url(../Images/gifs/Batman-animation-2.gif);
              background-repeat: no-repeat;
              background-position: center bottom;
              background-color: #454545;
              border-radius: 25px;
    So, how do I put a single image on each tab (home, cast, pictures, etc). Thank you for your help in advance.

    Assign a class to the item and use CSS to apply an image as in
    <li><a href="../pages/index.html" class="home;">Home</a></li><br />
    <li><a href="../pages/cast.html">Cast</a></li><br />
    <li><a href="../pages/pictures.html">Pictures</a></li><br />
    <li><a href="../pages/soundtrack.html">Music</a></li><br />
    <li><a href="../pages/interview.html">Interviews</a></li><br />
    <li><a href="../pages/links.html">Links</a></li><br />
    and the CSS
    #navigation li a:link.home, #navigation li a:visited.home {
         background-image: url(../Images/gifs/Batman-still-2.gif);

  • How do I add an image above the navigation bar?

    I'm trying to add an image above the navigation bar and can't seem to do it without covering the links. Does anyone know how to do that?
    Thanks!

    Hi,
    select the page you want to add the image to
    open up the Inspector and go to the Page Tab (second from left)
    Choose Layout and increase the size of Header Height
    Regards,
    Cédric

  • Image Object Navigation Bar

    Hi.
    I am using DWCS3 to insert the navigation bar into my
    templates. Everything is woorking smoothly, except one little
    problem.
    My navigation bar contains rollever images are in different
    colors (e.g., red, blue, green) Home | Contact | About Us.
    When I clicked on About Us, I would like the rollerover
    button stay pressed down (green), so I know that I am visiting the
    page.
    Does anyone know what I need to tweak to get it to work like
    I mentioned above?
    thanks.
    S

    I am finding browsers like IE6 increasingly impossible to
    work with, every error that dreamweaver seems to report for browser
    compatability seems to be because of this. As far as I know there
    is no simple way around this, I will be watching this thread to see
    what others have to say though!
    I have seen when looking at HTML some site's have a <IF
    IE6> or something along them lines, can anyone shed anymore
    light?
    Thanks,
    Dave

  • Image in Navigation Bar

    Hi,
    could anyone tell me, what I have to do, to display a image in the "Navigation Bar".
    I select a image in section "Image Attributes", but it isn't displayed?
    The text in field "Icon Subtext" is displayed.
    Thanks for any help
    Norbert

    Hi Roel,
    please can you reopen that issue!
    First question:
    - I realized, that my images will not shown with the IE 7?
    Second problem I have:
    - is there a way to define a second variable besides #NAVIGATION_BAR# maybe #NAVIGATION_BAR_1# and redirect items defined in the application under the "Shared Components" --> "Navigation Bar" to that variable?
    Purpose is to have two navigation bars and show e.g. two items in the first, the next item in the second bar.
    Do you have answers for the two questions?
    Thank you
    Norbert

  • Using Insert/Images Objects/Navigation Bar - weird quirks

    DW CS4
    When I go to the above path in DW to add a navigation bar and add a few elements, the code produced seems fine (I'm talking strictyl about the sentence case of the code - all lowercase). Now if I go to Modify/Navigation Bar to add a few more elements, the additional code is now in a different case (it's in sentense case - first letter capital). For example:
    When I first insert a navigation bar, some resulting code is
    onmouseover="MM_nbGroup('over','home','','',1)"
    but when I go to modify the navigation bar, the additional code added now becomes
    onMouseOver="MM_nbGroup('over','galleries','','',1)"
    I know how to quickly find/replace to fix this, but this is just weird to me why DW would use two different sentence cases. Is that just a function of the software, or is there some setting I'm missing to make sure ALL code is in lowercase? I already have my default tag case <lowercase>
    Test it out yourself and let me know if anyone gets the same results or knows why this is happening.
    Thanks...
    I just noticed something else... on initial creation, the code includes id="", but when I modify/add to the nav bar, there is no id="" included (I have to manually add that code)... what the crap is going on??

    Unicode is the character set encoding -- not the same as DTD.
    I can't recreate your experience with DW on Windows Vista.
    Here's the code I get from DW -- same as before and after editing the menu...
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/JavaScript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_nbGroup(event, grpName) { //v6.0
      var i,img,nbArr,args=MM_nbGroup.arguments;
      if (event == "init" && args.length > 2) {
        if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
          img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
          if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
          nbArr[nbArr.length] = img;
          for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
            if (!img.MM_up) img.MM_up = img.src;
            img.src = img.MM_dn = args[i+1];
            nbArr[nbArr.length] = img;
      } else if (event == "over") {
        document.MM_nbOver = nbArr = new Array();
        for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
          if (!img.MM_up) img.MM_up = img.src;
          img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
          nbArr[nbArr.length] = img;
      } else if (event == "out" ) {
        for (i=0; i < document.MM_nbOver.length; i++) {
          img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
      } else if (event == "down") {
        nbArr = document[grpName];
        if (nbArr)
          for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
        document[grpName] = nbArr = new Array();
        for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
          if (!img.MM_up) img.MM_up = img.src;
          img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
          nbArr[nbArr.length] = img;
    //-->
    </script>
    </head>
    <body onload="MM_preloadImages('Images/Up-Arrow-64.png','Images/Up-Arrow-64-hover.png')">
    <a href="http://alt-web.com" target="_top" onclick="MM_nbGroup('down','group1','Home','Images/Up-Arrow-64.png',1)" onmouseover="MM_nbGroup('over','Home','Images/Up-Arrow-64-hover.png','',1)" onmouseout="MM_nbGroup('out')"><img src="Images/Up-Arrow-64.png" alt="Home" name="Home" width="64" height="64" border="0" id="Home" onload="" /></a>
    </body>
    </html>
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Images in Navigation Bar

    Hi I'm new to iweb I've just published my site online (still in progress) when I publish it from a local folder everything looks in order, however when i publish the site online it adds images to some of the tabs in the navigation bar. I've deleted the page several times and inserted a new home page but unfortunately this problem still crops up. I would be gratfeul if someone could help me solve this problem.
    Thx Martin

    I prefer clickable links :
    http://www.designamind.co.uk/
    Anyway, you mean this :
    I think you use the Modern Frame theme which has the links in the navbar right-aligned.
    You added tab-like images, but these do not fit the links.
    http://www.designamind.co.uk/Design_A_Mind/About_Me_files/shapeimage_1.png
    http://www.designamind.co.uk/Design_A_Mind/About_Me_files/shapeimage_2.png
    http://www.designamind.co.uk/Design_A_Mind/About_Me_files/shapeimage_3.png
    Solve it by hiding the nav bar and use textboxes with links and place them on top of the images, or use these images as background of the textboxes.

  • Add Image in the navigation bar of Help page

    Hi,
    I wanted to add image next to to the Search in the Help page navigation bar as in snapshot below:
    I wanted to add an image i.e the the logo next to above button in navigation bar. I tried adding , howevr could only add as Header, not right in the navigation pane. Correct me if I m wrong, the navigation control can be configured while generation web output. I coudnt find any other option to do this.
    Please let me your inputs on this.
    Thanks,
    Pallavi

    Hi all
    Sorry Colum, I think you are wrong. That looks exactly like a WebHelp Search dialog.
    Pallavi, I am thinking the answer for you may be a simple one. Use the WebHelp skin editor. There you should see an option to choose the image used for the Go button.
    I'm not exactly sure what version you are using. But I'll insert a screen capture of RoboHelp 7 below.
    My thought here is that you could create an image that includes your company logo along with the Go button. Then use that image for the Go button. Sure, both the company logo as well as the Go button would be clickable, but it should do the job, no?
    Cheers... Rick
    Helpful and Handy Links
    RoboHelp Wish Form/Bug Reporting Form
    Begin learning RoboHelp HTML 7 or 8 within the day - $24.95!
    Adobe Certified RoboHelp HTML Training
    SorcerStone Blog
    RoboHelp eBooks

  • Image navigation bar for ePub Children's book export?

    I'm designing children's picture books in ID for export to ePub. I've seen some such books on my nook (ePub) that have an image navigation bar that pops up at the bottom of the page. Readers can scroll through reduced images of pages quickly on this navigation bar, tap a particular image and go directly to that page. I've looked through lots of tutorials but I don't see any that show how to do this. Can you point me to a tutorial that teaches me how to make this navigation bar?
    Carolivia Herron
    [email protected]

    Exploring further, I see that there are some examples on the web of experiments with JavaScript on iBooks (don't know if they're supported on the Nook).
    Here's an example of a children's book interface from the Three Press Consulting blog:
    http://blog.threepress.org/2011/01/31/cost-effective-development-of-enhanced-content-with- epub3-digital-book-world-2011/
    Here's some commentary on another blog about experiments which extend beyond the EPUB specification:
    http://blog.booki.sh/blog/post/epub-3-0-and-scripted-content-documents/

  • How do set up image based navigation bar in DW CC?

    How do you set up images as the list members that form a navigation bar?

    Spry is gone, true, but CSS most definitely is part of DWCC...
    http://tv.adobe.com/watch/learn-dreamweaver-cc/using-the-css-designer-panel/
    You should be able to follow a css tutorial after familiarizing yourself with the CSS Designer.
    If you don't understand html and css in and of themselves, and you have a budget, you may want to get the Menu Magic DW Extension from Project VII. That would allow you to use the DW Design View interface to make a menu.
    If you have a fair understanding of the basics though, any "jquery menu" or "pure css menu" available freely on the web would do the trick. The vast majority of them come with a quick how to that includes mostly copy/paste instructions.

  • Spry navigation bar covers flash movie beneath it but not the jpg image, why?

    i have a spry navigation bar with a flash movie underneath,
    and when i hover over the navbar and the submenu pops down it
    covers the flash movie, but it doesn't cover the .jpg image that is
    next to the flash movie. how can i fix this? thanks.

    thanks for the reply Murray, a responder from the flash forum
    gave me the following answer and it worked perfect.>>
    The <object> and/or <embed> HTML elements that
    reference your Flash content accept a number of optional
    parameters. For the <object> element, these parameters are
    supplied via nested <param> elements. Simply add the
    following new <param>:
    <param name="wmode" value="opaque">
    The <embed> parameters are supplied via attributes. For
    the <embed> element, add the following new attribute:
    wmode="opaque"
    That’s it. Your Flash content is now stackable via
    z-index; for example, you may wrap your
    <object>/<embed> pair in a <div> and set the
    <div>’s z-index as you please.
    <div style="position: absolute; z-index=1;">
    <object attributes >
    <embed attributes />
    </object>
    </div>
    If you’re using Dreamweaver, just press the Parameters
    button in the Insert > Media > Flash dialog or in the
    Property inspector when selecting existing Flash content. Type
    “wmode” (without quotes) in the name/parameter column
    and “opaque” (without quotes) in the value column. That
    will handle the above HTML for you, even with the new JavaScript
    embedding available since the 8.0.2 update.

Maybe you are looking for