Goodies To Go! Newsletter #342

By Vince Barnes

************************************************************
Goodies to Go (tm)
June 20, 2005 -- Newsletter # 342
 
This newsletter is part of the internet.com network.
http://www.internet.com
 

************************************************************

Featured this week:
 
*   Goodies Thoughts - Tables For Layout
*   Q & A Goodies
*   News Goodies
*   Feedback Goodies
*   Windows Tech Goodie of the Week 
*   And Remember This...
 
************************************************************
 

Tables For Layout

 
Here's a question for you: is it right or wrong to use tables to layout the elements you are adding to a page? Think you know the answer? If so, great! But you might want to read on anyway -- the answer might not be so clear as you think!

First, let's discuss what we mean by "lay out the elements". Suppose we have a page design that involves a heading across the top, a navigation bar down the left side and the main body to the right of the navigation bar. Also suppose, just for the sake of this example, that the navigation bar is a tall, skinny image with an image map defining its various links (not familiar with such an animal? -- Check out http://www.htmlgoodies.com/tutorials/image_maps/ )

There are many ways to create such a page. For the sake of our example, frames have been ruled out. Of the remaining options, one fairly obvious one is to use tables. Such a page could have a table covering the entire viewable area, and comprising two rows. The first of these rows would have a cell, spanning two columns, and containing the heading, whatever that might be. The next row would comprise two cells (columns), the leftmost of which would hold our image map, with the rightmost holding the body of the page. In the body, we might use another table (tables within a table cell are perfectly acceptable) to lay out a few pictures with corresponding text in a sort of checkerboard style. (By the way, if you've not used tables in this way, or aren't that familiar with them at all, check out http://www.htmlgoodies.com/tutorials/tables/ )

Job done! But is is right? With judicious use of table and cell size parameters using both percentage and pixel measures, we can get the page looking just the way we want it. There are those, however, who argue that tables are meant for laying out columnar data, much as a spreadsheet does, and that using them in the manner I just described is abusing the feature. Instead, the argument goes, we should use, for example, CSS.

Cascading Style Sheets (see http://www.htmlgoodies.com/beyond/css/ and http://www.htmlgoodies.com/beyond/css/css-ref ) can indeed do a wonderful job of laying out a page such as this one. So, is CSS the right way to go, or are tables right?

CSS is not particularly difficult, once you know it, and neither are tables.

My take is this: if you know CSS, use it; if you know tables, use them; if you know both, use either and if you know neither, learn either, or better yet, learn both.

There is no "right" answer. To propose that either is right is to get stuck in, as Winston Churchill might have put it, a form of idle pedantry up with which we shall not put! CSS and tables are tools. The product is the page. If the page works and looks great, the job is done and it doesn't matter what tools the workers used.

Content rules!

 


Thanks for Reading!
 
 
 

- Vince Barnes
 
 
 
 
 
************************************************************
 
Q & A Goodies
***********************************
Questions are taken from submissions to our Community
Mentors. You can ask a Mentor a question by going to
http://www.htmlgoodies.com/mentors/
 

Q. I am looking for JavaScript help in order to pre-select a option in a select field inside a form. I am using server-side scripting (PHP) in order to provide the selected value.

A. You could use PHP to create your option tag and select the option you want that way. I have a small Help Desk application written in PHP that I have set up dropdowns to select the date. I have them default to the current date. Here is an example of the dropdown for the
month:
<select name="beg_req_month">
<?php
for($i=1;$i<=12;$i++)
{
if($i==$prob_month)
{print "<option value='" . $i . "' selected>" . $i .
"</option>\n";}
else
{print "<option value='" . $i . "'>" . $i . "</option>\n";}
}
?>
</select>
The variable $prob_month is set to the current month in some previous code. For JavaScript to set the selected option you would use a statement like this (which sets the first option tag to selected):
document.form_name.select_name.options[0].selected=true






Q. How can I force a user to submit a form by clicking the "Submit" button only and not by using the "Enter" key?

A. This script had the desired effect, but not in all browsers. It worked in Netscape 7 and IE 6, not in Opera 6 and Netscape 4.
<script language="JavaScript">
<!-- ;
function showAlert() {
alert("don't do that");
return false
}
// end hide -->
</script>
<form action="http://yourcgiscript" method="post" onKeyPress="showAlert()">
<input type="submit" value="default value">
</form>





Q. I'm making a website with a "fixed" background. I can't figure out how to make the picture fit the browser perfectly on everybody's system. Is there a code I can place inside my document to alter the fixed background to fit the browser? My site content will go into a smaller screen/box within the background so there is no need for scrollers on my outside browser and my background image doesn't need to be tiled because it basically is my site.

A. You can use Cascading Style Sheets to fix a background image. The code would have to be edited for your particular situation and image but here is the code:
<style type="text/css">
body {
background-image: url("/images/your_image_name.gif");
background-repeat: no-repeat;
background-attachment: fixed
}
</style>






Q. Is it possible to change the link color with the onMouseOver command?

A. Yes it is. I have done it using JavaScript (there is also a way using CSS). Here is my JavaScript version:
<html>
<head>
<title>Change Link Color</title>
<style type="text/css">
/* Set colors for IE5.0+ and Netscape 6.0 */
.textRed {color:red}
.textBlue {color:blue}
.textLgreen {color:lightgreen}
/* Set colors for Netscape 4.0+ */
A.normal{color:blue}
A.over{color:red}
A.overb{color:lightgreen}
/* No underline on link for all browsers */
A{text-decoration:none}
</style>
<SCRIPT LANGUAGE="JavaScript">
/* This script was written by Jim Young of www.requestcode.com and has been tested in Internet Explorer 5.0+, Netscape 4.0+ and Netscape 6.0. I use the statement (this.className) to change the class for the links in NS6 and IE5.0+ . The scripts below are strictly for NS4.0+ . Add links below that are in the same order as your links in the body section. the format for the array is:
page to link to, the link name(what is displayed on your page), div id, class(color) for the mouseover, and class(color) for the mouseout.
Make sure you separate them by a comma (,).
*/
var links = new Array()
links[0]="http://www.wsabstract.com,Website Abstraction,divLink0,over,normal"
links[1] ="http://www.requestcode.com,Requestcode,divLink1,overb,normal"
// Unless you absolutely have to DO NOT change the functions below.
function change(linknum)
{
if(document.layers) // Check for NS4.0+
{
linkval=links[linknum].split(",") // split out the values
linkpage=linkval[0]
linkname=linkval[1]
linkdiv=linkval[2]
linkclass=linkval[3]
var linkd="<A HREF="+linkpage+" CLASS="+linkclass+" onMouseOut=changeb(\""+linknum+"\")>"+linkname+"</A>"
var docwrta="document."+linkdiv+".document.write('"+linkd+"')"
eval(docwrta)
eval('document.'+linkdiv+'.document.close()')
}
}
function changeb(linknum)
{
if(document.layers)
{
linkval=links[linknum].split(",")
linkpage=linkval[0]
linkname=linkval[1]
linkdiv=linkval[2]
linkclass=linkval[4]
var linkd="<A HREF="+linkpage+" CLASS="+linkclass+"
onMouseOver=change(\""+linknum+"\") onMouseOut=changeb(\""+linknum+"\")
>"+linkname+"</A>"
var docwrta="document."+linkdiv+".document.write('"+linkd+"')"
eval(docwrta)
eval('document.'+linkdiv+'.document.close()')
}
}
</SCRIPT>
</head>
<body>
<SCRIPT>
/* If you add more links here make sure you update the links array with the same url and other required information. Make sure they are entered in the array in the same order as they appear on your page. Also remember to change the value being passed on the mouseover and mouseout to the functions to match the entry in the array. Make sure you use different names for each div. In the mouseover for IE and NS6 you can change the class name specified by the statement this.className to a color you have setup in the styles area in your head section above. You should leave the class(color) for the mouseout the same as when your link is displayed when the page is first loaded. I currently have them set to blue which is the class normal.
*/
</SCRIPT>
<CENTER>
<H1>Link Effect Example</H1>
Run your mouse over the links to see them change color </CENTER> <div id="divLink0" style="left:15; position:absolute; top:90; visibility:visible">
<a href="http://www.wsabstract.com" onMouseOver="change ('0');this.className='textRed'" class="normal" onMouseOut="changeb ('0');this.className='textBlue'">Website Abstraction</a> </div> <div id="divLink1" style="left:15; position:absolute; top:120;
visibility:visible">
<a href="http://www.requestcode.com" onMouseOver="change ('1');this.className='textLgreen'" class="normal" onMouseOut="changeb ('1');this.className='textBlue'">Requestcode</a>
</div>
</body>
</html>



 




News Goodies
***********************************

JBoss Rolls Rebuilt Portal 2.0
[June 20, 2005] The professional open source vendor launches a full-fledged portal offering.
Read the article:
http://www.internetnews.com/dev-news/article.php/3514061


MasterCard: 40M Credit Card Accounts Exposed
[June 20, 2005] Credit card companies say sensitive information of millions of accounts was laid bare through third-party processor.
Read the article:
http://www.internetnews.com/security/article.php/3513866


Pressure to Change Judge in Microsoft Antitrust Case
[June 20, 2005] Proposed changes in EU's antitrust ruling could leave Microsoft in limbo.
Read the article:
http://www.internetnews.com/bus-news/article.php/3513971


Single Sign-On, The Java Way
[June 20, 2005] Sun's latest ID management products are geared for all of the sign-on protocols for Web services.
Read the article:
http://www.internetnews.com/dev-news/article.php/3513936


EMC Dips Into Virtual Data Pools
[June 20, 2005] The information systems vendor adds the ability to create virtual storage pools and boosts its replication software.
Read the article:
http://www.internetnews.com/storage/article.php/3513816


CA Aims to Help SMBs Protect, Secure and Migrate
[June 20, 2005] Computer Associates comes out swinging with its first-ever suites designed for SMBs. The desktop, server and business protection suites focus on security, backup and data migration.
Read the article:
http://www.internetnews.com/bus-news/article.php/3513846


Google Library: Peril For Publishers?
[June 17, 2005] Publishers haven't decided whether Google Library means exposure to new readers or copyright infringement on a massive scale.
Read the article:
http://www.internetnews.com/bus-news/article.php/3513586


Yahoo Mines The "Deep Web"

[June 17, 2005] New subscription service goes beyond generally accessible content.
Read the article:
http://www.internetnews.com/xSP/article.php/3513736


PayPal Expands Services, Releases API
[June 17, 2005] On Monday, the online payment processor will announce its first non-hosted product as well as an express checkout service and support for purchases by phone, fax or mail.
Read the article:
http://www.internetnews.com/ec-news/article.php/3513686


Previewing Intel's Cognitive Radio Chip
[June 17, 2005] The chip giant announced a design that will handle 802.11a/b/g, and the unfinished high-speed 802.11n spec a preview of reconfigurable radios of the future.
Read the article:
http://www.internetnews.com/wireless/article.php/3513721







Feedback Goodies
***********************************

Did you ever wish your newsletter was an easy two way communications medium? Ploof! It now is!
If you would like to comment on the newsletter or expand/improve on something you have seen in here, you can now send your input to:

mailto:nlfeedback@htmlgoodies.com

We already receive a lot of email every day. This address helps us sort out those relating specifically to this newsletter from all the rest. When you send email to this address it may wind up being included in this section of the newsletter, to be shared with your fellow readers. Please don't send your questions to this address. They should be sent to our mentors: see http://www.htmlgoodies.com/mentors 



Thanks for all your feedback!






Windows Tech Goodie of the Week
***********************************

An Extensive Examination of the DataGrid Web Control: Part 18

n this 18th part of the An Extensive Examination of the DataGrid Web Control article series we'll look at an alternative approach to implementing bi-directional sorting. We'll also look at a simple method that will enhance the appearance of our bi-directional sortable DataGrid.
Read on to learn more!

http://aspnet.4guysfromrolla.com/articles/061505-1.aspx


*** AND ***


Time-based Greeting ASP.NET Sample Code


Greet your visitors based on the time of day. A good example of working with times and dates.

http://www.asp101.com/samples/welcome_aspx.asp


*** AND ***


Indigo Programming Model


In the first part of his series on Microsoft Indigo, Chris Peiris examines the basics of SOA, explains how Indigo fits into the picture and the problems it solves. He then introduces Indigo's programming model and finishes by building a sample Indigo web service using the Microsoft .Net Framework 2.0.

http://www.15seconds.com/issue/050608.htm











And Remember This ...
***********************************

On this day in...

1632 Britain granted right to the Chesapeake Bay area to the 2nd Lord Baltimore; 1782 the US congress approved the Great Seal of the United States and the baled eagle as its emblem; 1793 Eli Whitney applied for the patent for the cotton gin; 1837 at 18 years of age, Queen Victoria ascended the British throne; 1863 The National Bank of Davenport, Iowa, became the first bank to be chartered in the US; 1867 US President Andrew Johnson announced the purchase of Alaska; 1893 Lizzie Borden was found innocent of charges of axing her parents to death in Massachusetts; 1911 the National Association for the Advancement of Colored People (NAACP) was incorporated in New York; 1944 the US Congress chartered the Central Intelligence Agency; 1963 the US and the USSR agreed to set up the "Hot Line"; 1977 the first oil entered the Trans-Alaska Pipeline, to arrive 38 days later at Valdez; 1990 Nelson Mandela arrived in New York to begin his tour of the US;



Born today were: in 1909 actor Errol Flynn; 1911 actress Gail Patrick; 1919 English actor Bruce Gordon; 1920 actor & trekker DeForest Kelley; 1924 actor Audie Murphy; 1924 musician Chet Atkins; 1928 actor Martin Landau; 1931 actress Olympia Dukakis; 1933 actor Danny Aiello; 1942 musician Brian Wilson; 1947 actress Candy Clark; 1950 musician Lionel Ritchie; 1952 actor John Goodman; 1953 musician Cyndi Lauper; 1955 musician Michael Anthony; 1967 musician Joseph Cathcart;
 



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date