Clean Up Your Computer and Keep it Clean

I know a lot of people - friends, family and clients, who wage an ongoing battle with spyware, malware, and viruses. As they surf the internet, their computer gets more and more loaded up with these programs, until they either have to pay the "Geek Squad" or other service to clean it up, or they just buy another computer.

Here are some best practices to keep your computer from developing such problems in the first place, or to help you clean it up once you are infected:

1) Avoid surfing the net on an account with administrator priviledges. If you have the priviledge to install a program onto your computer, so does the malevolant website that you are visiting. If you don't have those priviledges, the bad program CAN'T be installed. This alone has kept my computers clean for years.

2) Install AVG Free Anti Virus Software. I hate Norton, because it always messes up my computer when I try to upgrade it or uninstall it. Plus AVG is FREE!

3) Run the most updated version of Adaware, with updated definitions on a regular basis. It is a free program and is made to search and destroy stuff on your computer that has been installed without your express permission. Looks like the Plus version is FREE for a limited time.

4) If you suspect you are infected, run HijackThis. Running it won't hurt your computer, but you can really mess things up if you start deleting the files listed in the log without knowing what you are doing. You can, however, use a log autoanalyzer that will interpret the results for you. Here is a screenshot of some typical results.



If you aren't familiar with an item listed in your HijackThis log, Google it, and if it is spyware or malware, you will often find detailed instructions and software that will aid you in removing it.

Surf Safe!

More Sprint Billing Errors

Back in February I posted about a Sprint bill I received in error for service on a phone number that has been disconnected for over 5 years. If I could get back all the time I spend dealing with incompetent billing departments, I'd have a vacation coming.

After multiple phone calls, I finally got the charge removed and everything was straightened out. Or was it? I just received ANOTHER bill for the same thing. This time I think I'll write a letter and see if that works any better.

I always like to look at the positive side of situations like this. If I were ever to consider signing up for ANY service Sprint has to offer, this experience has taught me that would be a mistake.

Pleasanton Valley Series, Morrison Home Brochure - The Arbor House

Download print resolution scans (zip file - 5.4MB)

CSS Horizontal Navigation Menu

I've had a request to expand my css navigation tutorial to include a horizontal navigation. This is an extention of my previous css navigation menu tutorial.

To create a horizontal navigation menu in the header, you'll need to create two horizontally stacked divs within the header. The way I normally code it is to create a div in the header named header top, and under that I'll put the nav div. Make sure to size them both to the header width so they can't appear side by side. You'll also need to add a clearing div after the header so that following divs will begin in the correct place:

<div id="header">
 <div id="header-top"></div>
 <div id="nav">
    <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Nothing</a></li>
    </ul>
 </div>
</div>
<div id="clr"></div>

As a convention I started the naming of the navigation styles starting with the nav div. This change will need to "cascade" to all of the other styles within the unordered list. As you can see below, the key to making the nav list horizontal is adding float:left to the li tag. The header-top now displays the header image as a background, and the header div is now just a container to hold the header-top and nav divs. I added a background color to it for aesthetics.

#header{
width: 780px;
height: 84px;
background: #333333;
}

#header-top{
width: 780px;
background-image: url('images/header.jpg');
background-repeat: no-repeat;
height: 50px;
}

#nav{
width:780px;
height: 32px;
}

div#clr{
clear: both;
}

div#nav ul li{
float:left;
}

div#nav ul{
list-style: none;
padding: 0px;
margin: 0px;
}

div#nav ul li a{
display: block;
padding:5px;
margin: 1px;
border: 1px solid white;
width: 100px;
height: 20px;
background: #333333;
color: white;
text-decoration: none;
}

div#nav ul li a:hover{
background: #666666;
}

Here is how it looks.

CSS Navigation Menu - Cascading Stylesheets Tutorial

In the first tutorial of the series, CSS Positioning, we build a basic, table-less structure for a two-column webpage. In this post, we'll add what every webpage needs: navigation.

Some designers prefer to add an additional <div> and identify it as "nav" or "navigation" using a class or id. Since almost all navigation bars I've seen styled with CSS use an unordered list, <ul>, I like to style that directly, rather than adding the additional <div>.

From the first tutorial, we have the following page structure:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN">
<html>
<head>
<title>CSS Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="wrapper">

<div id="header"></div>

<div id="column1">
</div>

<div id="column2">
</div>

<div id="footer"></div>

</div>

</body>
</html>

Now we will add our unordered list to column one, between the <div></div>
tags:

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Nothing</a></li>
</ul>

