Pleasanton Web Design Blog

IE6 - Why Won't You Die?

2009-01-02T20:25:00.000-08:00

As a web developer, I'm sure I'm not alone in despising Microsucks Internet Explorer version 6. It's poor and tweaky support of CSS standards makes every new style sheet an adventure in cross-browser testing. Looks great in Firefox, and IE7? There's a very low probability that it will look good in IE6. Tack on another 25% extra development time to squash those IE6 bugs.

I was hoping, just a few minutes ago, that I would be able to discontinue support of Internet Explorer 6. When the percentage of a browser version drops below 10% in the logs of my more heavily visited sites, I stop testing with it. Unfortunately, my logs show the following breakdown for Internet Explorer visits:

Internet Explorer Version	Percentage of Users
7.0	72.11%
6.0	25.88%
8.0	1.76%

Since around 60% of my visitors are using Internet Explorer, the total percentage of users on IE6 is around 15%. So if you are using IE6 - Please, please upgrade to IE7 or IE8. Or better yet, Firefox. Your Internet experience will be greatly improved, and you will help rid the world of another piece of poorly written software!

DMOZ is Corrupt

2008-12-11T21:48:00.000-08:00

I've known that there was something wrong with DMOZ (Open Directory Project) for some time. There have been many sites over the years that I have submitted to DMOZ every six months, painstakingly going over the information to make sure that it meets the requirements. What a colossal waste of time. The sites rarely get listed. No explanation from the editor. The submissions just fade into nothing.

DMOZ is a valuable link. Google uses the DMOZ directory as a basis for the Google directory. Many other directories on the Web do the same, so your DMOZ link is duplicated many times over. This can add up to a lot of incoming links, and significant link authority.

The DMOZ editors are volunteers, but they hold a lot of power. I found a enlightening example of how this power can manifest itself in the blog Corrupt DMOZ Editor.
Here's an excerpt:

Another day, another screwed DMOZ submission
It's another day and more submissions are lining my queues. I go to a cafe with free internet access and cute college age kids behind the counter, and log in to one of my dmoz accounts using firefox to spoof the OS and browser. Then I delete a handful of listings starting from the top without even looking at them. The next batch I include but I make sure to drain the listings of any useful keywords. The next bunch I keep on hold for the next time. I have a few listings that have been on hold for, I kid you not, eighteen months.

The postings on this blog are a few years old, and I'm not sure how tongue-in-cheek some of the information related is, but reading through the blog confirmed the image I had of what goes on behind the scenes at DMOZ. Geeks with power. Not a good combination. Something as obviously dysfunctional as DMOZ will go away on it's own, hopefully sooner than later. In the meantime, there are plenty of other ways to promote your website. I'm done wasting my time with DMOZ.

phpLD Captcha Problems

2008-11-29T15:38:00.000-08:00

A common problem I've noticed with phpLD (php link directory) installations is Captcha not working properly. On these sites you will be able to complete all of the link information, but when verifying that you are human using Captcha, you can only enter a portion of the Captcha code that you are given. You are therefore unable to submit the link, because you will always receive a Captcha error. Often the Captcha code contains six (6) characters, but the Captcha field only allows you to input five (5) characters maximum. You would think that these Webmasters would notice the lack of link submissions.

The problem is due to the use of a third party template that has the maximum characters for the Captcha input field set too low. To resolve the problem, simply open templates/submit.tpl and find the code for the Captcha field. It will be something like: input type="text" name="CAPTCHA" value="" size="10" maxlength="5" class="input." Just change the maxlength to as many characters as you need to hold the Captcha numbers that are being generated.

Adding Google Analytics Code to a phpLD installation

2008-11-29T14:42:00.000-08:00

Here's a quick post to help you add Google Analytics tracking code to your phpLD (php link directory) template. Because phpLD uses the Smarty templating system, simply opening the footer.tpl and placing the Analytics code before the closing body tag will result in an error. You need to tell Smarty not to parse the code between the script tags. To do so, open your templates/footer.tpl file, and right before the closing body tag, place your Google code like this:

{literal} Your-Analytics-Code-Here{/literal}

Now save and put. That's it!

Pleasanton Criminal Defense Lawyers

2008-09-17T15:10:00.001-07:00

From time to time I like to give a plug for one of my clients. Today it is O'Connor & Runckel LLP, criminal defense lawyers specializing in DUI defense. They are former deputy district attorneys, so they know the courtroom from both sides, and bring that unique perspective to their practice. They are located in the 925 (Concord to be exact) and serve the east bay area, inluding Concord, Walnut Creek, Pleasanton, Oakland and surrounding localities.

