Help with dynamic menu

[ecashwell]

I'm creating a dynamic dropdown menu for my website. All information will be stored in a database. None of the images will have names on them. Ex: Home, Software, Support, ... These names will be found in a database along with their sub-menus, the drop downs. I have the whole thing created, statically, right now. Once I'm done with the static version I'm going to cut it all up and turn it into ASP.NET classes and such so that all data populated on each page will be generated dynamically from a database.

*** See attached screen shot

Wow... Now to my question which is probably very simple but I'm pretty green when it comes to HTML, Java Script, and CSS. My menus are extremely small gifs and I want to place a layer on top the image with the name of that button. Ex: Home, Software, Support, Contact Us, ... What is the easiest way to accomplish this and if I could get a simple example I would greatly appreciate it.

As always, thanks in advance.
- Eric

[DaveSW]

for your second query it sounds like you might be better off using a css background for the image. I've used a span for the example below, but it applies whether you use divs, a list, tables, etc.

<span style="background: url(background.gif) left no-repeat;"><a href="#">link text</a></span>

[ecashwell]

Thanks...

I would place this span tag inplace of the img tag correct?

Is there a good source on the web which explains all the in's and out's of CSS, SPAN,and DIV tags? - Like I said I'm pretty green.

- Eric

[ecashwell]

Could you hold my hand for just a second? I cut and pasted your code snippet and replaced my image tag with your span tag. See attachment for new screen shot. The image no longer displays. Could you please assist?

Original Code:

<TD colSpan="2"><A onmouseover="MenuOver(this,'home')" onmouseout="MenuOut(this,'home')" href="http://www.derivetech.us/"><IMG src="images/btn_default.gif" border="0" name="home_Img"></A>

Newly Edited Code:

<TD colSpan="2"><A onmouseover="MenuOver(this,'home')" onmouseout="MenuOut(this,'home')" href="http://www.derivetech.us/"><span style="background: url("images/btn_default.gif") name="home_Img" left no-repeat;"><a href="#">Home</a></span></A>

Again, thanks in advance
- Eric

[DaveSW]

<span style="background: url("images/btn_default.gif") left no-repeat;" name="home_Img">

The name thing shouldn't be in your style declaration.

Also do you need this name thing? I assume it's related to a javascript funtion?

[DaveSW]

can you describe the rollover effect you want to create?
check out my menu things: www.webdevfaqs.com/css.php and scroll down to the menu examples.

I'm currently writing a simple tutorial set on css/divs/basic web design with css, but it's not finished yet. I can show you what's there and write the rest quickly if you like? ;)

[ecashwell]

I pass objects to move my images around. I send the name of the object to my JS function and then, simply put, I set the scr = new image path. It works very smooth and uses very little java script code. I would think that the SPAN would work as long as I can name the SPAN object.

The rollover effect:
Static label which is the name of the button: Home, Software, Products, Contact Us, ...
Under this label I would like to have an image which has a rollover event and click event.
The rollover event replaces the image with a new image and the click event would take you to the desired page.

Hope this helps.
- Eric

[DaveSW]

in that case what I would suggest is using css menu hovers.

if we assume your menu code is all within a div classed as menu.

In the head section of your document:
<style type="text/css">
<!--
.menu a {
background: #ffffff url(background_norm.jpg) left no-repeat;
}
.menu a:hover {
background: #ffffff url(background_hover.jpg) left no-repeat;
}
.menu a:active {
background: #ffffff url(background_active.jpg) left no-repeat;
}
-->
</style>

you might also want to use display: block and set widths and heights on all of those:
.menu a {
background: #ffffff url(background_norm.jpg) left no-repeat;
display: block;
height: 20px;
width: 150px;
}

Does that help at all? You can also set names on the a tags.

[ecashwell]

Wow... I did not know you could do that with CSS. How would I make the call from the body to the STYLE section?

Are the CSS tags platform independent? A few years ago I produced a website for a client and all of the menus were coded using layers in JavaScript. I had a very painful experience with the cross platform issue.

- Eric

[DaveSW]

css does not need to be called. Because that's in the head of the document, any hyperlink ('a' tag) found within an element with a class of class1, will have these properties.

The complexity of the stuff you do inside the a tags will affect the cross browser capabilities. Netscape 4 supports basic color changes, but I'm not sure about images. IE5 upwards supports all of the stuff above, as does netscape 5 (I believe).

Stuff like this menu http://www.webdevfaqs.com/cssmenus/ppc/ work fairly well in IE5+.

[ecashwell]

Why is the tag coded as follows:

background: #ffffff url(background_norm.jpg) left no-repeat;

Instead of this:

background: #ffffff; url("background_norm.jpg"); left no-repeat;

[DaveSW]

