CSS Basic Template

Here’s a basic CSS template that you can use. There’s a header, a footer, a left side and a right side.

You need to create an index.html and mystyle.css file. Place them in the same directory.

css_example

index.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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<title>CSS Template</title>
</head>
<body id="backdrop">
<div id="container">
 <div id="header">
 <center>Header</center>
 </div>
 <div id="leftBar">
 <center>Left Side</center>
 </div>
 <div id="maincontent">
 <center>Main Content</center>
 </div>
 <div id="rightBar">
 <center>Right Side</center>
 </div>
 <div id="footer">
 <center>Footer</center>
 </div>
</div>
</body>
</html>

mystyle.css

@charset "UTF-8";
 /* CSS Document */
#backdrop {
     background-color:#333;
 }
#container {
   margin:auto;
   width: 100%;
   background: #ffffff;
 }
#header {
   background: #90F;
 }
#leftBar {
   float: left;
   width: 20%;
   background: #999;
 }
#maincontent {
   float:left;
   width:60%;
   background-color: #FF9;
 }
#rightBar {
   float:right;
   width: 20%;
   background: #999;
 }
#footer {
   clear:both;
   background:#90F;
 }

Google: Web Fonts

Are you still limiting the type of font on your webpage? Let me introduce you to Google Web Fonts.

There are three simple steps to follow.

  1. Choose your font
  2. Add the font API code between <head></head>
  3. Add CSS code

I went ahead and choose Stardos Stencil for this example.

I added the following code between <head></head>.

 <link href='http://fonts.googleapis.com/css?family=Stardos+Stencil&v1' rel='stylesheet' type='text/css'>
Then I added the following CSS code between <style></style>.
body {
  font-family: 'Stardos Stencil', arial, serif;
  font-size:30px;
}
font-stardos
You can see a working live example by clicking HERE. Feel free to view the source code.

Eye Drawing

I never thought that I’d draw anything in my life, but I decided today to pick up a pencil and try to draw an eye. I think it turned out pretty good considering I have never drawn a thing in my life. I hope I can make the time to draw more in the future.

I have a whole new respect for people that can draw.

This is definitely a work in progress.

My first eye attempt:

My second eye attempt:

YouTube Embed – iPhone & iPad Problem

Have you noticed a big black border around your videos when you embed them into your website and are viewing them on an iPhone or iPad device? So have I. This seems to be an HTML5 issue when being viewed only on mobile Safari browsers. Again, you will only notice the difference when viewed with an iPhone or iPad device. It will look normal otherwise.

NEW Code:

<iframe title=”YouTube video player” width=”560″ height=”349″ src=”http://www.youtube.com/embed/tPZfa7bZzF4?rel=0″ frameborder=”0″ allowfullscreen></iframe>

 

OLD Code:
<object width=”560″ height=”349″><param name=”movie” value=”http://www.youtube.com/v/tPZfa7bZzF4?fs=1&amp;hl=en_US&amp;rel=0″></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/tPZfa7bZzF4?fs=1&amp;hl=en_US&amp;rel=0″ type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”560″ height=”349″></embed></object>


Here’s a few iPhone screen shots to show you the difference.

 

In other words, make sure to check the “Use old embed code” if you don’t want that big black border around your video.

 

 

This is hopefully a temporary solution until Google or mobile Safari figure it out.

WordPress: WP-Syntax – Pre/Code

I was looking for a simple way to show/highlight the code portion of my blog. The regular <pre> tags didn’t do it for me. It just didn’t look professional.

After a quick search, I came across a WordPress plugin called WP-Syntax.

WP-Syntax provides clean syntax highlighting using GeSHi — supporting a wide range of popular languages. It supports highlighting with or without line numbers and maintains formatting while copying snippets of code from the browser.

There are a few ways of using this plugin, but I will only be using two.

The first way is when I want to highlight commands:
All I need to do is add a <pre lang=”php”> at the beginning of my command and add a </pre> at the end.

example command

The second way is when I want to highlight code:
I wanted a number next to each line of code. This will help me identify a bad piece of code if someone wanted to point it out. For example, someone would easily be able to tell me that line 5 had an error in it.
All I need to do is add a <pre lang=”php” line=”1″> at the beginning of my command and add a </pre> at the end.

example code
example code
example code
example code
example code
example code

Links:
http://wordpress.org/extend/plugins/wp-syntax