Let it Snow, Let it Snow

On a separate hobby of mine, I came across Tom's Boring Mordheim Blog. Tom is a very skilled miniature painter and modeler. After joining his online community, I helped him to make his home page "Snow."


Check out the link to the blog above to check out (EDIT: see what his header image usually looks like. Now that he has taken down the snowing animation, click here to see the same image Christmas Style. It used to be just a plain .JPG. I replaced it with a Flash Animation, and amazingly, it is a smaller file than the .JPG!

Enjoy,
Ashton Sanders

PHP - Finding the Width or Height of an Image

Knowing the width, height, Image type or attributes of an image can be extremely useful.

I've used this once to make a line of images all line up on the bottom. I found out the height of the image and then added a margin to the top of the image to make the bottom of the image always be 300 px from the to. So if the height of the image was 140, I would make the margin on top of the image = 300-140.

Here's the code to find the height or width of an Image:

<?php

list($width, $height, $type, $attr) = getimagesize("image_name.jpg");

echo "Image width " .$width;
echo "
";
echo "Image height " .$height;
echo "
";
echo "Image type " .$type;
echo "
";
echo "Attribute " .$attr;

?>

Enjoy,
Ashton Sanders

Content Management System for Websites

From my years of working on the internet, I have come to realize that the one thing that almost all of my clients desire, is the ability to manage their own website. This way, they never have to wait on their web guy to change a phone number on their website. If they have a new product, they have the ability to add it to their own website.

Because of this huge demand for a CMS for websites, we have developed one that I call "Database in a Flash." This Content Management System is a very user-friendly program that uses MySQL and PHP. It allows anyone who knows a little bit about the internet to communicate with their MySQL database to update their website.

It really is an amazing program. For more information, feel free to contact us.

-Let me know if you have any questions,
-Ashton Sanders

Internet Explorer 6 and 7 on the Same Computer

Yes, in the world of Website Designing, you must make sure your website looks the same in every major browser. This means having all major browsers available: IE6, IE7, Firefox, Safari, Opera, etc. You may even want to go as far as checking it on the Netscape, MSN or AOL Browsers. (Although I recommend never downloading anything from AOL, as I've observed legal but slightly malicious coding from them.)

If you're a PC guy, that means you'll need to find a friend with a Mac to check your Safari websites. Also, since when you install Internet Explorer 7, it deletes, Internet Explorer 6, you'll need to have two computers.... right? Wrong!

We can thank TrendoSoft for this beautiful program that will allow you to install multiple versions of IE on your PC!

Now your task bar can look like this:


And if you are using Internet Explorer, I recommend switching to Firefox for a even safer and user-friendly experience.

-Ashton Sanders

Programming on Principle

There are many different ways to program websites. There a many different ways to program the exact same website. If you gave the same design to 100 different website developers, you would end up with 100 pages (that probably all looked fairly similar) and 100 completely different HTML code. Is it possible to say if one is right or wrong?

The Principle of Web Programming

The first principle of website programming is validating. When you make a website, it better be 100% valid. "Ah but it looks perfect in Internet Explorer..." (but it probably looks horrible in Firefox or Opera.) If your code is not valid, that means you are "doing it wrong." Only second rate Web Developers are okay with "doing it wrong."

With HTML, you can do just about anything! From anything as simple as changing the color of a body of text, to aligning tables around your site. But just because you can doesn't mean you should. HTML is not a styling language, its a formatting language. You should use HTML to enter and position your text and body copy.

Cascading Style Sheets, CSS, is a styling language. It's purpose it to add color and life to your website. If you remove your CSS from your site, it should end up being straight text with a couple pictures.

By Why Use CSS?

CSS makes life simple! Why else? Every website has certain aspects that will be the same throughout. Take headers for example: On any given website, it will have the same color, font, size, etc for the first title on every page. You could hard program that with HTML on every page, or you could just put it between "<h1>" tags, and then in your CSS document, you tell all h1's to be a certain size, color, font, etc., etc., etc.

Then when the client comes back and says, "Sorry man, I don't like that green, lets add 2 points of magenta to it," you don't have to reprogram your entire site. All you need to do is change 6 digits in one document, and the entire site changes!

And if that wasn't enough, it keeps your website code clean! I took a site that was almost 300 lines of code (where everything was programmed in HTML). I converted most of it to CSS, and it ended up being less that 40 lines of code! Search Engines love you! It is just that much easier for the Search Engines to get the text on your site.

"Program like your client is watching you... and they understand what you're doing."
-Ashton Sanders

Search Engine Optimization vs Website Design

Earlier I wrote a post about the Basics of Search Engine Optimization.

In this post I'll be delving a little deeper into the basic principles that are used to create the basic rules of Search Engine Optimization.

Text is King I mentioned earlier how Search Engines can only index text. They can't see pictures, movies, music, etc. Pictures can become a very easy substitute for text if you are not careful. Many clients want that button to have a unique font with a nice shadow, which is totally fine... but not as good as having straight text.

So there is definitely a balance between Design and Search Engine Optimization. You want your site to be aesthetic enough for visitors to not be repelled, but you don't want it so picture heavy that no one finds your site as the search engines can't tell what your site is about.

"But you can add alternate text (alt attribute) to your images!"

Yes you can add alts, so that if you image doesn't load, you can have text appear in its place... but search engines know that there is really no way for visitors to see that text. So alt text will never have as much power as straight text or a "h1".

On the other hand, if your site is entirely text, with no images, you won't ever create a conversion. Images are needed to add live and personality and style to a website.

The Balance of Search Engine Optimization and Website Design.
-Ashton Sanders

CSS - Absolute Position Sidebar

This is what I call CSS tip in 30 seconds:

It is very useful to be able to put your navigation bar or side bar at the bottom of your HTML, and absolute position it to appear up on your site where you want it to go. This is actually pretty easy.

If you just want it to be along the left side of your screen and lets say 100 pixels from the top (for your header), this would be your code:

#leftnav {
    position:absolute;
    top:100px;
    left: 0;
}

If you want your navigation bar to go along the right, obviously you would replace "left" with "right".

Here is where it can get complicated: What if your layout is a fixed width, centered layout? Then you cant just align the navigation bar off to one side, because that would not stay inside of your layout, it would jump all the way off to the side. Here's what you would do for a 1000 pixel width and centered website layout:

#leftnav {
    top:100px;
    right: 50%;
    margin-right: -500px;
}

