CSS Scroll Box instead of iFrames

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 300x457 pixel scroll box. How can I create this scroll box without the iframe? Well, you are about to find out.

Here is how you use CSS to create a scroll box instead of an iframe:

We're going to use a css attribute 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>

That's it!
Enjoy

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

CSS - Paragraph Indent Text

"Can you indent the paragraphs?" This can be a very dreaded request to a web designer who doesn't know better. This may mean that you have to go through and add

&nbsp; &nbsp; &nbsp;

to the front of every paragraph... or if you are a CSS Master, you know about text-indent!

All it takes is a

<style type="text/css">
p
{
text-indent: 20px
}
</style>

And then all of your paragraphs look like this, everyone is happy and you are done with the website 4 hours earlier! Easiest way to intent paragraphs or text on the planet! Thank you CSS for being so cool.

-Ashton Sanders

.htaccess - PHP on HTML/HTM Pages

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 x-mapp-php5 .html .htm

AddHandler application/x-php .html .htm

AddHandler x-httpd-php5 .html .htm

AddHandler x-httpd-php .htm .html

Check out my other .htaccess posts.

-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

HTML - Premade State Drop Down Menu

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