Simple Web Page Buttons

M

Mike Copeland

I have acquired maintenance responsibility for a Web site and have
been asked to make some cosmetic changes. The site
(www.raceplaceevents.com) is going through changes in ownership, and the
desired modifications are in programming areas I don't know.
Specifically, we want to change the colors and some of the wording in
the navigation buttons. Currently, the buttons are .gif files (which I
can't alter, of course), and I want to remake them as simply as
possible. I have done some google exploring on this subject, but most
information seems to require either CSS3 code (which I don't want to
impose on our users, who may not have modern browsers) or expensive
graphic software (PaintShop, DreamWaever, etc.) that I don't have.
That being said, what are some simple and easy-to-learn steps I might
take to change/rebuild the buttons on our site? Please advise. TIA
 
I

idle

I have acquired maintenance responsibility for a Web site and have
been asked to make some cosmetic changes. The site
(www.raceplaceevents.com) is going through changes in ownership, and the
desired modifications are in programming areas I don't know.
Specifically, we want to change the colors and some of the wording in
the navigation buttons. Currently, the buttons are .gif files (which I
can't alter, of course), and I want to remake them as simply as
possible. I have done some google exploring on this subject, but most
information seems to require either CSS3 code (which I don't want to
impose on our users, who may not have modern browsers) or expensive
graphic software (PaintShop, DreamWaever, etc.) that I don't have.
That being said, what are some simple and easy-to-learn steps I might
take to change/rebuild the buttons on our site? Please advise. TIA
Click to expand...

Use Gimp. It's free and will re-do what you need.
 
J

Jonathan N. Little

Mike said:
I have acquired maintenance responsibility for a Web site and have
been asked to make some cosmetic changes. The site
(www.raceplaceevents.com) is going through changes in ownership, and the
desired modifications are in programming areas I don't know.
Specifically, we want to change the colors and some of the wording in
the navigation buttons. Currently, the buttons are .gif files (which I
can't alter, of course), and I want to remake them as simply as
possible. I have done some google exploring on this subject, but most
information seems to require either CSS3 code (which I don't want to
impose on our users, who may not have modern browsers) or expensive
graphic software (PaintShop, DreamWaever, etc.) that I don't have.
That being said, what are some simple and easy-to-learn steps I might
take to change/rebuild the buttons on our site? Please advise. TIA
Click to expand...

1) I think you are mistaken to do that many does not require CSS3 and no
one will be using so old as not to support CSS.

2) CSS makes your button both
a) more flexible: you can change colors add borders, change text...
b) easier to maintain: no special software, just Notepad will do.

3) If you add CSS3 effects, non-supporting browsers will just ignore.

Add some hover effects and the shadow is CSS3, so if you are using an
older version of IE you will just lose the shadow, no biggie.



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>Use CSS</title>

<style type="text/css">

div#nav {
width: 11em; float: left; font-family: sans-serif;
}

/* smaller subtext */
div#nav a span { font-size: .7em; }

div#nav a {
text-decoration: none; display: block; margin: 5px;
padding: .5em; text-align: center;
}

/* you can add a CSS3 rule non-supporting browsers will ignore */
div#nav a { text-shadow: 2px 2px 2px #000; }

div#nav a:link, div#nav a:visited {
color: #ffffff; background: #1c508c;
}
div#nav a:hover, div#nav a:focus {
color: #ffff00; background: #7c9ec4;
}
div#nav a:active { color: #ff0000; background: #3c4e64; }
</style>

</head>
<body>
<div id="nav">
<a href="#nav">Home</a></td></tr>
<a href="#nav">Race Results <span>(presented by Runners Den)</span></a>
<a href="#nav">Even Calendar/<br>Online Registration</a>
<a href="#nav">Results Questions<br>Or Problems</a>
<a href="#nav">Timing Services</a>
<a href="#nav">About Us</a>
<a href="#nav">Contact Us</a>
</div>
<p>The rest of your page....</p>
</body>
</html>
 
E

Erwin Moller

I have acquired maintenance responsibility for a Web site and have
been asked to make some cosmetic changes. The site
(www.raceplaceevents.com) is going through changes in ownership, and the
desired modifications are in programming areas I don't know.
Specifically, we want to change the colors and some of the wording in
the navigation buttons. Currently, the buttons are .gif files (which I
can't alter, of course), and I want to remake them as simply as
possible. I have done some google exploring on this subject, but most
information seems to require either CSS3 code (which I don't want to
impose on our users, who may not have modern browsers) or expensive
graphic software (PaintShop, DreamWaever, etc.) that I don't have.
That being said, what are some simple and easy-to-learn steps I might
take to change/rebuild the buttons on our site? Please advise. TIA
Click to expand...

Hi,

Not sure if this is 100% legal, but you can still get the
endless-evaluation version of PSP 4.12.

http://www.oldapps.com/Paint_Shop_Pro.php

It is the only graphics software I have ever used. ;-)
It is extremely easy to use.