Quick Explanation: "right:50%" causes the right side of your navigation bar to be exactly in the middle of your screen. It doesn't matter what size screen you have, it will always be right in the middle. Then the "margin-right:-500px" moves the entire navigation bar 500 pixels to the right. So in essence, the navigation bar will always be 500 pixels to the right of the exact middle of your browser! That way it looks permanent, and won't move as you shrink your screen.

Another Note: If your navigation bar is going to the left side of your screen, here is another option: If you leave the side bar or navigation bar without the absolute positioning, and it appears directly below where you want it, then if you leave off the "right" or "left" in your CSS (leaving only "top:100px") your navigation bar will move straight up to the top of the screen, and stay where you need it to be.

-CSS in a Flash!
-Ashton Sanders

CSS - Unordered and Ordered Lists

As many young website designers do, when I first got started working with HTML and CSS, I tired to stay as far away from Unordered Lists (<ul>) and Ordered Lists (<ol>). Everyone has their own reasons, but I just thought there was too much to learn about it before I could get it to do what I want.

When you have a list of items, links, etc., it should be in a list

I found this amazing article about lists on AListApart.com: Taming Lists

(Lists are also what you would use to create a pop-up menu only using CSS.)

-Ashton Sanders

CSS - Float

Their is magic in Cascading Style Sheets. (Some properties more than others, but still magic.) Float is one of those CSS properties that really fundamental for any developer trying to create layouts without any tables.

CSS - Float

There are three possible values for float: right, left and none. They are pretty self-explanatory, but here goes anyway:

