PDA

View Full Version : A Newbie needs your help.



deputy963
07-25-2006, 11:13 AM
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
07-25-2006, 12:21 PM
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
07-25-2006, 12:36 PM
Here is an example of the 4 buttons I'm using for each.
http://www.davescomputertips.com/images/buttons/contact-up.gif
http://www.davescomputertips.com/images/buttons/contact-mouseover.gif
http://www.davescomputertips.com/images/buttons/contact-click.gif
http://www.davescomputertips.com/images/buttons/contact-there.gif
#1 - static state
#2 - Mouseover
#3 - click
#4 - "You're Here"

Twey
07-25-2006, 02:39 PM
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
07-25-2006, 11:49 PM
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
07-26-2006, 12:29 AM
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
07-26-2006, 02:02 AM
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
07-26-2006, 05:14 AM
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
07-26-2006, 07:39 AM
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
07-26-2006, 07:58 AM
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)

Twey
07-26-2006, 08:01 AM
Just put the links in the table cells:
<a href="home.html" class="button">Home</a>
Java? What're you using Java for? That'll take ages to load each button. Stick with Javascript or CSS.

I did all my night-owling last night... it's morning here in good ol' Britain now. :p

deputy963
07-26-2006, 09:06 AM
Thanks again!

Take a look at the last post on page 1 please :)

Do I need to include the height and width on button-here also?

I just trying to figure this all out.

So what does the code you entered on page 1 do exactly? Does it define something? e.g. button, button-here

Twey
07-26-2006, 09:13 AM
No, no, so long as you've got my earlier code in its little style block in the head, you don't need to include anything else here.
So what does the code you entered on page 1 do exactly? Does it define something? e.g. button, button-hereIt defines two classes, button and button-here. button is for a normal button, and button-here is a class exclusively for the button pointing to the current page.

You're right about the URLs. :)

deputy963
07-26-2006, 09:40 AM
You're right about the URLs. :)

WOW, I learned something. Us yanks aren't all that bad :)

I created a table and inserted the code. The Home tag is blue (not good on a blue button) and it's only showing the top half of the button. It's basically only as tall as Home. <fixed>

DW has a css edit tool. I fixed the text color, but the amount of the button that shows is based on the size of the text for some reason?<fixed>

OK I fixed the button issue by changing 100% to the pixel size of the button.

<new>How do I add a 1 or 2 character space in front of HOME to move it into the button? How do I center it (vertically) on the button? (it's near the top now)

Can I add alt text to these without screwing it up?

This stuff is pretty cool!

deputy963
07-26-2006, 01:27 PM
I've worked everything out but the text position.

The text appears at the top of the button instead of the middle. I've tried everything I can think of, any ideas?

IE7 doesn't display the last button correctly, but I'll chaulk that up to Micro$oft :)

This is really cool!

Twey
07-26-2006, 09:52 PM
Try text-align: center; vertical-align: middle; :)
IE7 doesn't display the last button correctly, but I'll chaulk that up to Micro$oft :)I wouldn't worry about IE7 yet. When it's officially stable, start worrying. :)

deputy963
07-27-2006, 02:49 AM
Here is what I have in the head
a.button-here {
display: block;
width: 150px;
height: 30px;
background-image: url(http://www.site.com/images/buttons/button-here.gif);
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
font-weight: bold;
text-indent: 10px;
vertical-align: middle;

Here is what I get in firefox and IE
http://www.davescomputertips.com/clipboard-1.jpg

alexjewell
07-27-2006, 02:58 AM
Ok, make that:



a.button-here {
display: block;
width: 150px;
height: 30px;
background-image: url(http://www.site.com/images/buttons/button-here.gif);
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
font-weight: bold;
text-indent: 10px;
vertical-align: middle;}


The red is the change.
You forgot the "}"

At any rate, I have, personally, had trouble with vertical-align...
it doesn't always work
sometimes it does
sometimes it doesn't
haha

Anyway, try that.

deputy963
07-27-2006, 04:36 AM
Ok, make that:



a.button-here {
display: block;
width: 150px;
height: 30px;
background-image: url(http://www.site.com/images/buttons/button-here.gif);
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
font-weight: bold;
text-indent: 10px;
vertical-align: middle;}



It's in there, it's in the next line by itself. I forgot to copy it. There has got to be a way to align the text vertically (that works :) ).