Website Designers and Webmasters

Dedicated to all the tasks Webmasters, Website Developers and Website Designers find themselves facing.

By: Ashton Sanders

CSS Scroll Box instead of iFrames

May 1 2008

Filed under: CSS,HTML,Website Design

You’ve probably heard “iframes are horrible with search engines.” Well, they are.

I recently had a client want me to create scroll boxes for their website so they could fit 1000+ words into a 300×457 pixel scroll box. How can I create this scroll box without the iframe? Well, you are about to find out.

CSS Scroll Box Instead of an iframe:

We’re going to use a css property called “overflow,” and by setting it to auto, it turns a normal div into a scroll box!

#scrollbox {
width:300px;
height:457px;
overflow:auto;
}
<div id=”scrollbox”> *enter endless amounts of words*</div>

So what just happened there is we assigned a div with a fixed width and a fixed height. Normally, if you had an element (ie image or text) that was too big for those dimensions, the element will be pushed larger. By adding the CSS scrollbox property of “overflow:auto” we tell the div to create a scrollbar instead of changing the size of the div.

The CSS property “overflow” does have a possible value of “scroll”, but this adds a permanent scrollbar to the bottom and right-hand side of the div even if you don’t need them. This “auto” value is great because if your content isn’t larger than the div, no scrollbars will appear. And if your content only stretches horizontally, you will only see a horizontal scrollbar!

That’s it!
Ashton Sanders

By: Ashton Sanders

.htaccess – PHP on HTML/HTM Pages

May 29 2007

Filed under: htaccess,HTML,PHP

I went into more detail about what the different processes are of adding php to a website programmed with *.html pages in this earlier htaccess post.

Here are a few more .htaccess lines that will enable php on your server. (Different servers require a different line of code.)

AddType application/x-httpd-php .html .htm

AddType x-mapp-php5 .html .htm

AddHandler application/x-php .html .htm

AddHandler x-httpd-php5 .html .htm

AddHandler x-httpd-php .html .htm

Check out my other .htaccess posts.

-Ashton Sanders

By: Ashton Sanders

HTML – Premade State Drop Down Menu

Apr 6 2007

Filed under: HTML

I came up with a great idea (which a lot of people have already thought of =]) to put all the html/php code that I create through my web adventures somewhere so people can grab them. So this will be my first post with content of that nature.

Here is the HTML Code for a State Drop Down Menu. This Includes all 50 states with value=”MT” and id=”MT”:

<select name=”state” id=”state” size=”1″>
<option value=”AL” id=”AL”>Alabama</option>
<option value=”AK” id=”AK”>Alaska</option>
<option value=”AZ” id=”AZ”>Arizona</option>
<option value=”AR” id=”AR”>Arkansas</option>
<option value=”CA” id=”CA”>California</option>
<option value=”CO” id=”CO”>Colorado</option>
<option value=”CT” id=”CT”>Connecticut</option>
<option value=”DE” id=”DE”>Delaware</option>
<option value=”DC” id=”DC”>Dist of Columbia</option>
<option value=”FL” id=”FL”>Florida</option>
<option value=”GA” id=”GA”>Georgia</option>
<option value=”HI” id=”HI”>Hawaii</option>
<option value=”ID” id=”ID”>Idaho</option>
<option value=”IL” id=”IL”>Illinois</option>
<option value=”IN” id=”IN”>Indiana</option>
<option value=”IA” id=”LA”>Iowa</option>
<option value=”KS” id=”KS”>Kansas</option>
<option value=”KY” id=”KY”>Kentucky</option>
<option value=”LA” id=”LA”>Louisiana</option>
<option value=”ME” id=”ME”>Maine</option>
<option value=”MD” id=”MD”>Maryland</option>
<option value=”MA” id=”MA”>Massachusetts</option>
<option value=”MI” id=”MI”>Michigan</option>
<option value=”MN” id=”MN”>Minnesota</option>
<option value=”MS” id=”MS”>Mississippi</option>
<option value=”MO” id=”MO”>Missouri</option>
<option value=”MT” id=”MT”>Montana</option>
<option value=”NE” id=”NE”>Nebraska</option>
<option value=”NV” id=”NV”>Nevada</option>
<option value=”NH” id=”NH”>New Hampshire</option>
<option value=”NJ” id=”NJ”>New Jersey</option>
<option value=”NM” id=”NM”>New Mexico</option>
<option value=”NY” id=”NY”>New York</option>
<option value=”NC” id=”NC”>North Carolina</option>
<option value=”ND” id=”ND”>North Dakota</option>
<option value=”OH” id=”OH”>Ohio</option>
<option value=”OK” id=”OK”>Oklahoma</option>
<option value=”OR” id=”OR”>Oregon</option>
<option value=”PA” id=”PA”>Pennsylvania</option>
<option value=”RI” id=”RI”>Rhode Island</option>
<option value=”SC” id=”SC”>South Carolina</option>
<option value=”SD” id=”SD”>South Dakota</option>
<option value=”TN” id=”TN”>Tennessee</option>
<option value=”TX” id=”TX”>Texas</option>
<option value=”UT” id=”UT”>Utah</option>
<option value=”VT” id=”VT”>Vermont</option>
<option value=”VA” id=”VA”>Virginia</option>
<option value=”WA” id=”WA”>Washington</option>
<option value=”WV” id=”WV”>West Virginia</option>
<option value=”WI” id=”WI”>Wisconsin</option>
<option value=”WY” id=”WY”>Wyoming</option>
</select>