Lets say you have a div that is 200px wide and 30px tall. Normally any content that comes after it would start at the bottom (30px bellow the top of the div.):

Here is the content that comes after the div.

If you float that same div to the right, all of the content that comes up after the div will show up on the left hand of the div (exactly like the content would come up next to a right-aligned picture):

Here is the content that comes after the div.

And vise versa if you float left:

Here is the content that comes after the div.

This is a very simple property, but you will use it in every CSS design you create. It is definitely a property you want to have ready to throw in to your CSS!

-CSS Everywhere!
-Ashton Sanders

Sweet Flash Animation

There is an awesome Flash Animation that you should definitely see.

There is very little ActionScript, but nonetheless it is one of those animations that you could just watch forever and still not see everything.

Click to see this Sweet Flash Animation.

(This was designed and Created by Geoffrey and Ashton Sanders of Websites in a Flash)

-Enjoy
-Ashton Sanders

FavIcon - Image in the Address Bar

What is a FavIcon?

A FavIcon is the image that appears in the left side of your address bar for certain sites. For example, here are the FavIcons for Websitesinaflash.com, Blogger.com and Google.com:



It is actually a very simple process thanks to HTMLkit.com. All you need to do is make a square image that you would like to become your FavIcon, and upload it to this site. They'll give you a zip file with the FavIcon in it, and you can upload it to the root of your site. WALA! Here's the site:

http://www.htmlkit.com/services/favicon/

-Ashton Sanders

How Do Search Engines Think? SEO Basics

Search Engine Optimization is fairly easy to understand. All you need to do is put your self in a Search Engines Shoes.

Let's start with Google's Mission:

"Google's mission is to organize the world's information and make it universally accessible and useful."

-http://www.google.com/corporate/

Nice and Simple. But it gives you a good understanding of what you are working with and helps us to realize some very basic truths about Search Engines.

Search Engines Truth:

Search Engines want to find useful, informative sites for every search term.

Duh... And they do that by using robots (or bots) that are programmed to "index" websites and decide how useful/informative they are. So our job as Search Engine Optimizers is to make it obvious to search engines that your site is useful and informative. Here are some basics to Search Engine Optimization:

Use Valid Code: The search engine bots don't have eyes, so they can't see your website, but they can read the code that makes your website, and they do know how to read valid HTML. But if your code isn't valid, the bot can get confused and ignore parts of your site.

Content is King: Anyone can make a site that says, "Hello World!" Search engines don't value sites that don't have any content. You need to have relevant content on your website. If your site is about fixing Race Cars, but you never say race cars on your site, don't be surprised when you never find your site under the search term "race cars."

Don't Hide Text: An old search engine "cheat" was to have white text on a white background. This would allow you to have lots of keyword heavy content on your site without actually having to bug your visitors with the large amount of text. This will damage your rankings much more than it will help.

Basic Principles: Google recommends that you don't do anything solely for search engines, which isn't to say that you shouldn't get your site search engine optimized, but rather, don't waste time and money trying to develop tricks to deceive the search engines. Just make a good, quality site that people will find informative and useful.

Links:If someone likes your site enough, they'll link to it. Duh. So if your site is extremely useful, and a lot of people like it, you'll have a lot of links to it. The number of links you have to your site is one of the biggest things that the search engines will judge your site on.

That's a nice overview of how search engines think, and the basics of search engine optimization.

-Use it wisely
-Ashton Sanders

.htaccess - AddHandler

There is a very common problem when trying to upgrade sites made by "newbie" website developers or when you realize that html isn't the only language on the internet, and you need to upgrade your site.

Problem:

You have a site where every page has a *.html or *.htm extension, and you want to add a dynamic, server-side programming language like PHP.

Solution #1:

Go through your entire site, and change every file name to a *.php extension. Then go through every page and correct all of the hyper links. Then do testing on your entire site to ensure that you haven't missed any links. Also, if you know anything about search engine optimization and websites, you'll know you need to create 301 redirects from your old pages to your new so that you don't lose any Rankings you may have gained. Then you have more testing to do to make sure all of your 301 redirects work....