(Disclaimer: I am a programmer, not a designer.)

Regards,
Erwin Moller
 
J

Jukka K. Korpela

2011-12-13 17:40 said:
Mike Copeland wrote: [...]
Specifically, we want to change the colors and some of the wording in
the navigation buttons.
Click to expand...
[...]
2) CSS makes your button both
a) more flexible: you can change colors add borders, change text...
b) easier to maintain: no special software, just Notepad will do.
Click to expand...

Certainly! And the approach of using styled text on styled background is
also good for search engines. It will avoid awkward texts like "Home
button" and will leave just the essential text there. (Surely alt texts
could be written properly, but this seems to be impossible to mortals.
But they _can_ write proper button texts, as they actually see them in
action. :))
3) If you add CSS3 effects, non-supporting browsers will just ignore.
Click to expand...

For example, you could specify rounded borders using border-radius, and
browsers would either obey that or use normal borders. No harm done.
<meta http-equiv="content-language" content="en-us">
Click to expand...

This reminds me... (although that meta tag as such is mostly practically
useless)... if you ever need or wish to translate your page to other
languages, styled text is surely a better basis than text in images.
(Professional translation agencies can deliver you translations of
images, but translating texts is surely safer and cheaper.)
 
J

Jonathan N. Little

Jukka said:
This reminds me... (although that meta tag as such is mostly practically
useless)...
Click to expand...

Leftover old template...just have bothered to update it...let's see
where the hell does Win7 now stick then...
 
D

Denis McMahon

I have acquired maintenance responsibility for a Web site and have been
asked to make some cosmetic changes. The site (www.raceplaceevents.com)
is going through changes in ownership, and the desired modifications are
in programming areas I don't know.
Specifically, we want to change the colors and some of the wording in
the navigation buttons. Currently, the buttons are .gif files (which I
can't alter, of course), and I want to remake them as simply as
possible. I have done some google exploring on this subject, but most
information seems to require either CSS3 code (which I don't want to
impose on our users, who may not have modern browsers) or expensive
graphic software (PaintShop, DreamWaever, etc.) that I don't have.
That being said, what are some simple and easy-to-learn steps I might
take to change/rebuild the buttons on our site? Please advise. TIA
Click to expand...

Err, there are some very good free graphics manipulation programs about,
gimp is one that I've already seen mentioned and is easily capable of
changing colour x to colour y in a couple of gif images.

More worrying to me is that you've acquired responsibility for
maintaining a website, which is a visual presentation of an organization,
and seem to have no idea of or prior access to or use of tools for
manipulating images.

Have you ever:

a) edited raw html in a text editor?
b) edited javascript in a text editor?
c) edited css styling in a text editor?

We already know the answer to (d) which was "edited an image".

e) used either "tidy" or the html validator at w3.org

I'm concerned here that you're way out of your depth and at the bottom of
a very steep learning curve, although I may of course be wrong.

Oh, and wrt (a), "export as html" from an application such as a
spreadsheet or word processor, or even using a "wysiwyg" (or as I prefer
to call them, wysiwymgiatb[1]) web-page designer really does not count as
editing raw html in a text editor, in fact it doesn't really count as
editing html at all.

Rgds

Denis McMahon

[1] wysiwymgiatb what you see is what you might get in a theoretical
browser
 
M

Mike Copeland

More worrying to me is that you've acquired responsibility for
maintaining a website, which is a visual presentation of an organization,
and seem to have no idea of or prior access to or use of tools for
manipulating images.
Have you ever:

a) edited raw html in a text editor? Yes
b) edited javascript in a text editor? Yes
c) edited css styling in a text editor? Yes

We already know the answer to (d) which was "edited an image".
Click to expand...
No, of course not. Hence. the original query... 8<{{
e) used either "tidy" or the html validator at w3.org Yes

I'm concerned here that you're way out of your depth and at the bottom of
a very steep learning curve, although I may of course be wrong.
Click to expand...
My (in)experience is with graphics and GUIs. I have been a computer
programmer for over 50 years - but I've never worked in graphics or
animation. Does this disqualify me from asking questions and guidance
in this forum?
I have been "maintaining" this Web site (adding links and data files
and other weekly updates) for years), but the original developer who
produced the (now outdated and incorrect) navigation buttons (.gif
files) isn't available. My current task is to "redo" the information
embedded in these buttons, as well as change their color. Not a biggie
for Web artists and such, but I frankly don't know where to start on
this particular effort. <sigh...>
 
