Place spry navigation on top of an image?

I have an image on the side of my web page that I am
building. I want to place a spry navigation bar on top of this
image but I can't figure out how to position it correctly. Can
anyone give me a hint? I'm using CS3 on a Mac.
Thanks,
Lou

Is there any way we can see your website? Fishing around in the dark is not a good way to give advice.
I should also mention that the "slicing Photoshop files" method of website building is probably not the way we build websites anymore, if I understand where you are coming from.
Generally speaking, if you have an image in the background set up in your style sheet, you should be able to put things on top of that image.
So, let's say we have a div and I'm going to call it "player." We may want to have more than one player on a page, so we'll give it a class:
CSS:
.player {
background-image: url("/path/myimage.jpg");
HTML:
<div class="player">
<audio controls>
<source src="/path/myaudio.ogg" type="audio/ogg">
<source src="/path/myaudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
Now, what I have done here is to create an HTML5 Audio player. The web page with the audio must be HTML5. And you will probably need to edit your .htaccess file to include the following:
AddType audio/ogg .oga
AddType video/ogg .ogv
AddType application/ogg .ogg
AddHandler application-ogg .ogg .ogv .oga
If you don't know how to edit an .htaccsss file, you should be able to add those MIME types in your host's Control Panel.
The way you declare an HTML5 document is to start the document with:
<!DOCTYPE HTML>
<html>
This would be before you start your <head> region.
But I must warn you, I'm offering all of this with a great deal of trepidation. I believe you're putting together a website using tables and inline code for things like backgrounds and such. Modern web design does not use tables to format web pages.
Without looking at what you're doing, there is a very big limit as to how I can advise you.
-Mark

Similar Messages

How to change Top-Level navigation design bar into an image?

Hi guru's,
is there anybody who knows how i can change the Top-Level navigation design bar into an image?
thanks in advance
greets
Kurt

Hi
Check this....
http://help.sap.com/bp_epv260/EP_JA/documentation/EP/N08_BB_ConfigGuide_EN_JP.doc
Regards

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.

Place an mp3 player on top of an image in image-based website??

Hi everyone!
I am trying to create a website for our company, and have made an image-based website in Photoshop. The whole background is composed of sliced images from a Photoshop file, and I want to add links, drop down menus, a photo slider, and an mp3 player with Dreamweaver. I am having a great deal of trouble as I don't know nearly as much about coding as I would like to!
Right now I am trying to add an mp3 player to the bottom of our website, but I want it to be on top of the bar at the bottom of the page. Since the bar is technically an image, every time I paste the code for the mp3 player into the HTML, it goes above or below the bar rather than on top of it. Is there any way to remedy this?? Advice would be appreciated! Thanks

Is there any way we can see your website? Fishing around in the dark is not a good way to give advice.
I should also mention that the "slicing Photoshop files" method of website building is probably not the way we build websites anymore, if I understand where you are coming from.
Generally speaking, if you have an image in the background set up in your style sheet, you should be able to put things on top of that image.
So, let's say we have a div and I'm going to call it "player." We may want to have more than one player on a page, so we'll give it a class:
CSS:
.player {
background-image: url("/path/myimage.jpg");
HTML:
<div class="player">
<audio controls>
<source src="/path/myaudio.ogg" type="audio/ogg">
<source src="/path/myaudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
Now, what I have done here is to create an HTML5 Audio player. The web page with the audio must be HTML5. And you will probably need to edit your .htaccess file to include the following:
AddType audio/ogg .oga
AddType video/ogg .ogv
AddType application/ogg .ogg
AddHandler application-ogg .ogg .ogv .oga
If you don't know how to edit an .htaccsss file, you should be able to add those MIME types in your host's Control Panel.
The way you declare an HTML5 document is to start the document with:
<!DOCTYPE HTML>
<html>
This would be before you start your <head> region.
But I must warn you, I'm offering all of this with a great deal of trepidation. I believe you're putting together a website using tables and inline code for things like backgrounds and such. Modern web design does not use tables to format web pages.
Without looking at what you're doing, there is a very big limit as to how I can advise you.
-Mark

How do I get rid of the white space between my header and my spry navigation bar?

I have been grappling with a problem for the past 2 days and cannot seem to work my way around it. I have been working on a page in dreamweaver cs4 that seems to have whitespace between the header and my spry menu bar ONLY in Firefox. Google Chrome and Safari show it correctly. Could you steer me in the right direction for getting rid of that space. Here is the page: http://www.margaritascafe.com/margaritas_layout.html
Here is my code and thanks in advance for your help:
<!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=UTF-8" />
<title>Untitled Document</title>
<link href="margaritastyles.css" rel="stylesheet" type="text/css" />
<script src="Margaritas_temp_spry/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="Margaritas_temp_spry/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="250" id="FlashID" tabindex="10" title="Margarita's Cafe header 2">
      <param name="movie" value="flash_movies/Margaritas Header 3.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="9.0.45.0" />
      
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      
      <object type="application/x-shockwave-flash" data="flash_movies/Margaritas Header 3.swf" width="1000" height="250">
        
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="9.0.45.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        
      </object>
      
    </object>
</div>
<div id="navigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Home</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Menus</a>
        <ul>
          <li><a href="#">Lunch</a></li>
          <li><a href="#">Dinner</a></li>
          <li><a href="#">Cocktail</a></li>
          <li><a href="#">Take Out</a></li>
        </ul>
      </li>
      <li><a href="#">Photos</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Catering</a>
        <ul>
          <li><a href="#">Private Parties</a></li>
        </ul>
      </li>
      <li><a href="#">Reservations</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Reviews</a></li>
      <li><a href="#">Directions</a></li>
    </ul>
</div>
<div id="maincontentlayout3">Content for id "maincontentlayout3" Goes Here</div>
<div id="specials"><img src="png-gif-jpg/Tuesday Night Banner.jpg" width="200" height="70" alt="Margarita's Tuesday Night Special" /><img src="png-gif-jpg/Wednesday Banner.jpg" width="200" height="70" alt="Wednesday 2 for 1 dinner special at Margarita's" /><img src="png-gif-jpg/Thursday Banner.jpg" width="200" height="70" alt="Ladie's Night Thursdays at Margarita's Cafe" /><img src="png-gif-jpg/Friday Banner.jpg" width="200" height="70" alt="TGIF Happy Hour on Friday's at Margarita's Cafe" /><img src="png-gif-jpg/Sunday Banner.jpg" width="200" height="70" alt="Sunday Kids Eat Free at Margarita's Cafe!" /></div>
<div id="footer"><img src="png-gif-jpg/Margaritas Facebook logo.png" alt="Facebook" width="40" height="25" align="absmiddle" /> <img src="png-gif-jpg/Margaritas Twitter logo.png" alt="Twitter Logo" width="40" height="25" align="absmiddle" /><img src="png-gif-jpg/merchantcircle_mini.png" alt="Merchant Circle Logo" width="63" height="25" align="absmiddle" /></div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

CSS:
#navigation {margin-top: -3px;}
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Spry Navigation does not work in IE version 6

I have a simple spry navigation bar at the top of website that works in all the browsers I tested it in, ie IE ver 7 and 8, Mozilla Firefox (all versions), Netscape (all versions), and Safari. The only one I can't it to work in is IE version 6. Does anyone know how to fix this?
I am attaching a copy of both browsers, one that does not work and one that does.
Thanks for your help.
Pat

I have the same problem. Looks great in FF, Safari, Opera,
but in IE the dropdowns are dancing all over the place. Suspect
it's something in the hover classification, but can't figure out
where the problem is:
http://www.kirkaubry.com

How do I get rid of the thin line that goes across the top Persona background image.

There is a 1-pixel wide light grey line across the top Persona background image between the navigation toolbar and the bookmarks toolbar from left to right. Nomatter whatever persona I have installed, it is there. Same thing also when i hover on any other Persona at Getpersonas.com. It is not there when using any other program and not when only showing the desktop. Only when using FF4. My PC is a HP Pavilion dv6000 laptop using Windows Vista. This is not a monitor issue nor a graphic card issue since it only shows in FF.

for me, it happens on a maximized window. when i do restore to window, the line disappears.

How can I add callouts on top of anchored images in CS6?

I am using InDesign CS6 on a MacBook. I have multiple anchored images in a long document. Some of the images require callouts, such as labels or arrows, which should display on top of the image and should always stay with the image as if these items were also anchored. Is there a way to layer images in InDesign so that they are all anchored?
I tried grouping the callout objects with the anchored object, but you cannot select an anchored object and other objects at the same time. I know in Word you can create an image canvas and add multiple items to that, and they are all grouped together. Is there a way to do that in InDesign? Or would I have to anchor each callout along with its corresponding image?

Peter, your advice was very helpful. However, the text boxes (callout labels) that are included in the grouped objects get distorted once the grouped objects are anchored. Each text box shows the red +. When I expand the text box to fit content, the text box expands vertically so that all of the text is below the originally anchored object.
The other callouts (just lines) stay in place perfectly. Any insight into why the text boxes don't behave the same way that the lines do?

Adding slide in caption on top of main image in gallery

ok, now the same caption question from another angle...how
would you get the caption to display on top of the main photo...and
once that is accomplished, I want to add a slide effect *smile*
I found a page that I want to recreate with spry...but its
gonna be hard...I have the basics started, but cannot figure out
how to put the text on TOP of the image
http://www.nmdhsem.org/default.asp?CustComKey=270308&CategoryKey=274276&pn=Page&DomName=nm dhsem.org
oh I am using the photo gallery demo, but hiding the select
and gallery name so that just 3 images cycle on opening the page
Edited: 08/28/2007 at 03:06:40 PM by karonz

ok, so far I have this...I got the images to fade, but still
would like to have a caption that fades in and out as well...
any suggestions
http://www.nmprc.state.nm.us/Copyindex.htm
oh...and lol...I still have to get some images from NM
instead of china *g*

Exporting Text out of Fireworks on top of BG image

In Fireworks I have a black background with text content on top of it. I would like to export both so that the bg comes into dreamweaver as a background image and the text comes in as editable text. Right now when I slice the bg it automatically includes the text in the image. How do I export text that is on top of an image?

I forgot earlier to say that you must finally export as CSS and Images.
I'll try to give some simple advice while trying to export css from Fireworks CS4.
You can apply the blue background, by simply adding it from the CSS and Images export options. You should not draw it in your document(, it doesn't matter at all).
Draw Rectangles all over your document to finally export them as div tags.
When you need to apply a background, think of what exactly you want your background to be, solid color, or a picture?
If it's going to be a picture, you must place that picture and insert a slice to it, set as background.
If you want color, you don't put a slice. You just ...draw a rectangle. Write some text over the rectangle, and you can export it as CSS.
A slice is used to export images. Otherwise, you just draw rectangles to export the current color as a value in your exported CSS.
The black background color of your document, can be set as a color value inside your exported css, so you don't have to place a slice for that.
Watch not to overlap objects like images, rectangles and slices. It is going to be hard to achieve an excellent result in order to construct your web site with Fireworks while trying to export CSS.
Jim has already said it Fireworks won't help you that much with coding like hand coding or Dreamweaver will.

How can I draw on top of an image?

I'm using a JApplet with three JPanel's inside of it.
Inside one of those JPanel's I would like to place an image and a button. When the button is clicked, I want to draw an oval on top of the image . Each subsequent time the button is clicked, the oval will move to a different location.
So here are my questions:
1) What should I use to draw the image? (a JLabel with an ImageIcon on it?)
2) Could I simply use g.drawOval() in paintComponent() to directly draw on top of the image/JLabel?
Any help will be greatly appriciated.

Here's a sample to study;-import java.awt.*;
import java.awt.event.*;
public class DrawOnImage extends java.applet.Applet{
int xPos, yPos;
Image img;
public void init() {
    add(new Label("Hello World") );
    Button press = new Button("press");
    add(press);
    press.addActionListener(new ActionListener(){
      public void actionPerformed(ActionEvent e){
        xPos = (int)(Math.random()*270);
        yPos = (int)(Math.random()*170)+30;
        repaint();
    img = getImage(getDocumentBase(), "anImage.JPG");
public void paint(Graphics g){
    g.drawImage(img,0,30,this);
    if(yPos>=30)g.fillOval(xPos, yPos, 45, 45);
}

How can I place photo icons on top of folders?

I put 4 folders in my dock. I need to ID them with photo - icons.
1) How can I place photo icons on top of 3 folders, so that they also retain
their folder shape?
2) And, to make one of them look like a folder that has text?
Intel Mac - Dual - Tiger 10.4.9
Thank you.

It sounds like what you actually need to do is amend the icon itself - something like Iconographer will help you with that. Open the icon of any standard folder, copy in your photo image, amend the result to your satisfaction, and save it as a new icon. Then apply that icon to your folder.
Matt

Spry Navigation - CSS Question

I recently added spry navigation to my website (http://www.faithbuilders.com) and tweaked the default CSS to match the website a little better. Everything works well enough, but I've got a few things left to straighten out.
First, there is a gap between the right side of the dropdown menu and the left side of the sub-category menu that pops out to the right. See image below.
Is there any specific part in the CSS that affects this gap?
Second, since the submenu pops out to the right, it is hidden when the browser size is small enough to cover it. Is there a simple way to enable it to pop out to the left OR right, depending on where there is space for it?
Your help is greatly appreciated.
~Sarah

I'm Giving It All wrote:
I recently added spry navigation to my website (http://www.faithbuilders.com) and tweaked the default CSS to match the website a little better. Everything works well enough, but I've got a few things left to straighten out.
First, there is a gap between the right side of the dropdown menu and the left side of the sub-category menu that pops out to the right. See image below.
Is there any specific part in the CSS that affects this gap?
Yes amend 95% to 200px in the css rule below: (as shown)
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 200px;
I'm Giving It All wrote:
Second, since the submenu pops out to the right, it is hidden when the browser size is small enough to cover it. Is there a simple way to enable it to pop out to the left OR right, depending on where there is space for it?
Your help is greatly appreciated.
~Sarah
Not that I know of.

Control on top of a image

hello all,
how can i place a control, for example a combo box on top of an image.
i can load the image using an icon and the image properties for the icon.
now i want to place a combo box on a specific part of the image. how can i do this using the matisse GUI builder in netbeans.
thanks,
minesh

Search the forum using "background image" for ideas on how to paint an image on a component.

Putting a form search box on top of a image

Is it possible to put a search box on top of an image. When I enter the code now, all I see is the image, not the search box.

You could place an image in the background of whatever container has the search box...
<div style="background-image:yourimage.jpg">your search box code</div>
I used a quick inline style, but you could put it in your external css or <head> however you have it set.
Or are you talking about something else?
Could you post a link to what you have and give a little more info about what you are trying to do?

Place spry navigation on top of an image?

Similar Messages

Maybe you are looking for