Solution #2

Add this one line of Code into your .htaccess:

AddHandler x-httpd-php5 .php .htm .html

That's all it takes to add PHP to my html files?

Yep, that's it. That little line of code has saved me hundreds of hours of work, and I'm sure it's not as commonly known as it should be.

-Spread the Wealth
-Ashton Sanders

CSS - Replacing Text with an Image

Cascading Style Sheets (CSS) make it very easy to replace text with an image. Here is the whole process described in as few words as possible:

Background Information

In CSS, "display:none" will cause that element and every child in it to disappear. There is nothing you can do to make one of the child's element.
"background-image" give an element a background. This can be applied to just about every element.

Create the Elements in HTML

In your HTML, write this:

<h3 id="title">
  <span>Here is the Title!</span>
</h3>

Create the CSS to replace the text with an image

In your CSS, write this:

/* Remove the Text */
#title span {
  display:non;
}

h3#title {
  background: url("image/url.jpg") no-repeat top left;
  height: 20px;
  width: 100px;
}

And Bam! Your text has disappeared off of the page, and the H3 element is 20 pixels wide and 100 pixels tall. It also has an image for a background that is aligned in the top left corner.

I've seen that CSS Text Replacement technique described with two pages, so I thought I'd see how short of a blog I could make out of it.

And Now you know how to replace text with an Image!

On a side Note, I've also seen this done with: "text-indent: -5000px;" or "visibility:hidden". These work, but I would stick with display:none. It's the cleanest way to do it.

-I hope that helps you out with your CSS and Design Needs.
-Ashton Sanders

CSS - Absolute Positioning

Absolute Positioning with CSS can be a very useful thing.

I've been working a lot with CSS over the last year, but I've just recently discovered the secret to absolute positioning.

Absolute Positioning in CSS

Absolute positioning will allow you to move an HTML item from anywhere in your code to the same spot. For Example: The side bar on this page (Top Horse Connection) is at the very bottom of the HTML code. But the CSS absolute positioning tells the side bar to be positioned 170 pixels from the top of the page. Here is the CSS Code:

#sidebar {
  position:absolute;
  top: 170px;
  left:0;
}

As you can see, it's very simple. And it's very useful when you want something to align along the right or left side of the screen. But what if you want a sidebar to be positioned in the middle of your screen (lets say 300 pixels to the left of the exact middle)?

You could do:

#sidebar {
  position:absolute;
  top: 170px;
  left:400px;
}

On a 1400 pixel-wide-screen, that would work perfectly!, but what if your screen was 800 pixels wide, then the sidebar would be 100 pixels to the right of the middle... So what now?!?!

This is what would you do:

#sidebar {
  position:absolute;
  top: 170px;
  left: 50%;
  margin-left: -300px;
}

And Wala!

-More on the way
-Ashton Sanders

PHP - Include the Same File from Different Folders

This is a PHP tutorial to add advanced include templates to your site.

What you need to know

• Basic PHP functions: include(); and the "for" loop.

Background PHP Information

It is a very useful thing to use a template on your site. Once I have finished designing a site, and converted it into XHTML/CSS, I then make two (or more) includes out of it: "header.php" and "footer.php". Those two includes have everything that is the same on every page of the site. This allows me to easily add or remove a button, change the layout, etc. All I have to do is change one file, and the entire site is updated!

What's the Problem?

