If you don’t understand anything in this article, either leave a comment with a question, or refer to the previous post (the one before my apartment vid). This ended up being pretty lengthy, so grab a glass of water and get comfortable

The best element to use for positioning/padding/margins etc is the <div> tag. Next easiest is the <p>, and tags like <span>’s and <a>’s can be moved around and have the height changed with a bit of extra work.

We’ll start with what you do for <div>’s and <p>’s:

Width and Height:

.pixels
{
	width: 400px;
	height: 400px;
}
.percentages
{
	width: 70%;
	height: 50%; /*Though % heights don't always work as expected */
}

<div style='width: 400px; height: 300px;'>Test</div>

Padding

Padding is just that, it’s extra space that pads the outside of your element, meaning more space between the edge and your content. You can use “padding:” or “padding-left”, “padding-top”, etc.

CSS

.all_around
{
	padding: 20px;
}
.left_right
{
	padding: 20px 0;
}
.top_right
{
	padding: 20px 20px 0 0;
}
.left_pad
{
	padding-left: 20px;
}

Examples

<style type='text/css'>
.mydiv
{
	padding: 2px 10px;
}
</style>
<div class='mydiv'>Test</div>

Tips
If you just enter one value, ie the all_around class above, it will pad all four sides.
If you specify two numbers like the left_right class, it will pad the top and bottom with the first number, and left and right with the second.
If you specify all four numbers like the top_right class, it will put the padding in clockwise order. So top, right, bottom, left.

Margin

Margin is very similar to padding. The difference is margin is the amount of space between each element, while padding is extra space inside the element. This makes a big difference when you start adding background colors and borders. Like padding, you can use “margin”, “margin-right”, “margin-bottom”, etc

CSS

.all_around
{
	margin: 20px;
}
.left_right
{
	margin: 20px 0;
}
.top_right
{
	margin: 20px 20px 0 0;
}
.left_pad
{
	margin-left: 20px;
}

Examples

<style type='text/css'>
.mydiv
{
	margin: 10px 0;
}
</style>
<div class='mydiv'>Test</div>

Tips
The order of top, right, left, bottom is the same for this. And again, use padding when you have a background color for your element and you want some space so the text isn’t smushed up against the edge, use margin when you want space between elements.

Centering an element

<style type='text/css'>
.container
{
width: 800px;
margin: 0 auto;
}
</style>
<div class='container'>Whatever</div>

Just a random tip that I can’t really write a full blog post for, there’s an order to which elements can be inside which. Basically, don’t put a <div>, <p>, <h1> (h2, h3 etc) inside of a <span> or <a>

Well that was a lot of text, hopefully you’ll find some use out of some of it. Funny thing about me doing these tutorials/posts on CSS is CSS was the last thing I became fluent in, learned HTML -> PHP -> Javascript -> CSS.

Next up is more advanced positioning/padding for stuff like links and spans.

Walk-through from Austin Hallock on Vimeo.

When coding, I don’t use tables or tags like <font> (which most people tend to use). Why? Because the code can get really jumbled with that (you should see some of the stuff I have to deal with working on ILoveHits).

Not only that, but all the <font>, border=”0″, a ton of stuff that can be done with CSS is considered deprecated.

But most importantly in the new version of HTML (HTML5), the following WONT WORK:

With that said, I generally use <div>’s, <span>’s, <ul>’s and <p>’s the most, and tack on a class=”whatever” so it looks like <div class=”classname”>Content</div>

• <div>’s are essentially just blocks, or squares, in your webpage.
• <span>’s are kind of like <div>’s but they don’t cause a line break.
• <ul>’s are unordered list, so essentially, when used with <li>’s you can create bullets
• <p>’s are a paragraph…basically like a <div> but it adds some margin to the top and bottom.

  is the same as <div>

You have a few options for CSS…One you can have an external .css file and link to it with:

<link type='text/css' href='mycssfile.css' rel='Stylesheet' />

Or…You can have it internally in your .html file with:

<style type='text/css'>
	CSS goes here
</style>

And finally you can specify it for certain tags with style=’whatever’ so:

<div style='font-size:10px;'></div>

With the first two options, you can use 3 different things to change how your page looks.

