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.htmlInstead 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. -
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 -
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.
SI 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 -
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
NorbertHi 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 -
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 MartinI 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,
PallaviHi 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
-
Hi guys, all was working fine until yesterday when i updated flash to the newest version, im sad because i can't open any video on youtube, i tried with safari, firefox and chrome, no one seems to work fine. Please if you can help me i will be very h
-
Adobe Photoshop Lightroom 5 cannot be opened because of a problem.
I just upgraded to Lightroom 5.7.1 and get the message in the title. I am running OS X 10.10.1. None of the following helped. Deleting and restalling the application. Deleting the preference file $HOME/Library/Preferences/com.adobe.Lightroom5.plist R
-
When does the iPhone 5 release in INDIA
Can anyone give me confirm date
-
Arch-XFCE: power management keeps kicking in
Hi, I use a fully updated Arch/XFCE, among others, to watch movies (on a large external TV connected via HDMI) using VLC. I use the following startup script to disable pam, among others: #!/bin/bash xset -dpms; xset s off xrandr --newmode "1920x1080_
-
Burn a Sony DVD+RW disc.
I am running Windows 8.1 and I am unable to burn a DVD+RW disc with Premier Elements 12.