If you know includes, you know that they must be relative paths, not absolute. (So if your page is in the pages folder (/pages/) and your header.php is in the header folder (/header/), you will need to write your include like this:

include(../header/header.php);

The problem arises when you don't want to hard code every new page, in every new folder.

PHP Solution

Here is a simple for loop that will figure out what folder you are in, and put the appropriate number of "../"s to make your includes work:

<?
$folder = split("/", $_SERVER['PHP_SELF']);
$rootpath = "";
for($count = count($folder); $count > 2; $count--){
    $rootpath .= "../";
}
include($rootpath . "include/header.php");
?>

There you have it, some sweet, yet simple PHP.

-Enjoy,
-Ashton Sanders

CSS Button - (One SWEET CSS Button)

It is true: "You can make a button a million different ways." There are also as many ways to create a button that will change when you hover your mouse over it. You can use JavaScript, CSS (Cascading Style Sheet), plain HTML, etc. But each one has it's own problems:

JavaScript button: Search Engines have a tough time with JavaScript. I recently got a client who's menu bar was made with JavaScript, and even though he had 10 or so pages, Google only new about his home page.

HTML button: The "onmouseover= and then call in a new image" works pretty well, but you will notice a half second delay or so, because the image has to load. (Yes, you can have the button's load with the site numerous different ways, but that's adding lots of random annoyances that you don't have to deal with.)

CSS button: You can also use CSS to load a new images when someone "a:hover"s over your button.

Here is the best way to make a button that changes when your mouse hovers over it (And yes it uses CSS! Which keeps your website code nice and clean, and Search Engines Love you.) This CSS button technique is also 100% valid CSS and HTML!

First you make one image that has two versions of your button: 1)"Up" and 2) "Hover" side by side. Like this:

(This button used courtesy of www.tophorseconnection.com)

The Reason you put the two images into one image is so that the "Hover" image is loaded at the same time that the "Up" image is.

Now we need to to create the HTML. All you do is add a button class to an anchor:

<a href="#" class="button">&nbsp;</a>

The button's CSS can become a little more complicated, and sometimes (you never know when it will strike) Internet Explorer won't do what you want... So here is the CSS that I created for this css button class:

a.button {
display:block;
width: 157px;
height: 46px;
background: url("../images/button-home.gif") no-repeat;
}

a.button:hover {
background-position: -170px 0
}

As you can see from this sweet CSS button, all you do is give it the correct width and height for the button in the image, and include the button image as a background with a "no-repeat." Then when someone hovers over the button, the background image moves 170px to the left! This saves you from having to load a new image!!!

Click Here to See this CSS Button Technique in Action!

More Information about this CSS Button Technique

Disabled CSS Buttons

Yes, there is so much that you can do with this technique. You can add a third image, that is grayed out (so that it looks disabled), and then apply that to a "disabled=disabled" input! (Yes you can use this same sweet CSS button technique on inputs!)

But Wait, There's More!

There is a problem with this example: you have to create a new image for every new CSS button. Here is what you do:

Instead of using an image with words on it, make an blank button image (without words). And put text between the anchors! You may need to add some extra CSS code to place the text where you want it on the CSS button.

This Sweet CSS Button Technique in use:

Here is a perfect example of this CSS Button technique reusing the same background: Database in a Flash (Yes, there is only one button image, that is reused throughout the entire program!)

Adding Animation to your CSS buttons!

