Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Simple Web Page Buttons

Reply
Thread Tools

Simple Web Page Buttons

 
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-15-2011
Beauregard T. Shagnasty wrote:
> Mike Copeland wrote:
>
>> 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...>

>
> 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:<jc7rlf$onk$(E-Mail Removed)>
>
> You've programmed for 50 years; text buttons should be a snap!
>


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>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      12-15-2011
Jonathan N. Little wrote:

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


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

--
-bts
-This space for rent, but the price is high
 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-15-2011
Beauregard T. Shagnasty wrote:
> Jonathan N. Little wrote:
>
>> /* one liner added beveled borders! */ border: 3px outset #1c508c;

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


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>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Mike Copeland
Guest
Posts: n/a
 
      12-15-2011
> Mike Copeland wrote:
>
> > 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...>

>
> 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: <jc7rlf$onk$(E-Mail Removed)>
>
> You've programmed for 50 years; text buttons should be a snap!
>

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<{{
 
Reply With Quote
 
Ray_Net
Guest
Posts: n/a
 
      12-15-2011
In article <(E-Mail Removed)-september.org>,
http://www.velocityreviews.com/forums/(E-Mail Removed) says...
>
> > Mike Copeland wrote:
> >
> > > 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...>

> >
> > 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: <jc7rlf$onk$(E-Mail Removed)>
> >
> > You've programmed for 50 years; text buttons should be a snap!
> >

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


You can see what i have done (Text Buttons) here
http://www.randoevasion.eu/
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-15-2011
Ray_Net wrote:

> You can see what i have done (Text Buttons) here
> http://www.randoevasion.eu/


But yours requires JavaScript and a bit more markup. It is a little dated.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Denis McMahon
Guest
Posts: n/a
 
      12-15-2011
On Thu, 15 Dec 2011 14:46:30 -0700, Mike Copeland wrote:

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


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
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-15-2011
Hot-Text wrote:
>
>
> "Beauregard T. Shagnasty" <(E-Mail Removed)> wrote in message
> news:jcd564$772$(E-Mail Removed)...
>> Mike Copeland wrote:
>>
>>> 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...>

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

>
> You need to look at the Bug in the HTML of Jonathan's post,
> <TD> <TR>
>


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>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-16-2011
Hot-Text wrote:

> 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'"


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.



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Ray_Net
Guest
Posts: n/a
 
      12-16-2011
In article <jcfpv3$bvp$(E-Mail Removed)>, (E-Mail Removed) says...
>
> Hot-Text wrote:
>
> > 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'"

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


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

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Created Radio Buttons displaying as if they were conventional buttons Dr. Leff Javascript 3 10-15-2007 09:47 PM
The Z axis and simple menu buttons/image buttons Jonathan N. Little HTML 3 04-02-2007 09:57 AM
Datagrid Nav buttons and numeric buttons Jeremy Jones ASP .Net 1 03-22-2007 08:00 AM
Image Buttons/Buttons not responding =?Utf-8?B?QmVu?= ASP .Net 1 07-06-2005 07:34 AM
2 buttons but want enter key in textbox to execute one buttons' click event? Roger ASP .Net 1 05-20-2005 09:47 PM



Advertisments