Noob Flash

Archive for the ‘CSS’ Category

This is a simple way to preload a few images using only CSS.

#imagePreload {
       display: inline;
       height: 0px;
       width: 0px;
       background-image: url(imagePath1.extension);
       background-image: url(imagePath2.extension);
       background-image: url(imagePath3.extension);
       background-image: url(imagePath4.extension);
       background-image: url();
}

If you’re like me, you get tired of seeing those ugly query strings tacked onto your website url. On really nice (and easy) solution for this is to use Apache Mod_Rewrite. This generally only requires adding a few lines to your .htaccess file. When I started trying to create my first SEO friendly URLs, I could not get my website to recognize any of the code in my .htaccess file. Obviously, this is was very frustrating. After a couple of weeks of searching the internet and wondering why my “perfect” code wasn’t working, I realized that my GoDaddy PHP hosting account was being hosted on a Windows server running IIS7. The answer to my problems hit me like a ton of bricks! Windows does not support or use .htaccess files! Once I switched to a Linux server my .htaccess code ran perfectly.

The code below will internally redirect http://www.yoururl.com/location/texas/dallas to http://www.yoururl.com/index.php?state=texas&city=dallas. The SEO friendly URL will be displayed but the page will be executed as if the complete, query string laden url was used.

The [L] at the end of each line tells the server to stop executing the .htaccess code if the previous line was successful.

–

Options +FollowSymLinks
Options -MultiViews
RewriteEngine on

RewriteRule ^location/([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)$ index.php?state=$1&city=$2 [L]
RewriteRule ^location/([a-zA-Z0-9_-]+) index.php?state=$1 [L]

–

For More Apache Mod_Rewrite rules, check out the Apache Rewrite Cheatsheet.

A few day ago, I was doing some CSS styling and ran across something that I thought would be useful.

If you ever want to style multiple HTML input elements separately using CSS, you just need to access the type attribute.

For Example, if I want to set the text color of my text field to white, but I want the text color of my submit button to be black, I would use the following code:

input[type="text"] { color: #FFFFFF; }
input[type="button"] { color: #000000; }

It’s really that simple!

P.S… sorry for the long delay between posts… my wife and I have our second kid on the way so things have gotten very crazy for us!

Changing the style of an object is as simple as finding the object on the page, then setting the new style value. Use the code below as an example.

//Find the div you want to update
var divArray = document.getElementById('myDiv');
//Set the width style
divArray.style.width = '300px';

CSS attribute names are slightly different when used in JavaScript, so you will need to reference the list below before you get frustrated and pull your hair out.

There is a Min-Height attribute in CSS. It is useful, but not well supported by IE 6. The following is the best way to set a Minimum Height on a div that is cross-browser compatible.

min-height:200px;
height:auto !important;
height:200px;