Horizontal Navigation using pre-made graphic buttons : HELP !

[wbmkk]

Hi

Can somebody please help me. I did a horizontal menu at ‘evening class’ where I am trying to learn about Dreamweaver, which was pretty easy.

I am doing some practice now, but unfortunately, at home, all I have is Notepad++ and Paint.net

I have made buttons:-

A_up.png, A_down.png B_up.png …. F_down.png

for 2 states of 6 buttons in total, saved in a folder “buttons”

I have made out my list but am having difficulty with the next bit

I know I could easily use CSS only to set different colours for everything, but this is my first time, at home trying to use pre-made graphics for my links. Previously I have only used simple text and CSS.

Can anybody please advise

Do I need a separate div for the A_menu button, followed by the B_menu button etc

Many many thanks !


<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>

 

[craftygeek]

set up the html like this:

<ul>
    <li id="a">A</li>
    <li id="b">B</li>
    <li id="c">C</li>
    <li id="d">D</li>
    <li id="e">E</li>
    <li id="f">F</li>
</ul>

Then have CSS something like:

li#a {
    background: url(images/A_up.png);
}

li#a:hover {
    background: url(images/A_down.png);
}

You'll need to do this for each of the <li> id's

There are other things you can do to improve this, but this is a start & will work fine for now.

I'd suggest that you use w3schools/ as a reference as it is easy to follow & very quick to fin the information that you're looking for.

 

[PixelPusher]

also sprite the images for the buttons (this way you have one image, not 10+)

shoot me a pm if you dont know to do this

 

[wbmkk]

Sorry for the delay, thanks for your replies.

Just, posted an new question on the furum ... can you assist please ?