looks like a typo actually. the ";" tells the computer it's the end of the line, so in that case anything after the basic color would be ignored.

[ecashwell]

What about when I pass the image path string, do I need quotes around it?

[DaveSW]

you can use them if you want to, but you don't need them. However if you're using inline styles (i.e. <span style="..."> then you shouldn't use a double quote around the filename or the computer may get confused and think it's reached the end of the style tag.

[ecashwell]

Awesome, thank you very much for the help.

I'm going to sit down and play for a bit and see how all of this stuff works.

I'll get back with you if I gum it all up.

- Eric

[DaveSW]

sure thing ;)

[ecashwell]

All gummed up....

This is not working. Can you see why?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>menu..</title>
		<STYLE type="text/css">
			.menu a {
				background: #ffffff url(images/btn_default.gif) left no-repeat;
				DISPLAY: block; 
			}
			.menu a:hover {
				background: #ffffff url(images/btn_hot.gif) left no-repeat;
				DISPLAY: block; 
			}
			.menu a:active {
				background: #ffffff url(images/btn_default.gif) left no-repeat;
				DISPLAY: block; 
			}
		</STYLE>
	</head>
	<body>
		<a>Home</a>
	</body>
</html>

[DaveSW]

yes

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>menu..</title>
		<STYLE type="text/css">
			.menu a {
				background: #ffffff url(images/btn_default.gif) left no-repeat;
				DISPLAY: block; 
			}
			.menu a:hover {
				background: #ffffff url(images/btn_hot.gif) left no-repeat;
				DISPLAY: block; 
			}
			.menu a:active {
				background: #ffffff url(images/btn_default.gif) left no-repeat;
				DISPLAY: block; 
			}
		</STYLE>
	</head>
	<body>
		<div class="menu"><a>Home</a></div>
	</body>
</html>

Note the div around the a.

Also

.menu a {
}

this means it only applys to "a" elements within an element with a class of menu. Otherwise every single link on the page would have the images in the background...

Does that help?

[ecashwell]

I see...

... Humm, I'm not getting the rollover action.

Any thoughts?

[DaveSW]

zip your folder and send it to me.

my first thoughts include:
dimensions on the hyperlinks.
image paths?

[DaveSW]

also change <a>home</a>
to
<a href="#">home</a>

[ecashwell]

Thanks for your time...

Here you go.

[ecashwell]

<div class="menu"><a href="#">Home</a></div>

This fixed it up. Now, can I say that I want the text to be moved to the right by 10 px and remove the underline, or do I need to use JS for that?

- Eric

[DaveSW]

ok it works if you put the href in as I posted while you were preparing your zip.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>menu..</title>
		<STYLE type="text/css">
			.menu a {
				background: #ffffff url(images/btn_default.gif) left no-repeat;
				DISPLAY: block; 
			}
			.menu a:hover {
				background: #ffffff url(images/btn_hot.gif) left no-repeat;
				DISPLAY: block; 
			}
			.menu a:active {
				background: #ffffff url(images/btn_current.gif) left no-repeat;
				DISPLAY: block; 
			}
		</STYLE>
	</head>
	<body MS_POSITIONING="GridLayout">
		<div class="menu"><a href="#">Home</a></div>
	</body>
</html>

[DaveSW]

we really will have to stop posting at the same time... lol.

Move text right ten px? to center it or as a block?

.menu a {
text-align: center;
width:150px;
}
for the one, or:
.menu {
position: relative;
right: 10px;
}

for number 2:

text-decoration: none; should help you along.

I'm just off for a run, so see if you can work out what to do with it before I get back...

Cheers
Dave

[ecashwell]

DaveSW: Help please....

I'm not sure where the issue is, it could be the HTML tags, JavaScript, or CSS, but it needs some tweaking. I've been away from web programming for some years now so I could have something backwards. I have enclosed all needed files and screens shots. Everything works great in IE, however Mozilla and Netscape are another story. The rollover effect is 1 px off on the top and left and the dropdown menu is displaying at the top of the page. Any thoughts would be appreciated.

Thanks in advance...

- Eric

[DaveSW]

I'll take a look after dinner (that's in about 10 mins...)
Can you direct me to the original menu code, or is it a complete DIY job?

[ecashwell]

:confused: DIY... ?

The original is at: http://www.derivetech.us/HTMLPage1.htm

- Thanks ;)

[DaveSW]

What I meant was, did you make the menu yourself or use one of the menus freely available and adapt it? if you adapted one, which one? Sometimes the code gets messed up by the time you've finished adapting - it does in my case anyway.

[ecashwell]

Nope it's all new...

I was going to use a menu which I created some years ago, but with CSS I can remove all of images - Now how cool is that!!! So as far as what you see that was created yesterday afternoon. :cool:

- Eric