I was having some trouble with a site that I developed a while ago, because the main navigation bar was made with Flash, and Internet Explorer users had to click twice on the navigation bar to get it to work. (There's a rant for another day =]) So I was stuck with how to make this sweet flash navigation bar into CSS and HTML.... This it struck me! Just a couple days ago I came up with this sweet idea using this very technique! I made a button just like above, except it was an animated gif, and the "Up" image was motionless and the "Over" image was animated! You can check it out at Fiditz.com!

-Thats all for today!
-Ashton Sanders

CSS Zen Garden

What is CSS Zen Garden?

It's a great idea, thats what it is. It's the ultimate Test of a CSS Designer. They have one basic HTML file, that is free to download, but you're not allowed to change it. The only thing you are allowed to change is the css (which is all you need), and people create the coolest designs using only CSS!

Introduction to Cascading Style Sheets

HTML is very functional, and you can do a lot with it, but there are two large down sides to it. It's purposes is solely for formatting, and it clogs up your HTML documents with a lot of code. Adding a Cascading Style Sheet to your website not only makes it way easier to format( and change at a later date). It also simplifies to the code like nothing else.

I recently did a Search Engine Optimization on a site called: Clear Lake Guide Service. The previous website used about 100 lines of code for the header... Using CSS, I cut that down to 20 lines of code. It keeps the Search Engines happy, and the website designers happy.

So needless to say, you can do almost anything with CSS!

Now back to CSS Zen Garden:

Zen Garden takes submission from website Designers from all over the world. And every design looks like a completely different website, even thought the XHTML is EXACTLT the same as all of the others! Right now they are getting close to 1000 submissions! If I have a free hour, I'll throw one together as well.

"CSS makes the internet spin a little bit lighter."
-Ashton Sanders

Website Design Thoughts

I just started working on the design process for four different websites. I've done so many website designs, I've started doing some thinking about how to imporove my website design skills.

My favorite website designers are from Rigney Graphics. These guys are truly amazing! They did the website for the Rose Bowl and for my old Boy Scout Council: San Gabriel Valley Council. Both of those sites are just amazing.

The Boy Scout Council's website design is different on almost every page, and is very pleasing to the eye. It's got so many pictures on every page, and is so many pages, I could spend forever clicking though the pages.

Another Website that Rigney Graphics designed is TXL Films. Taron Lexton told Rigney to just make something cool, and they created that! Another amazing piece of work.

I strive to create website layouts like them.
-Ashton Sanders

CSS Difficulties - Centering Images

As most designers know, there is a difference between Internet browsers. Internet Explorer and Firefox displays websites differently. Some differences are hardly noticeable, and others are huge.

From my experience, Firefox follows HTML and CSS rules to the letter while IE only follows most of them. Here is an example I ran into today having to do with Centering Images using CSS:

Using CSS to Center Images:
I have the same image three times. Here is the image:

As you can see it is just a simple 2x26 pixel image. In the following link example, I have this same image centered three different ways.

CSS Image Centering

If you are viewing this in Firefox, those three images will create one perfectly centered, two-pixel wide, vertical line (as it should). But in Internet Explorer, the bottom two images move to the left one pixel.... I would ask Micro, "Why?" But I'm sure I wouldn't get an answer.

Three Cheers for open source!

BTW, Here is the Code for the three above images, so you can tell the different centering techniques that I used:

This one works correctly in both browsers:

<div style="background: url(http://www.websitesinaflash.com/samplepages/wkd/images/button-div.jpg) center no-repeat; height:20px;"> </div>

These two don't work correctly in Internet Explorer:

<div align="center"><img src="http://www.websitesinaflash.com/samplepages/wkd/images/button-div.jpg" alt=""></div>

<div style="text-align:center; margin:0 auto"><img src="http://www.websitesinaflash.com/samplepages/wkd/images/button-div.jpg" alt=""></div>

Enjoy,
Ashton

Switching CSS on the Same Website

As I was doing some CSS research yesterday, I came upon a site that really impressed me. This site was primarily Red. It had a page called "skins". "Skins" usually mean what the website/program look like. For example, Trillian messaging program is always the same program, but you can change the way it looks by getting new skins. Here are a couple skins from their website:



Now this kind of confused be, because a website will always have one look, and you have to actually edit the site to change that, right? Wrong! On this guy's "skins" Page he had three buttons and when you clicked on them, it totally changed what the page looked like!! So of course I learned all I could about it, and here is what I have to share with you.

You can view his site here.

Here is the code:

You need two (or more) different style sheets to use for the same website. You will include it in the header like this:

<link rel="stylesheet" type="text/css" href="asset/stile.css" title="metrostation" media="screen" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="asset/cielo.css" title="cielo" />

This is the javascript that needs to be included in the page:

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}

Then all you need to do is create this simple anchor on your website that will switch themes to that CSS document(You will need to make a different button for each different CSS):

onclick="setActiveStyleSheet('cielo', 1);return false;"

That is freaking the coolest thing, with endless possibilities. Once I have duplicated this on mywebsite, I'll be sure to make a post so you can find it!

-Enjoy,
-Ashton Sanders

Internet Explorer CSS Tip

Beginners Note: The main purpose of CSS, or Cascading Style Sheets, is to add color and life to a website. The main use for HTML, or Hyper Text Markup Language, on the Internet is to create the format or layout of your website. (Note: It is quite possible to create two identical websites, one in only HTML, and one with almost no HTML formatting and lots of CSS.)