Heaven forbid you get into trouble with a DUI, you want these guys on your side. They also take on personal injury cases, so if you get in a car accident caused by the negligence of the other party, they know how to get you the maximum restitution due to you.

Dofollow Your Blog Comments

2008-09-10T21:04:00.000-07:00

Want to bring link juice back into blog commenting? Join the Dofollow movement on your own blog, and others will follow.

As you probably know, the biggest purveyors of blogging software and blog hosting, Blogger and Wordpress, to name two, added a little think called a nofollow tag to links in their comments in hopes that killing the link juice from commenting blogs would disuade spammers from filling up everyone's comments with crap links. Well it didn't work too well, and in the process killed the joy of appropriately commenting blogs.

Here's the Wordpress dofollow plugin, to get you started if you use Wordpress. If you are on Blogger, check out the instructions for defeating nofollow in the new Blogger. If you are on the old blogger, sorry, you are screwed (but we always were).

Then, to start making new dofollow friends, check out this dofollow blogs directory, and add your link. Sure, you will get spam comments, but you already do. Suck it up!

Modify Joomla Page Title for SEO

2008-09-05T19:57:00.001-07:00

Joomla's standard way of displaying page titles is with the Site Name first, a dash, and then the title of the content. This is not the best way to display the page title for search engine optimization (SEO). The page title is a very important element in determining the relevance and ranking of your page to a keyword search. The search engines consider the first part of the page title the most important, so altering the page title so that the content title comes first and the Site Name second is a definite improvement. This is easily changed in /includes/joomla.php. Find the following text around line 503:


 function setPageTitle( $title=null ) {
  if (@$GLOBALS['mosConfig_pagetitles']) {
   $title = trim( htmlspecialchars( $title ) );
   $title = stripslashes($title);
   $this->_head['title'] = $title ? $GLOBALS['mosConfig_sitename'] . ' - '. $title : $GLOBALS['mosConfig_sitename'];
  }
 }

and change to this:

function setPageTitle( $title=null ) {
if (@$GLOBALS['mosConfig_pagetitles']) {
 $title = trim( htmlspecialchars( $title ) );
 $title = stripslashes($title);
 $this->_head['title'] = $title ? $title .' - '. $GLOBALS['mosConfig_sitename'] : $GLOBALS['mosConfig_sitename'];
  }
 }

Having the same Site Name on every page of your site, however only serves to reduce the relevance of each page title to the keyword search and your targeted content. To completely remove the Site Name, instead replace the function above with this:


function setPageTitle( $title=null ) {
 if (@$GLOBALS['mosConfig_pagetitles']) {
  $title = trim( htmlspecialchars( $title ) );
  $title = stripslashes($title);
  $this->_head['title'] = $title ? $title : $GLOBALS['mosConfig_sitename'];
  }
 }

8 Webmaster Tips for Good Search Engine Ranking

2008-08-28T22:05:00.000-07:00

1. Build incoming links. No kidding. Build incoming links. It's hard to do, and can be extremely time consuming and tedious, but keep at it. If you wonder why your site still has a PageRank of 2 and isn't showing up in your competitive searches, it's because you have not built enough incoming links.

2. Redirect yourdomain.com to www.yourdomain.com (or visa versa). If you don't, search engines will see both URLs as separate websites and you could get duplicate content penalties. Type site:yourdomain.com in the Google search box. Then type site:www.yourdomain.com in the Google search box. If you have a different number of links, or different links indexed, Google thinks you have two different websites with the same content.

3. Don't point links to your index page. Point them all to your domain. That includes your internal navigation.

4. Use Google Webmaster Tools to flag any errors in site structure, tags, redirects or indexing. The most useful tools, in my opinion are the robots.txt analysis tool and the URL Removal Tool. Also of note are the sitemap submission tool and diagnostics that tell you if you have 404 errors, or if there are problems with URLs in your sitemap.

5. Leave your company name out of your page title and h1 tags. Chances are that searches for your company name are insignificant in your overall search engine ranking strategy, and you are diluting your keyword relevance.

6. Make sure that all of your page titles are different, and are targeted to the content of the page. Having 20 pages titled "custom widgets" doesn't make the search engines think that your website is the place to learn about custom widgets. It makes them think that users will have a hard time finding information on your site.