B

Beauregard T. Shagnasty

Mike said:
I have been "maintaining" this Web site (adding links and data files
and other weekly updates) for years), but the original developer who
produced the (now outdated and incorrect) navigation buttons (.gif
files) isn't available. My current task is to "redo" the information
embedded in these buttons, as well as change their color. Not a biggie
for Web artists and such, but I frankly don't know where to start on
this particular effort. <sigh...>
Click to expand...

Why not get rid of the graphic buttons altogether and make your
maintenance much easier? Did you pay any attention to Jonathan's post,
giving you near-perfect text-only CSS buttons? See his post:

Message-ID: <[email protected]>

You've programmed for 50 years; text buttons should be a snap!
 
J

Jonathan N. Little

Beauregard said:
Why not get rid of the graphic buttons altogether and make your
maintenance much easier? Did you pay any attention to Jonathan's post,
giving you near-perfect text-only CSS buttons? See his post:

Message-ID:<[email protected]>

You've programmed for 50 years; text buttons should be a snap!
Click to expand...

Yes, just for example a 5 second edit to ad one line to the CSS and we
now have spiffy beveled buttons. This post took longer to write than the
page edit.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>Use CSS</title>

<style type="text/css">

div#nav {
width: 11em; float: left; font-family: sans-serif;
}

/* smaller subtext */
div#nav a span { font-size: .7em; }

div#nav a {
text-decoration: none; display: block; margin: 5px;
padding: .5em; text-align: center;

/* one liner added beveled borders! */
border: 3px outset #1c508c;

}

/* you can add a CSS3 rule non-supporting browsers will ignore */
div#nav a { text-shadow: 2px 2px 2px #000; }

div#nav a:link, div#nav a:visited {
color: #ffffff; background: #1c508c;
}
div#nav a:hover, div#nav a:focus {
color: #ffff00; background: #7c9ec4;
}
div#nav a:active { color: #ff0000; background: #3c4e64; }
</style>

</head>
<body>
<div id="nav">
<a href="#nav">Home</a></td></tr>
<a href="#nav">Race Results <span>(presented by Runners Den)</span></a>
<a href="#nav">Even Calendar/<br>Online Registration</a>
<a href="#nav">Results Questions<br>Or Problems</a>
<a href="#nav">Timing Services</a>
<a href="#nav">About Us</a>
<a href="#nav">Contact Us</a>
</div>
<p>The rest of your page....</p>
</body>
</html>
 
B

Beauregard T. Shagnasty

Jonathan said:
/* one liner added beveled borders! */ border: 3px outset #1c508c;
Click to expand...

<g> I've been using beveled buttons for years. They look quite nice.
 
J

Jonathan N. Little

Beauregard said:
<g> I've been using beveled buttons for years. They look quite nice.
Click to expand...

and a little tweak to the borders and you can "animate"

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>Use CSS</title>

<style type="text/css">

div#nav {
width: 11em; float: left; font-family: sans-serif;
}

/* smaller subtext */
div#nav a span { font-size: .7em; }

div#nav a {
text-decoration: none; display: block; margin: 5px;
padding: .5em; text-align: center;
/* one liner added beveled borders! */
border: 3px outset #1c508c;

}

/* you can add a CSS3 rule non-supporting browsers will ignore */
div#nav a { text-shadow: 2px 2px 2px #000; }

div#nav a:link, div#nav a:visited {
color: #ffffff; background: #1c508c;
}
div#nav a:hover, div#nav a:focus {
border-width: 2px 4px 4px 2px ;
color: #ffff00; background: #7c9ec4;
}
div#nav a:active {
border-width: 4px 2px 2px 4px;
border-style: inset;
color: #ff0000; background: #3c4e64;
}
</style>

</head>
<body>
<div id="nav">
<a href="#nav">Home</a></td></tr>
<a href="#nav">Race Results <span>(presented by Runners Den)</span></a>
<a href="#nav">Even Calendar/<br>Online Registration</a>
<a href="#nav">Results Questions<br>Or Problems</a>
<a href="#nav">Timing Services</a>
<a href="#nav">About Us</a>
<a href="#nav">Contact Us</a>
</div>
<p>The rest of your page....</p>
</body>
</html>
 
M

Mike Copeland

Mike said:
Why not get rid of the graphic buttons altogether and make your
maintenance much easier? Did you pay any attention to Jonathan's post,
giving you near-perfect text-only CSS buttons? See his post:

Message-ID: <[email protected]>

