PDA

View Full Version : Back to Javascript



bandmaster
09-03-2004, 10:34 PM
The Escouts Awards Team recomended that I remove javascript from my site.

I have just changed the menu again, but it's a bit boring - no movement at all now.

Is there any easy way for me to create a roll-over effect on what I have now?

Maybe some kind person who is more experienced than me might send me some code to use?

Bloory
09-03-2004, 11:38 PM
Al,

Look at the Frontpage menu component - my leptop hasn't got Frontpage on it, so I can't be more specific, but I'll look for you asap.

Martyn
10-03-2004, 10:42 PM
Al,

How about a css menu

http://www.zen25649.zen.co.uk/band.htm

! be care about Jonathan and his leptop

Martyn

bandmaster
11-03-2004, 03:37 PM
Very Nice!

Martyn
11-03-2004, 07:12 PM
It's all css not script

Martyn

bandmaster
12-03-2004, 08:28 PM
Do I need to change something in the CSS menu?

http://www.lincolnband.net/css_menu/menu1.HTM

When I navigate to a page then use my back button, the menu button I used has vanished, and I just see plain text. The text has right justified (it was centred before I cliked the button). What might be causing this? How can I fix it?

Also - how do I change (a) font colours (b) button colours?

Daniel
12-03-2004, 09:58 PM
javascript - well i was looking at bbci and there site is mostly javascript -

does that mean some people wont be able to see it? - if so why are they using it??

Martyn
12-03-2004, 10:52 PM
oops missed a bit

It's in 3 sections the link , a visited, link and the hover

[code:1]<STYLE>A.menulink:link {
BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; DISPLAY: block; FONT-SIZE: 14px; BORDER-LEFT: 2px outset; WIDTH: 98%; COLOR: #0000ff; BORDER-BOTTOM: 2px outset; FONT-FAMILY: Arial; HEIGHT: 98%; BACKGROUND-COLOR: #c0c0c0; TEXT-ALIGN: center; TEXT-DECORATION: none
}

A.menulink:visited {
BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; DISPLAY: block; FONT-SIZE: 14px; BORDER-LEFT: 2px outset; WIDTH: 98%; COLOR: #0000ff; BORDER-BOTTOM: 2px outset; FONT-FAMILY: Arial; HEIGHT: 98%; BACKGROUND-COLOR: #c0c0c0; TEXT-ALIGN: center; TEXT-DECORATION: none
}

A.menulink:hover {
BORDER-RIGHT: 2px inset; BORDER-TOP: 2px inset; FONT-SIZE: 14px; BORDER-LEFT: 2px inset; WIDTH: 98%; BORDER-BOTTOM: 2px inset; FONT-FAMILY: Arial; HEIGHT: 98%
}
</STYLE>[/code:1]

bandmaster
13-03-2004, 02:04 AM
Thanks Martyn, that's better.
I managed to work out how to change most of the colours. How do you change the border colour?

I've nearly finished adding this css menu to my site.

Martyn - I'm happy to include a credit, as you created this for me.

Many thanks.

Martyn
13-03-2004, 08:15 AM
Just add

border-color: #0000ff

at the begining of each css block

Martyn

Jason
13-03-2004, 11:10 AM
Maybe add:

[code:1]vertical-align: middle;[/code:1]

to make the text be in the middle of the cell

bandmaster
13-03-2004, 03:47 PM
Thanks Martyn.

Jason - When I look (using IE 6) the text is in the middle. Does it look different in other browsers?

Jason
14-03-2004, 12:14 PM
Its more towards the top then bottom. It's not really a problem but you may as well put the vertical-align: middle; in anyway to make it appear in the middle in most browsers

bandmaster
14-03-2004, 12:40 PM
Jason,
Like this? Can you have a look - I can't see any difference.

<STYLE>A.menulink:link {
VERTICAL-ALIGN: middle; BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; DISPLAY: block; FONT-SIZE: 14px; BORDER-LEFT: 2px outset; WIDTH: 98%; COLOR: #ffffff; BORDER-BOTTOM: 2px outset; FONT-FAMILY: Arial; HEIGHT: 98%; BACKGROUND-COLOR: #cc0000; TEXT-ALIGN: center; TEXT-DECORATION: none
}

A.menulink:visited {
VERTICAL-ALIGN: middle; BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; DISPLAY: block; FONT-SIZE: 14px; BORDER-LEFT: 2px outset; WIDTH: 98%; COLOR: #ffffff; BORDER-BOTTOM: 2px outset; FONT-FAMILY: Arial; HEIGHT: 98%; BACKGROUND-COLOR: #cc0000; TEXT-ALIGN: center; TEXT-DECORATION: none
}

A.menulink:hover {
VERTICAL-ALIGN: middle; BORDER-RIGHT: 2px inset; BORDER-TOP: 2px inset; FONT-SIZE: 14px; BORDER-LEFT: 2px inset; WIDTH: 98%; COLOR: #ffff00; BORDER-BOTTOM: 2px inset; FONT-FAMILY: Arial; HEIGHT: 98%
}
</STYLE>

Jason
14-03-2004, 01:23 PM
Yes, that is right. upload it and see.

bandmaster
14-03-2004, 08:48 PM
Jason,
I have added "VERTICAL-ALIGN: middle:" but it looks no diffeent to me. Does it appear different to you?

Jason
15-03-2004, 07:22 AM
Nope, doesnt look any different. Just the text was slightly more to the top , but nevermind.

bandmaster
15-03-2004, 07:41 PM
Anyone know what happened? How can I achieve vertical centering of the text in each button in the CSS Menu on my site?
See http://www.lincolnband.net/

Martyn
15-03-2004, 10:25 PM
Because of the different ways browsers work you will never get it perfect accross all browsers.

But I'd guess your target is IE 5 and IE 6

To get close add

padding-top:1px;

to the front of each css block just before vertical-align

and

In the table make all the cells

Height=21

This looks good in IE and Opera
and nearly correct in Mozillia, Firebird, netscape 6

Martyn

bandmaster
19-03-2004, 07:25 PM
Done it!
How does it look now?

Martyn
22-03-2004, 10:06 PM
It looks good in

IE 6 , IE 5.5 , IE 5.0 , Opera, Mozillia, firebird, netscape 6

Little change for you

How about changing the Blue buttons to use css

Martyn

bandmaster
24-03-2004, 02:58 AM
Martyn,
Thanks! You don't want me to be bored, or have a night off then! Lol.

How does it look now - http:/www.lincolnband.net - I think I've included all the blue buttons. Tell me if I missed any.

Craig
24-03-2004, 06:38 AM
That looks good on my screen :D


Craig

Scott
24-03-2004, 07:55 AM
They look really good from here (IE 6) :):):)

Martyn
24-03-2004, 07:21 PM
Seeing as you don't want a night off, I've got another suggestion well 2 actually

1) Use a External Styleshheet

replace whats in the style tags with an external file (Put the css in a file say called mystyle.css ) and use
<link rel="stylesheet" type="text/css" href="mystyle.css">

This means you can go to 1 place to change the styles

2) Use classes insted on inline styles

eg change this
style="BORDER-RIGHT: 2px; BORDER-TOP: 2px; BORDER-LEFT: 2px; BORDER-BOTTOM: 2px"
to
class="myborders"

and add

.myborders {BORDER-RIGHT: 2px; BORDER-TOP: 2px; BORDER-LEFT: 2px; BORDER-BOTTOM: 2px}
to your style sheet

Ths saves lots of typing and makes the page load quicker (less html to load)

Martyn