-I hope that makes someone’s life easier
-Ashton Sanders

By: Ashton Sanders

CSS Button – (One SWEET CSS Button)

Apr 4 2007

Filed under: CSS,Website Design

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 started working with a new client who’s menu bar was made entirely with JavaScript, and even though he had 10 or so pages, Google only new about his home page.

HTML/Javascript 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

By: Ashton Sanders

SEO – Table Trick

Mar 30 2007

Filed under: SEO

It has been said that Search Engine Optimization “is not yet a science — it’s still an artform.”

I totally agree with that quote. Search Engine Optimization is hundreds of little things that you with your site to make it more search engine friendly. The table trick is one of those SEO things you can do to improve your rankings (however slightly) in the search engines.

Theory

Search Engines don’t usually index your entire page. They usually have a KB limit of how much it will index from each page, and it will probably value the information near the top of a page more than it does the information at the bottom.

Unfortunately, it is the style of the internet to have menu/navigation bars on the left side of the screen. Usually this means that the menu/navigation bar shows up in your code before the content of your web page. So the search engines have to sift through a bunch of formating code in your navigation before it gets to the meat of your site.

Here is where the table trick comes in:

Using this code, you will be able to have a left navigation bar that shows up below the content of your code. Here is the code:

<html>
<head>
</head>
<body>
<table>
<tr valign=”top”>
<td><!– leave this TD empty – it will disappear –></td>
<td rowspan=2>Put the text for the page here. </td>
</tr>
<tr valign=”top”>
<td>Put the Navigation Bar Here</td>
</tr>
</table>
</body>
</html>

That’s it! If you want to see a website that is currently using this trick, go to Front Sight.com.

The above quote and this table trick supplied courtesy of Jere Matlock of Words in a Row. Jere is the best SEO resource anyone could ask for. His site is full of useful Search Engine Optimization tactics and ideas. You can also check out his blog: JMblog.

Another fun quote he has on is blog is:

“If you can’t annoy somebody, there’s little point in writing.”
-Kingsley Amis

-Ashton Sanders

RSS

Where Am I?

You have found the semi-coherent ramblings of Ashton Sanders: a website designer, developer and webmaster. This is primarily Ashton's place to save notes about techniques and things that he learns in his never-ending conquest of the internet. Hopefully it's coherent enough to be useful to you too.

Subscribe:

Enter your email to get automatic emails whenever Ashton posts on the blog.

Email:

Advertisers:

Email Marketing $19/Month! OIOpublisher Learn how to make Money from Blogging Hillarious, High-Quality Shirts for $6/each Great Book Keeping and Invoicing Software Advertiser Here

Tags and Categories

Links

Blog Roll