The first is using the element type, so if I want all <div>’s to look the same way I would do:

div
{
	font-size: 14px;
	background-color: #111111;
	color: #ffffff;
}

The second option is to style certain classes (where you define <div class=’whatever’> To do this, you put a period before the class name in the css:

.whatever
{
	color: #333333;
}

Finally, you can style based on id’s. While classes can be used on multiple elements, id’s can only be used on 1 element. To style something like <div id=’whatever’> you would use a octothorpe (or for regular people, a pound sign):

#whatever
{
	font-size: 30px;
}

You’ll notice I use stuff like #333333 these are hex codes that represent specific colors, you’ve probably seen them before. To find which color is associate with which hex code, you can use a tool like this (also, feel free to take a look at the source of that to get a further look at CSS and HTML).

Let’s start off with some of the more basic CSS uses. Since you wont be able to use <font color=’green’> in HTML5, you’ll have to use CSS like below.

Fonts

font-family: 'Helvetica Neue', helvetica, verdana, arial;

font-size: 14px;

color: #111111;

<style type='text/css'>
.big_green_font
{
	font-size: 40px;
	font-color: green;
	font-family: helvetica, verdana, arial;
}
</style>

Background Colors

background-color: #111111;

<style type='text/css'>
.black_box
{
	background-color: #000000;
	color: #ffffff;
	width: 500px;
	height: 200px;
}
</style>

With each post in this series I’ll get a bit more advanced, so keep checking back! The next post will probably deal with dimensions, padding and margins. Again, if you have any questions, post them below.

Well, that’s just my opinion — based on past experiences (and the reason Mike and I have launched successful sites). And this is coming from a programmer (though I dabble in design).

I’m going to be starting a series of blog posts that will go into how to make your pages look better using CSS.

So…what’s good looking?

Of course, you might already know that, so the next couple posts of mine will go into the various tips and tricks to making something look good! It’s not just the physical appearance that matters either, the transitions between pages, and effects you have on each page plays a big part as well.

Let’s take a look at a splash page Mike Gartner just put out yesterday: Secret X. That page has only been rotating in Thumbvu, yet it’s gotten over 50 subscribers in 24 hours.

Why? It’s not because of the content, he doesn’t mention anything about what his secret project is … it’s due to how sexy the page looks. Sure it’s simple, but it stands out.

By the end of this series you’ll be able to make a page like that (and more) with ease.

I’ve noticed, no one is using the tracker script other than me, and I figured that might be because you have to upload the script and change permissions. That or I don’t have many readers

So if you’d like to use the URL trkr.com to shorten/cloak your links, you are welcome to! All you have to do is drag the link below into your bookmarks.

Shorten

Each time you want to shorten/cloak a page, just visit the page and click that bookmark. It’ll display the URL for you to use in the top right corner! The URL will look something like: http://trkr.me/9

I’ve made it as EASY as possible for you to do this.

All you have to do is put the below code where you want the Tweet This box to show, and that’s it! Of course, you’ll probably want to change the content of the tweet, so just change what’s in between the quotes after var tweet_content, so var tweet_content = “Your content”;. A couple rules for that, DO NOT start a new line, and if you put in quotes “ put a backslash \ before them. Also note that Twitter has a character limit of 140.

<script type='text/javascript'>
var tweet_content = "Want an easy way to add a \"Tweet This\" box to your site? http://austinhallock.com/short/16";
</script>
<div id='tweet_this' style='display:none;'></div>
<script type='text/javascript' src='http://www.austinhallock.com/tweet_this.js'></script>

You can see an example of this below. (If you’re in an RSS reader, this probably won’t show, so click here to see it.

Pretty cool huh?

If you want a bit of customization, you can add the following after var tweet_content = ‘whatever’;. The first will change the background color of the box, the second will change the font color.

var tweet_bgcolor = '111111';
var tweet_color = 'EEEEEE';

You can also allow the users to change what’s in their tweet by adding:

var tweet_textarea = 'T';

As always, let me know what you think!

I’ve always just used bit.ly for my URL shortening and cloaking, but I figured it was time to create my own service for this.

Of course, with you all in mind, I made it where anyone can use it, and made it dead simple to install. Here’s what you do (There’s a video at the end of this post if you don’t like reading).

First, download the zip file below. It’s just a folder with one file: index.php. Unzip the folder, rename to whatever you want your URLs to look like and upload it to the main directory of your site. If you want your URL to show up as http://domain.com/likes/1234 then rename the folder to “likes”.

Click here to download

Make sure the folder has the permissions 777. You can see how to do this in the video below.

Visit this page (it’ll be http://www.YOURDOMAIN.com/FOLDERNAME/). It will give you a link that you need to drag into your bookmarks bar.

Every time you want to shorten a page, just click that bookmark and a window will show up giving you the shortened link.

Each time your link it clicked, that’s logged, so this also works as a tracker to see how many people are clicking your links!

Click here to view a video on how the whole process works.

Let me know what you all think, and any suggestions for how I can improve this.

This can be really useful in emails you mail out to your list … you can have them click a link that brings up a page customized with their name.

Here’s an example of what the code below will do for you (with my name in there): http://www.austinhallock.com/splash/austin

Problem is (well, I guess this is a good thing for you) no one really does it even though it’s dead simple.

First, name the page mypage.php rather than mypage.html.

Next, when you send out an email linking to your page (assuming you’re using some auto-responder), link to http://www.yoursite.com/mypage.php?name={!firstname} — where I have {!firstname} you would put whatever code your auto-responder uses for the name.

In your page where you want the name to show up put

<?php if(isset($_GET['name']) && strlen($_GET['name']) > 0) $name = ucfirst($_GET['name']); else $name = "You"; echo $name; ?>

This will grab their name if it’s in the URL, capitalize the first letter of it (ie. austin turns to Austin) and output it. If their name isn’t in the URL, it will output “You” instead. If you want it to say something other than “You” just change what’s in the quotes there.

If you want it to show something other than “name” in the URL, for example you want it to look like: mypage.php?awesomeperson=austin just change all references of “name” in the above code to “awesomeperson”.

To get a bit advanced and have the URL look prettier like http://www.yoursite.com/mypage/austin you’ll want to edit the .htaccess file in the folder your file is in. If you already have a .htaccess file in that folder just open it up and edit it in whichever editor you use. Otherwise, create one — it’s just named .htaccess nothing else tacked on.

At the top of your .htaccess file you’ll need to put

RewriteEngine on
RewriteRule ^mypage(/|$)([^/\.]*)/?$ mypage.php?name=$2 [L]

Of course replacing “mypage” and “mypage.php” with the folder you want it to appear like it’s in, and the file name.

For example if you want yoursite.com/splash1.php?awesome=austin to show up as yoursite.com/splash/austin, you would change the first “mypage” to “splash”, “mypage.php” to “splash1.php” and “name” to “awesome”. You’d end up with something like this:

RewriteEngine on
RewriteRule ^splash(/|$)([^/\.]*)/?$ splash1.php?awesome=$2 [L]

Hope this helps, and as always if you have any questions post them in the comments!

The code below will determine the exchange a user is surfing, and output the name of the exchange, as well as the logo’s color. About 25 of the top exchanges are listed, returning the proper name (ie. thumbvu returns ThumbVu) and color. If they’re just viewing the page not in an exchange, it will return nothing (so you would get something like “HEY SURFER”).

What you’ll need to do first, is when you create your splash page, instead of having the name be something like splash.html, name it splash.php.

Where you want to put the exchanges name, put:

<?php echo get_exchange(); ?>

If you want the name to be all caps, put:

<?php echo strtoupper(get_exchange()); ?>

Here’s the function (put this at the end of your .php file). All of the exchanges are on my end, so I can update for new exchanges, and it will automatically add them for you (speaking of which, if you’d like your exchange added, post a comment below).

<?php
function get_exchange()
{
	//Parse the referrer url
	$url = parse_url($_SERVER['HTTP_REFERER']);
	//Grab the host
	$host = $url['host'];
	//Grab the domain from that
	$domain = explode(".", $host);
	$domain = $domain[count($domain)-2];
	//Grab the stuff to return
	$contents = file_get_contents("http://www.austinhallock.com/exchanges.php?domain=$domain");
	return $contents;
}
?>

If you want it all on your end so you can customize it a bit more, use the following function instead:

<?php
function get_exchange()
{
	//Parse the referrer url
	$url = parse_url($_SERVER['HTTP_REFERER']);
	//Grab the host
	$host = $url['host'];
	//Grab the domain from that
	$domain = explode(".", $host);
	$domain = $domain[count($domain)-2];
	/* Show specific names for hosts
	 * (doing this for proper capitalization and coloring)
	 * To add custom ones, if the domain name is www.thumbvu.com
	 * Do:
	 * $exchanges['thumbvu']['name'] = "ThumbVu";
	 * $exchanges['thumbvu']['color'] = "#F7931E";
	 */
	$exchanges['thumbvu']['name'] = "ThumbVu";
	$exchanges['thumbvu']['color'] = "#F7931E";

	$exchanges['easyhits4u']['name'] = "EasyHits4U";
	$exchanges['easyhits4u']['color'] = "#EB8B00";

	$exchanges['startxchange']['name'] = "StartXchange";
	$exchanges['startxchange']['color'] = "#FF0000";

	$exchanges['traffic-splash']['name'] = "Traffic Splash";
	$exchanges['traffic-splash']['color'] = "#52D652";

	$exchanges['hit2hit']['name'] = "Hit2Hit";
	$exchanges['hit2hit']['color'] = "#FB874C";

	$exchanges['hitsboosterpro']['name'] = "HBPro";
	$exchanges['hitsboosterpro']['color'] = "#171442";

	$exchanges['hitsafari']['name'] = "HitSafari";
	$exchanges['hitsafari']['color'] = "#E96827";

	$exchanges['tezaktrafficpower']['name'] = "TTP";
	$exchanges['tezaktrafficpower']['color'] = "#CB0000";

	$exchanges['ilovehits']['name'] = "ILoveHits";
	$exchanges['ilovehits']['color'] = "#1668A4";

	$exchanges['trafficwitch']['name'] = "Traffic Witch";
	$exchanges['trafficwitch']['color'] = "#D87204";

	$exchanges['traffictaxis']['name'] = "Traffic Taxis";
	$exchanges['traffictaxis']['color'] = "#040404";

	$exchanges['soaring4traffic']['name'] = "Soaring4Traffic";
	$exchanges['soaring4traffic']['color'] = "#096FB1";

	$exchanges['trafficera']['name'] = "Traffic Era";
	$exchanges['trafficera']['color'] = "#84ADD9";

	$exchanges['high-hits']['name'] = "High Hits";
	$exchanges['high-hits']['color'] = "#FC9C21";

	$exchanges['blue-surf']['name'] = "Blue-Surf";
	$exchanges['blue-surf']['color'] = "#005A9D";

	$exchanges['majorleaguehits']['name'] = "MLH";
	$exchanges['majorleaguehits']['color'] = "#013B63";

	$exchanges['rainbow-traffic']['name'] = "RainbowTraffic";
	$exchanges['rainbow-traffic']['color'] = "#0092DF";

	$exchanges['dragonsurf']['name'] = "DragonSurf";
	$exchanges['dragonsurf']['color'] = "#1F4C23";

	$exchanges['trafficgoldrush']['name'] = "Traffic Gold Rush";
	$exchanges['trafficgoldrush']['color'] = "#B18B2A";

	$exchanges['realhitz4u']['name'] = "RealHitz4u";
	$exchanges['realhitz4u']['color'] = "#F69800";

	$exchanges['fasteasytraffic']['name'] = "FastEasyTraffic";
	$exchanges['fasteasytraffic']['color'] = "#F95307";

	$exchanges['swattraffic']['name'] = "S.W.A.T.";
	$exchanges['swattraffic']['color'] = "#00319C";

	if(!isset($exchanges[$domain]))
	{
		$exchanges[$domain]['name'] = $domain;
		$exchanges[$domain]['color'] = "inherit";
	}

	return "<span style='color:{$exchanges[$domain]['color']};'>{$exchanges[$domain]['name']}</span>";
}
?>

Below is the full code for this combined with yesterday’s post on creating a sexy splash page. You can see it in action here (though it won’t say the exchange name since you aren’t surfing).

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' >
	<head>
		<!-- TITLE OF YOUR PAGE -->
		<title>
			YOUR PAGE TITLE
		</title>
		<!-- END TITLE -->
		<style type='text/css'>
			body
			{
				/* The color you want the page background to be */
				background-color: #111111;
				font-family: 'Helvetica Neue', Helvetica, arial;
				font-weight: bold;
				padding: 0px;
				margin:0px;
			}
			#main
			{
				/* The color you want the box border to be */
				border: 4px solid #FFFFFF;
				/* The color you want the box background to be */
				background-color:#16DE1A;
				/* The color you want the box font to be */
				color: #111111;
				font-size: 28px;
				-moz-border-radius: 10px;
				-o-border-radius: 10px;
				-webkit-border-radius: 10px;
				-khtml-border-radius: 10px;
				border-radius: 10px;
				width: 700px;
				margin: 15px auto 0px auto;
				padding: 10px 20px;
				text-align: center;
			}
			.sub_text
			{
				font-size: 14px;
				font-weight: normal;
				width: 450px;
				margin: 10px auto 0px auto;
			}
			h2
			{
				font-size: 50px;
				/* The color you want the page heading font to be */
				color: #FFFFFF;
				text-shadow:0 2px 0 #111111;
				margin: 5px;
				text-align: center;
			}
			input
			{
				/* The color you want your input boxes to be */
				background-color: #FFFFFF;
				padding: 5px;
				/* The color you want the border of your input boxes to be */
				border: 2px solid #111111;
				font-weight: bold;
				-moz-border-radius: 4px;
				-o-border-radius: 4px;
				-webkit-border-radius: 4px;
				-khtml-border-radius: 4px;
			}
			input:hover
			{
				/* The color you want your input boxes to be when hovered */
				background-color: #C9F5C9;
			}
			input:focus
			{
				/* The color you want your input boxes to be when clicked */
				background-color: #93DB94;
			}
			input[type=submit]
			{
				cursor: pointer;
			}
			a
			{
				/* The color you want your links to be */
				color: #111111;
			}
		</style>
		<meta http-equiv='Content-Type' content='text/html;charset=utf-8' />
	</head>
	<body>
		<div id='main'>
			<h2>
				<!-- PAGE HEADER -->
				HEY <?php echo strtoupper(get_exchange()); ?> SURFER
				<!-- END PAGE HEADER -->
			</h2>
			<!-- MAIN CONTENT -->
			YOUR PAGE CONTENT HERE
			<!-- END MAIN CONTENT -->
			<div class='sub_text'>
				<div style='float:left; width:50%;'>
					<!-- FORM DESCRIPTION -->
					You can put a subscription form here.
					For this example, I'm using my blog's subscription form, feel free to subscribe!
					<!-- END FORM DESCRIPTION -->
				</div>
				<div style='float:right; margin-left: 2%; width:48%;'>
					<!-- FORM -->
					<form action='http://austinhallock.com/about/subscribe/' method='post'>
						<p style='margin-top: 5px;'><input type='text' name='nn' value='Your name' onclick="if (this.defaultValue==this.value) this.value=''" onblur="if (this.value=='') this.value=this.defaultValue"/></p>
						<p><input type='text' name='ne' value='Your email' onclick="if (this.defaultValue==this.value) this.value=''" onblur="if (this.value=='') this.value=this.defaultValue"/></p>
						<p><input type='submit' value='Subscribe'/></p>
						<input type='hidden' name='na' value='s'/>
					</form>
					<!-- END FORM -->
				</div>
				<br clear='all'/>
			</div>
		</div>
	</body>
</html>
<?php
function get_exchange()
{
	//Parse the referrer url
	$url = parse_url($_SERVER['HTTP_REFERER']);
	//Grab the host
	$host = $url['host'];
	//Grab the domain from that
	$domain = explode(".", $host);
	$domain = $domain[count($domain)-2];
	//Grab the stuff to return
	$contents = file_get_contents("http://www.austinhallock.com/exchanges.php?domain=$domain");
	return $contents;
}
?>

If you have any questions or comments, post them below!

That much you probably already know. It’s a matter of getting that sexy page to peak their interest.

Here’s some code I generally base my splash pages off, feel free to use it yourself, and tweak for your own needs. In the coming weeks I’ll be posting on how to properly use HTML and CSS to spruce up your pages.

I commented (where you see <!– … –>) certain parts so you can see what text to add where. Additionally, I commented (/* … */) some of the CSS so you can change up the colors if you’d like! Colors can be put in like “red”, “yellow”, “green”, etc. (without the quotes), or you can you a hex code (usually I use the campaign adder at ThumbVu to get this code, if you’re not upgraded, you can use this)

You can see an example of how the code below looks here. Click “show source” to view the actual HTML.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' >
	<head>
		<!-- TITLE OF YOUR PAGE -->
		<title>
			YOUR PAGE TITLE
		</title>
		<!-- END TITLE -->
		<style type='text/css'>
			body
			{
				/* The color you want the page background to be */
				background-color: #111111;
				font-family: 'Helvetica Neue', Helvetica, arial;
				font-weight: bold;
				padding: 0px;
				margin:0px;
			}
			#main
			{
				/* The color you want the box border to be */
				border: 4px solid #FFFFFF;
				/* The color you want the box background to be */
				background-color:#16DE1A;
				/* The color you want the box font to be */
				color: #111111;
				font-size: 28px;
				-moz-border-radius: 10px;
				-o-border-radius: 10px;
				-webkit-border-radius: 10px;
				-khtml-border-radius: 10px;
				border-radius: 10px;
				width: 700px;
				margin: 15px auto 0px auto;
				padding: 10px 20px;
				text-align: center;
			}
			.sub_text
			{
				font-size: 14px;
				font-weight: normal;
				width: 450px;
				margin: 10px auto 0px auto;
			}
			h2
			{
				font-size: 50px;
				/* The color you want the page heading font to be */
				color: #FFFFFF;
				text-shadow:0 2px 0 #111111;
				margin: 5px;
				text-align: center;
			}
			input
			{
				/* The color you want your input boxes to be */
				background-color: #FFFFFF;
				padding: 5px;
				/* The color you want the border of your input boxes to be */
				border: 2px solid #111111;
				font-weight: bold;
				-moz-border-radius: 4px;
				-o-border-radius: 4px;
				-webkit-border-radius: 4px;
				-khtml-border-radius: 4px;
			}
			input:hover
			{
				/* The color you want your input boxes to be when hovered */
				background-color: #C9F5C9;
			}
			input:focus
			{
				/* The color you want your input boxes to be when clicked */
				background-color: #93DB94;
			}
			input[type=submit]
			{
				cursor: pointer;
			}
			a
			{
				/* The color you want your links to be */
				color: #111111;
			}
		</style>
		<meta http-equiv='Content-Type' content='text/html;charset=utf-8' />
	</head>
	<body>
		<div id='main'>
			<h2>
				<!-- PAGE HEADER -->
				PAGE HEADER
				<!-- END PAGE HEADER -->
			</h2>
			<!-- MAIN CONTENT -->
			YOUR PAGE CONTENT HERE
			<!-- END MAIN CONTENT -->
			<div class='sub_text'>
				<div style='float:left; width:50%;'>
					<!-- FORM DESCRIPTION -->
					You can put a subscription form here.
					For this example, I'm using my blog's subscription form, feel free to subscribe!
					<!-- END FORM DESCRIPTION -->
				</div>
				<div style='float:right; margin-left: 2%; width:48%;'>
					<!-- FORM -->
					<form action='http://austinhallock.com/about/subscribe/' method='post'>
						<p style='margin-top: 5px;'><input type='text' name='nn' value='Your name' onclick="if (this.defaultValue==this.value) this.value=''" onblur="if (this.value=='') this.value=this.defaultValue"/></p>
						<p><input type='text' name='ne' value='Your email' onclick="if (this.defaultValue==this.value) this.value=''" onblur="if (this.value=='') this.value=this.defaultValue"/></p>
						<p><input type='submit' value='Subscribe'/></p>
						<input type='hidden' name='na' value='s'/>
					</form>
					<!-- END FORM -->
				</div>
				<br clear='all'/>
			</div>
		</div>
	</body>
</html>

Just copy and paste that html, edit where it says to, and upload to your server.

If you have any questions, feel free to post them below!