Now to style our list into a standard navigation menu. First we'll take the unslightly list attributes from the <ul> tag itself:

ul#nav{
list-style: none;
padding: 0px;
margin: 0px;
}

Setting the list-style to none removes the bullet, and setting padding and margins to 0px removes the indent.

I'm going to ignore the <li> tag and style the link <a> tag directly. I do this to take advantage of a:hover to change the links background on rollover:

ul#nav li a{
display: block;
padding:5px;
margin: 1px;
border: 1px solid white;
width: 100px;
height: 20px;
background: #333333;
color: white;
text-decoration: none;
}

First we style the link as a block, so the browser will treat the element like we want it to, as a rectangular button. We style the appearance of the element as we would any box. Finally we remove the link's underline by setting text-decoration:none.

All that's left is to set the rollover using a:hover. The only thing we want to change is the background color, so all we have to do is this:

ul#nav li a:hover{
background: #666666;
}

Now fill your content column with text, and you have a table-less, two column webpage, displayed using css.

Here is the design in action.

CSS Positioning: Cascading Style Sheets Tutorial

I was asked by an aspiring web designer to tutor him in basic Web design techniques. He is working on a Webpage in tables, but is aware that he should probably start working with CSS instead. He had tried Dreamweaver's "layers," but was having a hard time.

In preparation for the 1 hour session I put together a page with a really basic two column layout using CSS positioning. Since I went to all this trouble, I thought I would go ahead and share it with the World Wide Web as well.

Doctype

The first code on the page, and the first thing to be aware of is the Doctype declaration. I use this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN">

Using the "transitional" declarations, rather than "strict" puts the page into "Quirks Mode." This was necessary to get older browsers to display CSS correctly back in the day, but using today will cause you headaches from all the quirks that will be coming your way.

Basic Structure

The code for implementing a CSS page layout should be divided into two parts: HTML for structure, and CSS for formatting. I break the CSS out into a seperate page and link it to my HTML page thusly:

<link href="test.css" rel="stylesheet" type="text/css">

This goes somewhere between the <head></head> tags.

In the body of the HTML document, you can declare the structure very simply using nested <div></div> tags. I use the "ID" attribute to identify them, but "Class" works too. Here's the code for my basic two-column page:

<div id="wrapper">

<div id="header"></div>

<div id="column1"></div>

<div id="column2"></div>

<div id="footer"></div>

</div>

That's it! That's the basic HTML structure of the page; a wrapper enclosing the other page elements. The size, color, borders, and structural images are all declared in the CSS. The page content, such as navigation and text, will go inside the appropriate <div> tags.

CSS

Next, we're going to format each <div> on our page. I also like to remove the margins from the body like so:

body{
margin:0px;
padding: 0px;
}

Next we'll set the width, postion and background of the "wrapper." This will set the basic page size and color, as well as center the page in the browser. Centering is achieved by setting the left and right margins to "auto."

#wrapper{
width: 780px;
margin-right: auto;
margin-left: auto;
background: #cccccc;
}

The header is nested inside the wrapper div. The header image is set as the background.

#header{
width: 780px;
height: 50px;
background-image: url('images/header.jpg') ;
background-repeat: no-repeat;
}

The left column is going to contain the navigation, which I'll add in the next CSS tutorial. Notice that I have set the background color to the same color as that of the wrapper div. This is because we want this column to appear to extend to the bottom of the page. In reality, it will shrink to contain the content. Floating the div left will allow the column to sit side by side the column 2, which will float right.

#column1{
width: 130px;
padding: 10px;
background: #ccc;
float: left;
}

#column2{
width: 610px;
padding: 10px;
float: right;
background: white;
}

Lastly, I position the footer. Note the "clear" declaration, which tells the browser not to position the previous divs beside this one. Also note that the left and right padding are added to the overall width of the div, so you need to subtract those amounts from the total width to match the width of the wrapper and header, which have no padding.

#footer{
width: 770px;
background: #333333;
color: white;
clear:both;
padding: 5px;
}

Next time, we'll fill our page with some navigation and content.

1&1 Internet Complaints

After almost a month and over a dozen emails to support and billing, my recent hosting problem was finally resolved. No fanfare, or even an email letting me know that it had been taken care of. I just went to one of my problem sites, and no more errors.

Two days before that, I received this email from complaints@1and1.com:

Thank you for contacting us.

As a gesture of goodwill, I have refunded the account regarding this
matter.

If you have any further questions please do not hesitate to contact us.

That's great, however the statement "I have refunded the account" is not true, because I haven't received a refund. We'll see if they follow through, or even return my email inquiry.