7. Use search engine functions to monitor the pages of your website that are indexed. Spiders don't always obey robots.txt, so you can end up with a lot of garbage in the index if you don't keep on top of it. This is especially important if you have a dynamic website.

8. Add new content on a regular basis. Search engines think big websites are important websites, and keeping it fresh keeps them coming back.

Adding Google Analytics to an ELGG installation

2008-08-28T21:29:00.000-07:00

This is more of a rant than a tutorial, so forgive me if you are searching a solution and this doesn't help you.

As far as open source web applications go, Elgg is pretty difficult to work with. It's buggy, there are a lot of compatibility problems, and support from the development team and the community is less than stellar. The application is, however, very powerful, and has many functions that make it the best choice, in my opinion, for an open source social networking web application.

After some difficulty, I got my installation at http://www.fanclubhelper.com up and running. Being afraid to touch it again, for fear I'd open up a can of worms, I didn't make any modifications for over a year. In that time, however, the site started ranking well in some searches I'm interested in, and it was now time to install Google Analytics, to see how the traffic was doing.

In most open source software applications I've used, in order to make changes, such as adding Google Analytics tracking code, you edit the template file. So I went to /mod/template/templates/MyTemplate/pageshell and pasted the Google Analytics code before the closing body tag. In checking the live site, however, the code was not installed.

Since the closing body tag needs to be coming from somewhere, I took a shot in the dark and added the Google Analytics code to the pageshell file of the default template. That worked, but I have no idea why. It also had the side-effect of putting some text over my logo where it wasn't before. I can only guess that one of the pageshell templates I put was different on the server than my local copy, and I forgot about it during the year of inactivity. Another ELGG mystery that I'd rather not get into. It's working well enough, so no touchy!!

Start a Blog and Promote Your Business - NOW!!! Free listing at BlogFoos.com

2008-08-08T11:28:00.000-07:00

Promoting a new blog? Add your link free to BlogFoos.com. BlogFoos.com is a blog-only directory, and no reciprocal link is required.

If you aren't already blogging, you should know that it is an indispensable way to enhance the promotion of your existing business website. In the early days of the Internet, just having an online brochure at yourcompany.com was enough. Those days are gone. And the time it takes a blog to become established can be significant, so waiting to start will only hurt you, and leave your farther behind the pack.

Starting a blog is free and easy with services like Blogger.com and LiveJournal.com. Even better, create a blog on your existing domain with the help of software such as WordPress, and keep the link popularity you generate to yourself. Promotion is also free through sites like BlogCatalog.com, MyBlogLog.com and Digg.com.

If you aren't tech saavy, and would like help getting things started, affordable web design companies, like mine at TpDesigns.net can set you up and train you for a reasonable price. Personal onsite training is available for businesses located in the San Francisco Bay Area.

Paypal Sandbox - So Slow it's Unusable

2008-08-06T17:40:00.000-07:00

Paypal offers developers an environment called the "sandbox" to test out their applications. "Sandbox"is a generic term for "test environment." I last used Paypal Sandbox a year or more ago in testing a Paypal integration with Oscommerce, and didn't notice anything unusual.

Today, however, just now, when throwing a quick test together to detail out a quote, I was unable to use the environment. Page loading is over 10 minutes and counting. To check whether or not it was just me, or just a momentary problem, I did a search and found quite a lot of angry complaints. The complaints spanned a year's time and seemed mixed at first. The last complaint, just a couple of weeks ago was just resigned. He would not be using paypal in his applications again.

A major theme of the complaints was that Paypal wasn't interested in improving the situation. They didn't really care. That was something I had heard before, not from the developer community, but from eBay sellers. They complained of problems, which Paypal customer service was very uninterested in resolving.

If Paypal were just another online store it would be one thing. The problem is that Paypal is basically a bank that has a LOT of peoples financial information online. Are they competent? Do they just not care about the little guy? It seems to me that Paypal should be all about the little guy, because I don't see many Paypal buttons on Fortune 500 websites.

The bottom line is, if a developer can't use Paypal's Sandbox, why not try Google Checkout?

OsCommerce Category Image Problem: 'IMAGE DOES NOT EXIST'

2008-07-23T20:40:00.000-07:00

Here is the solution to a minor, but annoying problem I was having with some installations of OsCommerce. When saving an edit for a category, which already had an image file in the database, the image association would be lost and the error 'IMAGE DOES NOT EXIST' would be displayed. The workaround was to use the browse field to populate the image field each time you edited a record.

I had searched for the solution a number of times, but came up dry. Recently, however, when researching a contribution that added a text description for a category, I found the solution in the readme file (not available to search engines):