Many Search Engine Optimizers will tell you that the more CSS you use the better. The reason for this is simple: If you created a web page only in HTML, a search engine would have to index 300 lines of code (lets say), while on the other hand, if the same website was formatted with lots of CSS, you would only have 50-100 lines of HTML for the search engine to index. So the search engine would index almost only textual information, and very little code. And in theory, the search engine will think that you are a much more important resource for it to index.

As any Website designer will tell you, Internet browsers can react very differently to the same piece of CSS code. And since a vast majority of the public use Internet Explorer, it's very important for your website to look good in that browser. Unfortunately, this browser doesn't listen to CSS directions as rigidly as FireFox, the next most popular Internet browser. (Internet Explorer Vs. FireFox)

Now for the Internet Explorer CSS Tip:

Lets say you have this piece of CSS code:

.text {
padding-top: 5px;
}

And this is your HTML:

<div>Welcome to the HTML Class</div>
<div class="text">Today we will be learning about HTML</div>

And for some reason the freaking Interent Explorer won't listen to your css. No matter what, it just refuses to add padding in between the two <div>s. There are many things you can try to get it to work. You can change it to "margin" or change the distance to 70px. Nothing happens. Believe me... one of the most frusturating things in the world... second only to stupid people... maybe.

Well behold there is something else you can try: be more specific when you define your selector (.text). Try this:

div.text {
padding-top: 5px;
}

I've found that Internet Explorer takes much more kindly when you are more specific with your CSS defining.

Another CSS Note I thought I'd throw in as a bonus:

I realized that almost none of the CSS tutors on the Internet tell you about this extremely useful CSS syntax that can help you to be more specific. Lets take this example. You have a 100 page site with lots of pictures that you want to validate. Unfortunately, a couple of your pictures don't have an "alt" tag (which will create an error in almost all HTML validators). The solution is use this CSS code:

img[alt] {
border: 5px solid #FF0000;
}

This code will put a 5px red border around ever image that has an alt. This will make it easy for you to scan through your site and easily view images that are and are not properly formatted.

This is how it works: After the HTML tag (selector) and inside the brackets [ ] put any atribute for that HTML tag. You can also put the attibute and that atributes variable. Like this:

img[alt="Websites in a Flash"] {
border: 2px solid #FF0000;
}

With that code, any image that has the alternate text of "Websites in a Flash" will have a 2px red border around it.

-Enjoy
-Ashton Sanders

PHP 301 Redirect: Moved Permanently

Through years of programming websites and Internet database software, etc. I've decided to work mostly with PHP. PHP is a server-side scripting language that helps to create interactive websites. It is very useful for creating dynamic pages. (Pages that have one format but fill in different information depending on what information it is given.) This is common in any online store. Every product has the exact same layout, but it has different pictures, and words.

A great thing about PHP is it's free. It's largest server-side scripting language competitor, Microsoft's ASP, isn't. The PHP syntax is widely used and is very similar to C and Perl.

If I ever have a question about PHP or need information, I always go to http://W3Schools.com. It's also a great place for beginner programmers to get their foot in the door.

Here is how to us PHP code to make 301 Redirects:

301 Redirect: Moved Permanently
This code is for page redirecting. If you ever change a page name on your website, or take it down, you need to redirect that link to another page. This is because if you've had that page up for any period of time, the search engines like google.com or yahoo.com still think that it's there. Or another site may be linking to it. This will save visitors from getting lost and never seeing your site when they cliked on your link.

Here is the PHP code:

<?
header("HTTP/1.1 301 Moved Permanently");
header("location: http://www.yoursite.com/newpage/newfile.php");
exit();
?>

301 Redirect to "www."
This code I programmed because I wanted to make sure that whenever someone comes to my site, they come to the "http://www.websitesinaflash.com" (NOT: "http://websitesinaflash.com") So now whenever someone types in my website name without the "www." It will automatically redirect.

