This brief article explains how you can allow CodeIgniter to accept any file type via its upload functionality. You’ll find the tutorial here: CodeIgniter Uploads, allow any filetype.

It’s often a good idea to keep two versions of your CSS files. The first is the version you work on and make changes and the second is the version you upload and use live on your site. In the first you’ll want to keep all the added whitespace and formatting but in the second you want none of that. The stylesheet you use live should be as small, lean and efficient as possible. One of the ways to get it there is by using one of the many CSS minifiers which strip out all the unnecessary bits. Doing a Google search for “minify CSS” will bring plenty of online tools which will minify, compress and clean your stylesheets. Some are even capable of combining multiple CSS properties into the shorthand format.

This is definitely worth trying. You may just save yourself some bandwidth and improve your sites loading speed. What more do you want?

You’ll be glad to know that in order to start using HTML 5 you don’t really have anything new to learn as far as CSS goes. You’re able to style all of the new HTML 5 elements just like you would any other HTML element you’re used to.

Styling HTML5 elements

For example, to style the header element you’d simply have something like the following.

header
{
	height: 100px;
	background: #CCC;
	padding: 20px;
}

Styling HTML5 elements in CSS really is that simple – it’s just what you’re used to. If you get the chance you should definitely take a look into HTML 5 and explore what it can do for you and your web sites.

Sometimes it’s good to be able to start from scratch and get rid of all of these preset CSS defaults. Why would you want to do this? Well, clearing the defaults and starting from scratch is much easier than hunting down which property is making your menu push a few pixels out of place.

Reset your CSS

Although you could go through each element individually and reset its individual properties, why not save yourself some time and effort by using the following CSS to reset every element.

*
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

You should include this CSS snippet into the top of all of your stylesheets.

Inline CSS

Inline CSS is the term used to describe when CSS is appied to an element as one of the elements attributes. You can apply any CSS properties within the ‘style’ attribute of any HTML element.

My web site name

In the above example we’ve applied two CSS properties to the header div, height and background. You can include any CSS properties you like here; simply list them one after the other but make sure to include the terminating semi-colon at the end of each property.

Document CSS

By making use of the class and id attributes of your HTML elements you’re able to style them using CSS and have all of your CSS properties grouped in a single location.

#header
{
	height: 100px;
	background: #000;
}

My web site name

In the CSS used in this snippet we’ve applied a couple of CSS properties to the element with an id of ‘header’ as defined by the ‘#header’ section. Now, whenever we make changes to the CSS properties the div with id ‘header’ will reflect those changes. The advantage of this approach is that all of your CSS can be found in a single location. Also, by using the class identifier you can apply the same CSS properties to multiple elements by making just a single change.

External CSS file

If your CSS is starting to become quite lengthy you may want to consider breaking it away from your HTML markup. This can be done by defining your CSS styles in a completely seperate file, let’s say style.css. You then make a call to that file and the browser will load up your stylesheet and apply it to the HTML document.

Assuming you’ve placed your CSS within a file called style.css you simply use the following tag within the head tag of your web page.

This allows you to consolidate all of your CSS into a single file which you can then include into all of your web pages. Another advantage of this approach is that it reduces the size of your HTML web page making it much easier to read and navigate when editing its code.

In reality however the number are never quite that easy and for the majority of web site owners trying to monetize their sites using Google AdSense an RPM of $5 is a distant dream and seems like an unachievable goal. Whilst it’s not uncommon for people to see their RPM rise well above $5 it is a reasonable and realistically achievable target.

Increase your earnings by improving your RPM

Here are five simple tips on how to increase your Google AdSense RPM and therefore earn more revenue from your sites.

1. Place your AdSense units abpve the fold. If you’re ad units are all shown right at the bottom of the page below the fold it’s likely that the majority of your visitors won’t even get to see them never mind click on them. You should aim to have your AdSense ad units above the page fold and positioned in line with your page content.

2. Blend the colours into your site. By matching the colours of your AdSense ads with the colour scheme of your site users are much more likely to click on the ads. An effective and proven way of boosting your click through rate is to set the ad unit background and border to be the same colour as your web pages background. By keeping the colours consistent the ads will soon look as if they’re a part of your content and will be much more attractive to your visitors.

3. Concentrate on getting targeted traffic. It may sound crazy to not want more traffic but there comes a point where you should think about the quality of the traffic your site is getting. If you’re running a site about disco shoes and the majority of your visitors are only interested in dog toys then they’re simply not going to click on your adverts. This means that your pageviews may have gone up but both your click through rate and RPM will go down. I’m not saying that you should block any untargeted traffic – just try to make sure you’re getting links and exposure from sites related to your own.

