A Newbie needs your help.

[deputy963]

Hi all,

I very computer literate, but html/css is not my bag. I'm trying to design my first website. I've used javascript to make a 9 button multistate navigation menu. This means I have to preload 36 button images (do we begin to see the problem?).

I've ran across some mention of css button rollovers, which interests me very much. The problem is I have NO idea about css!

Currently each button have a static, mouseover, click, and "your here" state. It's a vertical menu on the left side of the page.

Does anyone know how to do this with css? Would anyone be willing to give me a little help?

Thanks in advance from a web design noob!

[Twey]

You still have to use images.
The best method of doing this is to have simple button images with no text on, then use HTML to layer your text over the top.

[deputy963]

Here is an example of the 4 buttons I'm using for each.




#1 - static state
#2 - Mouseover
#3 - click
#4 - "You're Here"

[Twey]

As I said, remove the text from them, set the button image as the background for an element, and have the text in that element.

[deputy963]

Twey,

I really appreciate your response. It let's me know that it IS possible. The problem is I don't know css, but I need css!

I understand the "use a blank image and use a text link on top of it" part, and that sounds like a great solution. Very search engine friendly :O

I guess what I need is someone to write it in css. Explain to me how and why it works, and how to integrate it into a page.

I like the capabilities of css I just don't have time to learn it in 24hrs. What I would like to do is implement this on my site, then set back and start learning.

Sometimes I do best when I have a useful real world example. I can then start reading about the subject and look at the example. That's when those "ah ha" moments come. "So that's what that does". I love those moments lol.

Anyone game in helping an old computer guy enter the wide world of css?

[Twey]

CSS is no great mystery

But to get on with the current task of implementing this:

a.button {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(button_normal.jpg);
}

a.button:hover {
  background-image: url(button_moused.jpg);
}

a.button:active {
  background-image: url(button_clicked.jpg);
}

a.button-here {
  background-image: url(button_here.jpg);
}

Then, all you have to do is put standard links with a class of "button" (or "button-here" for the current page's button) inside some sort of container of the appropriate size.

[deputy963]

Does this code go in the Head?

What type of container? A layer?

Like I said, "I'm a noob!", and an old guy That's why I need some direction.

[deputy963]

OK,

I've created 4 new buttons w/o the text. Can I just do this with javascript? If I do will the whole button be clickable? If I do it with css will the whole button be clickable?

I'm using Dreamweaver (also for the 1st time).

Which would you do?

Again, Thank You for your help!

[Twey]

Sorry, that goes in a <style type="text/css"></style> block in the head, yes. As for the container... divs would be best, but if you're not familiar with CSS, you can use a table for now (strictly on a temporary basis, of course). Layers have been deprecated for a long time (Netscape 4, I think).
The whole button will be clickable no matter which you use -- that's what the width: 100%; height: 100% bit is all about.

I've no experience with DreamWeaver whatsoever, and I don't intend to acquire any.

[deputy963]

Hey, another night owl!

OK, I've screwed around with using java in table cells and only loading the 4 blanks buttons, with layered text over it. I won't know if it works until I get home (internet connection).

I've also got a second test page going and I'll try the css. How do I implement it in the table cells?

I'm assuming the url(button_here.jpg); refers to the button location.
example:
a.button-here {
background-image: url(http://www.site.com/images/button-here.gif);

Deputy963
(soon to be a css guru, with a lot of help)