CHANGES TO admin/categories.php

CAREFUL: These are not trivial changes. There is a lot of code here.

1) Locate the following line (approximately line 80) (image update bug repair provided in the bugs section on oscommerce.com):
if ($categories_image = new upload('categories_image', DIR_FS_CATALOG_IMAGES)) {
tep_db_query("update " . TABLE_CATEGORIES . " set categories_image = '" . tep_db_input($categories_image->filename) . "' where categories_id = '" . (int)$categories_id . "'");
}

REPLACE those 3 lines with the following 5 lines:
$categories_image = new upload('categories_image');
$categories_image->set_destination(DIR_FS_CATALOG_IMAGES);
if ($categories_image->parse() && $categories_image->save()) {
tep_db_query("update " . TABLE_CATEGORIES . " set categories_image = '" . tep_db_input($categories_image->filename) . "' where categories_id = '" . (int)$categories_id . "'");
}

The comment says "image update bug repair provided in the bugs section on oscommerce.com," which I was never able to find.

Electronic Recycling Sunday

2008-07-19T14:10:00.000-07:00

Electronic Recycling Sunday, July 20th at Amador Valley High School in Pleasanton

Humunya Foundation: 1155 Santa Rita Road, Pleasanton, California
10 AM to 4 PM

Fundraiser Event
C & T Recycling
(510) 590-7510
(925) 547-1776

Finding a Good SEO (Search Engine Optimization) Company

2008-06-12T16:43:00.000-07:00

Let me start out by saying 90% of the SEO companies are out to scam you, so be careful. Here are some tip-offs that the company who is pitching you should be avoided:

1. They talk a lot about "meta-tags." Sure, the description meta-tag is still important, as it's used as a short description on the results page. Modern search engines are looking for good, relevant page content and link authority, NOT hidden content.

2. Reciprocal link exchanging is a central aspect of their strategy. Search engines, especially Google, consider excessive link exchanging to be a violation of their guidelines and will penalize you for it.

3. Submit to 300 search engines! There are only 3 or 4 that really matter, and it doesn't take much time to submit to them. Submitting to the other 296 certainly won't hurt, but it isn't the key to making your website a success.

Things you should do:

1. Ask for references. Actually contact them and find out how successful their client relationships have been. Make sure improvement has been long-term. The danger of looking only at short-term success is that an unethical (black hat) SEO can get you huge short-term improvement, but get you banned in the long-term, long after they have your money in their bank!

2. Ask for guarantees. You are generally going to be paying a lot of money for and SEO service, so they should give you some kind of guaranteed position, or improvement in position.

The Terrace House - Pleasanton Valley Series, Morrison Home Brochure

2008-06-10T08:36:00.000-07:00

The next in the series of scans I am posting from the Morrison Homes brochure I inherited is The Terrace House.

This model was available with 3 bedrooms, which sold for $25,600, carpeting included! The 4 bedroom version sold for $26,900. That's only $1300 for another bedroom!

Download print resolution scans (zip file - 5.9MB)

The Art of Lawrence Ruiz - Now Available Online

2008-06-09T14:19:00.000-07:00

A good friend of mine from back in my art class days has put his work up in a new Online Store. Please visit http://www.lawrenceruiz.com/onlinestore.html. Not expensive for signed, limited editions, so please visit, and if you like it, support a local artist by making a purchase!

The Country House - Pleasanton Valley Series, Morrison Home Brochure

2008-06-04T21:10:00.001-07:00

Here is the next in the series of scans I am posting from the Morrison Home Brochure featuring the Pleasanton Valley and Walnut Grove series of homes that were built and sold here in Pleasanton in 1966. We purchased a home of this model, The Country Home, a few months ago, and were given this brochure by the daughter of the previous owner, who bought the house new in 1966. This page is well worn, and in the worst condition of all in the brochure.

Download print resolution scans (zip file - 5.3MB)

Clean Up Your Computer and Keep it Clean

2008-05-04T19:48:00.000-07:00

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

2008-04-26T18:53:00.000-07:00

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

2008-04-24T17:02:00.000-07:00

Download print resolution scans (zip file - 5.4MB)

CSS Horizontal Navigation Menu

2008-04-21T20:58:00.001-07:00

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

2008-04-21T13:22:00.000-07:00

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

2008-04-17T20:51:00.000-07:00

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

2008-04-11T08:00:00.001-07:00

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

2008-04-09T20:16:00.000-07:00

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, convenience, 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