Archive for April, 2008

More Sprint Billing Errors

Posted by admin in Uncategorized on April 26th, 2008

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.

No Comments

Pleasanton Valley Series, Morrison Home Brochure - The Arbor House

Posted by admin in Pleasanton, Real Estate on April 24th, 2008

Download print resolution scans (zip file - 5.4MB)

1 Comment

CSS Horizontal Navigation Menu

Posted by admin in css, navigation, web design, web development on April 21st, 2008

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.

2 Comments

CSS Navigation Menu - Cascading Stylesheets Tutorial

Posted by admin in css, navigation, web design, web development on April 21st, 2008

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.

2 Comments

CSS Positioning: Cascading Style Sheets Tutorial

Posted by admin in navigation, web design, web development on April 17th, 2008

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.

3 Comments

1&1 Internet Complaints

Posted by admin in 1and1 Internet, web hosts on April 11th, 2008

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.

24 Comments

Pleasanton Valley Series, Morrison Home Brochure - The Monterey

Posted by admin in Pleasanton, Real Estate on April 9th, 2008

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

No Comments

Pleasanton E-Waste Collection Event

Posted by admin in Pleasanton, e-waste on April 7th, 2008

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.

2 Comments