The point of this post, though, is to share the email address complaints@1and1.com. I wasn't aware of it until now. If I had been, I'm sure I'd already be blacklisted.

Pleasanton Valley Series, Morrison Home Brochure - The Monterey

THE MONTEREY

Throughout the years, the two-story has been, and still is, the favorite of many because of its inherent comfort through separation of the living and sleeping areas.

From the entry hall any area of the home can be reached. To the right is the spacious living room, and the large dining room adapts easily to formal entertaining and family celebrations.

For informal activities, there is the large family room with a beautiful corner fireplace. And there's informal eating space in the kitchen nook. Of special interest in the Activity Area is the large walk-in pantry and the ample cabinet space to take care of all kitchen storage problems. Notice how your washer, dryer, and freezer will fit into the handy utility room, and the accessibility of the powder room, useful for guests as well as family.

On the upper level, your family will enjoy the privacy and quiet assured by a two-story structure. The owners have their own bath, dressing room, and twin clothes closets.

The Monterey House offers the growing family a home of comfort, con­venience, and privacy__ a home that will provide satisfaction and pride for years to come.

For those who prefer spacious lots, it is also available in the Walnut Grove area of Pleasanton Valley with lots up to 11,000 Sq. Ft.

ADDED VALUES:

Shake Roofs Rear and Side Yard Fencing ~ 2^½ Baths – Corner Fireplace in Family Room – Walk-in Pantry – Vanities with Full Width Mirrors and Illuminated Ceilings in Family and Owners' Bath - Built-in Range, Range-hood, and Pull Double Oven - Garbage Disposal Dishwasher - Triple Sink Birch Cabinets ~ Utility Room – Excellent Closet and Storage Space

Ceiling and Sidewall Insulation - Sound Conditioning Insulation in Bath Walls – Controlled Dining Room Lighting – Desk in Kitchen - Cabinet Hardware Selections in the Kitchen and the Baths - Underground Utilities Installed TV Cable

Download scans (print resolution) 5.6M zip

Pleasanton E-Waste Collection Event

I've been carrying a dead scanner, router, and a box of dead batteries in the trunk of my car waiting for this event! I've been checking the City of Pleasanton Website calendar for the past month, but there's been no indication if or when they would be holding their annual E-waste collection. That is, until today when I received the flyer.

When: April 18-20 2008
Where: Alameda County Fairgrounds - Enter on Valley Avenue (Gate 12)
Cost: Free

Acceptable E-Waste:
computers
televisions
VCRs
DVD players
PDAs
stereos
radios
game equipment
camcorders
batteries
auto batteries
copiers
cell phones
telephones
printers
fax machines (good riddance)
fluorescent bulbs
microwave ovens

Not Acceptable:
large appliances
STYROFOAM
packaging

So do the right thing and get rid of your E-Waste properly, and for free at this great event!

For additional information, please contact Electronic Waste Management at 1-866-335-3373 OR the City of Pleasanton at 925-931-5006.

Pleasanton Valley - Morrison Homes Brochure

I recently aquired an original brochure for Pleasanton Valley homes, published in 1966. It includes a page for each model here in Pleasanton Valley and Walnut Grove. If you live around here you will undoubtedly recognize each model, and you may even live in one. I do!

Over the next few months I'll be posting the pages, which include floor plans, and even original pricing!

Here is the cover:



Pleasanton Valley Home - The Monterey
Pleasanton Valley Home - The Arbor House

Sprint Billing Errors

This doesn't have anything to do with Pleasanton or Web Design, but I'm posting it because if it has happened to me, chances are it has happened to someone else. Maybe I can save someone a call or two.

I received a bill from Sprint last week for $17.54. The problem is that I haven't had a Sprint account for over 5 years, maybe longer. There was an account number, but no phone number listed on the bill, so I had no idea what it was for.

I called the customer service number on the bill. They couldn't find any record of my account number. They transferred me to the cellular division, they also could find no record of that account number. Finally they spilled the beans, and told me they had outsourced the upgrade of their billing system to another company. They transferred me, and an annoyed-sounding man with a heavy hispanic accent again told me there was no record of my account number. Off the hook? I could only be so lucky.

Knowing that a company like Sprint isn't going to let an outstanding charge just fade away, I called back a week later. This time, my account number was on file. It was for a phone number that was disconnected in 2002. When questioned about what the charges were for, the customer service person told my that they were for service on that phone number for January and February of this year. "So you don't want to pay this?" he asked. "No" I replied. 15 minutes later the charge was removed and the account was closed.