Horizontal Navigation using pre-made graphic buttons : HELP !

wbmkk · 02-19-2010, 02:13 PM

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 · 03-27-2010, 09:29 AM

set up the html like this:

Code:

<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:

Code:

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 · 04-03-2010, 11:20 PM

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 · 04-08-2010, 08:37 PM

Sorry for the delay, thanks for your replies.

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

02-19-2010, 02:13 PM	#1
wbmkk Bronze Member Join Date: Oct 2009 Location: Whitley Bay, UK Posts: 43	Horizontal Navigation using pre-made graphic buttons : HELP ! 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>

03-27-2010, 09:29 AM	#2
craftygeek Bronze Member Join Date: Mar 2010 Location: Norfolk, UK Posts: 78	set up the html like this: Code: <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: Code: 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. __________________ Website Design in Norfolk Twitter

04-03-2010, 11:20 PM	#3
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,050	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 __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

04-08-2010, 08:37 PM	#4
wbmkk Bronze Member Join Date: Oct 2009 Location: Whitley Bay, UK Posts: 43	Sorry for the delay, thanks for your replies. Just, posted an new question on the furum ... can you assist please ?