"Who Cares if there is a 'www.' in front of your website or not?
The biggest reason for this is so that search engines don't index two version of the same page. For example, if a Search Engine's bot find a link to my sight that doesn't have the "www." It will index the entire site without it. And if that happens, I'll have two exact duplicates of my website.

"Wouldn't that be a good thing?"
No. Search Engines will ding you if you have duplicate content. They see it as an attempt to cheat the system. I knew a man who changed the hosting and domain name for his website. But he didn't take down his old site. After a couple months, his old site which had had 3-4 Google Page Rank, now had 0 (zero). He realized this and took down his old site, and after half a year, he was back to normal.

Here is the PHP code:

<?
if($_SERVER['HTTP_HOST'] != "www.websitesinaflash.com")
{
header("HTTP/1.1 301 Moved Permanently");
header("location: http://www.websitesinaflash.com" . $_SERVER['REQUEST_URI']);
exit();
}
?>

And there's my two cents on 301 Redirecting with PHP.

-Enjoy
-Ashton Sanders

Product Comparison - Dreamweaver MX and 8

For the last 4-5 years I have been using Dreamweaver MX for most of my website design and Internet work. It was a great program in the beginning because I could create a page using tables in the design view, and then I could look at the code, and Dreamweaver MX would tell me the code that they used to create the page.

So if you are looking at learning HTML and how to make websites with tables, Dreamweaver is a great choice.

I recently upgraded to Dreamweaver 8. There are a number of key difference in this upgrade which make it 10x better than it's predecessor: Dreamweaver MX.

Websites Transfer:
The first thing that I noticed when I opened my Dreamweaver 8 for the first time is that it saved all of my sites from my earlier Dreamweaver, so I didn't have to spend a couple hours transferring all of my sites to the new Dreamweaver. I didn't actually have to do anything to start working on my website design or making corrections on the Internet. It was good to go.

File Activity Box:
The second this is when you are uploading something using MX, you can't do anything else. So if you have a couple videos to upload, a pop up window appears and you can't use Dreamweaver at all as long as that pop up window is in your way. You have to wait for them to finish uploading before you can do anything. In Dreamweaver 8, the window that pops up is entitled "Background File Activity." And it is just that. It works in a separate screen allowing you to edit open documents and continue working. (Note: Your computer can only have one connection to an FTP site at a time, so while you are uploading something you can't do anything else with the same or another remote server.)

Server Disconnection Notice:
On of my biggest annoyances with Dreamweaver MX, is that while I was working on a website design or Internet page, the connection to the remote server would get lost, and it would lag my whole computer for a couple seconds and then give me a pop up that read: "You have been disconnected to the remote server." Then when you clicked the cancel button, it would try to connect again. Truly a large waste of time for everyone. Thankfully, they removed this pop-up window in Dreamweaver 8. Now your connection to a remote host can last for hours, and if you get disconnected, the button will become unselected, and thats it!

Use of stylesheets:
As any Search Engine Optimizer knows, tables and commands can be some of the worst things for a website as they can clutter up your code, and make it difficult for search engines to index your entire site. In this new Dreamweaver 8, not only does it understand CSS very well in the website design view, but it you can tell it to format your page with CSS or depending on your preference. This is a great tool, because Email Newsletters should not use CSS includes, as they will sometimes get lost. So if you're doing a newsletter, you can just switch over to the tag for any visual work you need to do in the design section. It also knows all of the CSS commands, making it easier to learn new CSS!

Error Detection:
Dreamweaver 8 now has a great HTML error detector. It will tell you almost immediately any obviously incorrect tags you have on your page. A great tool for creating HTML and CSS Valid Pages.

So as you can tell, if Dreamweaver MX was okay, Dreamweaver 8 is AMAZING! and I can't wait to see what Adobe has in store for us with Dreamweaver 9! On that note, I cannot believe that Adobe has bough Macromedia! One of the two largest Internet program creator are now one. From PDF's to Flash, you get it all from Adobe now... But thats a subject for another post.

Until Then,
-Ashton Sanders