You've programmed for 50 years; text buttons should be a snap!
Click to expand...
Yes, I saw (and will be using) Jonathan's post it's just what I was
seeking.
In the above, I was merely responding to Dennis, who implied I had no
business doing this work or asking for help here... 8<{{
 
D

Denis McMahon

Yes, I saw (and will be using) Jonathan's post it's just what I was
seeking.
In the above, I was merely responding to Dennis, who implied I had no
business doing this work or asking for help here... 8<{{
Click to expand...

Sorry, I wasn't suggesting that you had no business coming here.

In my experience, most websites include images, and most website coders
have some experience of, at the very least, cropping and resizing images,
ie using basic image manipulation tools.

I inferred from your apparent lack of experience of the latter that you
might have very little experience in web site coding, and in that case,
having been handed a working, online and possibly high traffic website to
maintain would be rather a baptism of fire.

Rgds

Denis McMahon
 
J

Jonathan N. Little

Hot-Text said:
You need to look at the Bug in the HTML of Jonathan's post,
<TD> <TR>
Click to expand...

Good pickup, a little cruft from scraping from the OP's site, should be:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>Use CSS</title>

<style type="text/css">

div#nav {
width: 11em; float: left; font-family: sans-serif;
}

/* smaller subtext */
div#nav a span { font-size: .7em; }

div#nav a {
text-decoration: none; display: block; margin: 5px;
padding: .5em; text-align: center;
/* one liner added beveled borders! */
border: 3px outset #1c508c;

}

/* you can add a CSS3 rule non-supporting browsers will ignore */
div#nav a { text-shadow: 2px 2px 2px #000; }

div#nav a:link, div#nav a:visited {
color: #ffffff; background: #1c508c;
}
div#nav a:hover, div#nav a:focus {
border-width: 2px 4px 4px 2px ;
color: #ffff00; background: #7c9ec4;
}
div#nav a:active {
border-width: 4px 2px 2px 4px;
border-style: inset;
color: #ff0000; background: #3c4e64;
}
</style>

</head>
<body>
<div id="nav">
<a href="#nav">Home</a>
<a href="#nav">Race Results <span>(presented by Runners Den)</span></a>
<a href="#nav">Even Calendar/<br>Online Registration</a>
<a href="#nav">Results Questions<br>Or Problems</a>
<a href="#nav">Timing Services</a>
<a href="#nav">About Us</a>
<a href="#nav">Contact Us</a>
</div>
<p>The rest of your page....</p>
</body>
</html>
 
J

Jonathan N. Little

Hot-Text said:
Mr. Ray_Net
it look so good you may need the © it
But I save this of you Cade as a Good Template,
But for the Colors I am more in too
MouseOver bgColor #c0c0c0
onMouseOut bgColor #FFF000

<center>
<table style=" text-align: left-align; width: 84%;"
border="2"cellpadding="4" cellspacing="4">
<tbody>
<tr>
<td style="vertical-align: center; width: 28%;"
onMouseOver="this.bgColor='#EDF8F1'" onMouseOut="this.bgColor='#D1EEDC'"
bgColor="#D1EEDC">
<center><strong><a href="">#1</a></strong></center>
</td>
<td style="vertical-align: center; width: 28%;"
onMouseOver="this.bgColor='#EDF8F1'" onMouseOut="this.bgColor='#D1EEDC'"
Click to expand...

Not advisable, this is not what one would currently say is "best
practice", and more like vintage 1996.

CENTER is deprecated

TABLE is unnecessary and requires more markup and less flexible in
presentation

Relies on JavaScript which is not necessary now with CSS and the
JavaScript in inline instead of in a separate file making management easier

Uses with inline HTML styling attributes which more steam-lined CSS is
preferred.
 
R

Ray_Net

Not advisable, this is not what one would currently say is "best
practice", and more like vintage 1996.

CENTER is deprecated

TABLE is unnecessary and requires more markup and less flexible in
presentation

Relies on JavaScript which is not necessary now with CSS and the
JavaScript in inline instead of in a separate file making management easier

Uses with inline HTML styling attributes which more steam-lined CSS is
preferred.
Click to expand...

You are certainly true ...but:
1. It works.
2. It pass the W3C validator.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to position the *tooltip* comment on these buttons? 9
Add a list of videos each one in a different button in a web page 1
Sending data from web page to Raspberry Pi 0
I want to have a button in a web page with action for open new phone contact page and fill it with some date 1
I need some help on a format issue that should be simple for someone here (but not me!) 0
Gallery - mosiac/grid layout with filtering and information page popup 1
buttons 4
How to use PDF-lib and how to center each line of texts on the page? 1

Members online

Total: 19 (members: 2, guests: 17)
Robots: 503

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top