4. Move your higher earning ads to the top. From my experience one of the best performing AdSenses ad formats is the 300×250 and the 336×280 rectangles. You should use channels to identify which of your ad units are performing the best and move these above the fold and into view of the visitor. It makes sense – if a particular ad unit is earning more than all of the others it should be immediately visible to the end user so that if they do decide to click on one of your ads you’re getting the most as you can out of it.

5. Keep trying new things. Once you’ve found a good mixture that works – the perfect position, the best colour scheme and the highest paying ads in the most important places you shouldn’t just stop. AdSense revenue over time fluctuates dramatically and can change in very short periods of time. You should constantly keep refreshing your AdSense placements and keep experimenting with new positioning, colour schemes and order.

If you stick at it your Google AdSense RPM should start to increase and you’ll also begin to see improvements in your revenue. The important thing here is to keep a close eye on the numbers and check them regularly. Increasing your AdSense RPM to $5 and above is achievable and your potential earnings are vastly higher if you take the time to optimize.

Absolute centered image markup

This is the markup we’re using.

Nothing difficult there, right?

Absolute centered image CSS

Now for the interesting part – the CSS.

div.myelement
{
	width: 500px;
	height: 500px;
}
div.myelement img
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 250px;
	height: 250px;
	margin-left: -125px;
	margin-top: -125px;
}

What we’ve done here is set the left and top margins of the image to be half of the image size. With the ‘top’ and ‘left’ absolute positioning doing the job of centering the top left corner of the image the margins give it that extra push to align it in the center.

Let’s take a look at the CSS shorthand for using backgrounds.

CSS background properties

This is how you’re probably used to writing background styles in CSS.

.myelement
{
	background-color: #FFF;
	background-image:url('/path/to/file.png');
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
}

As you can see from the snippet above, we’re applying five CSS properties to this element, all of which are to do with the background. Wouldn’t it make sense to group all of these together?

CSS background shorthand

Grouping them together is easily done.

.myelement
{
	background: #FFF url('/path/to/file.png')no-repeat center fixed;
}

Using the background shorthand format we’ve combined all five properties into a single ‘background’ property. You’re still able to use it as you like and it will still support the other possible values available in the first example.

Another important issue with regards to web design is appearance – how your website looks and feels to the user. After all, if your site doesn’t look good then it won’t do much good for your site as a brand and may even make visitors go elsewhere.

This tutorial covers a very useful CSS trick which both looks great and is great for SEO purposes. Basically, we’re going to create a website header using the trusty h1 tag but style it with your sites logo so that it looks brilliant.

Okay, let’s start with the XHTML markup.

CSS Tutorials

What we have above is quite simple. A div with an id of “siteheader”, inside it a h1 tag. Within the h1 tag is a link with text anchor text of that link surrounded with span tags.

Now for a little CSS.

#siteheader h1
{
	width: 200px;
	height: 80px;
}
#siteheader h1 a
{
	display: block;
	width: 200px;
	height: 80px;
	background: url('logo.png');
}
#siteheader h1 a span
{
	display: none;
}

Can you see what’s happening? It’s quite simple really.

Firstly we are giving our h1 and link a fixed width and height, this should be the exact same size as our site logo image. Then, by setting the background of our link to be our logo the logo shows up in place. If we had left it there the logo would be visible but the links anchor text would be put over the top which is no good. So, to solve that we use a span tag which then in the CSS is set to not be displayed.

This works well because search engine spiders only look at raw HTML and do not apply any of the CSS rules which our browsers use. This means that when a spider comes and visits our site they see the optimized h1 tag packed with our site name and keywords. But then, when a regular visitor views our website they’re presented with a nice looking logo.

You don’t have to stop just there. You can use this CSS trick to make almost anything look that little bit better. Have a play around and do some experimenting to see what you come up with.

That’s where BacklinkApp comes in! BacklinkApp is a free backlink tracker tool built specifically to help you track your links and help you make the most of your link building efforts. This service tracks a wide variety of metrics including PageRank, Alexa rank, page download time, number of outgoing links and so much more. All you have to do is add your site and then put in your link details as you aquire them.

BacklinkApp will automatically check all of your sites and all of your links to make sure that your links are active and where they should be. If for some reason your links have been removed you will receive an email alert telling you what’s happened.

So, if you’re trying to build backlinks to your web site I can highly recommend that you take a look at this link management tool.