ThatGuyCharlie | Charlie Mathews Blog & Portfolio » How To http://www.thatguycharlie.com Charlie Mathews Blog & Portfolio Fri, 28 Oct 2011 05:05:00 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 CSS Powered Percentage Bar http://www.thatguycharlie.com/2010/css-powered-percentage-bar/ http://www.thatguycharlie.com/2010/css-powered-percentage-bar/#comments Thu, 07 Jan 2010 11:07:01 +0000 Charlie http://www.thatguycharlie.com/?p=920 After reading some of the css techniques mentioned at SmashingMagizine, I discovered that they had removed a dead link about a css powered percentage bar. I quickly decided to attempt a recreation of such a useful feature. Anyways, here is the easy code for creating a percentage bar.

Demo

The demo here shows the percentage bar using image backgrounds. This sample code tutorial below will demonstrate using background colors but if you wish to use images like above, refer to this download

[image: percentagebardemo]

The Code

<html>
<head>
<title>CSS Percentage Bar Test<title>
<style>
.bar {
width: 500px ;
height: 20px ;
border: 1px solid #444444;
background-color: #656565 ;
}
.barfill {
height: 20px ;
float: left ;
background-color: #6ba8e5 ;
width: 50% ; /* This is the percentage displayed */
}
</style>
</head>
<body>
<div class="bar">
<div class="barfill">
</div>
</div>
</body>
</html>

This CSS basically is the whole workings of the thing. It creates a bar and then fills it to a certain percent you define. Simple, eh? Try to play with it a bit, It’s amazing fun to mix with some javascript and use as a loading bar or upload progress bar.

What i’ve done is created the div with a class of “bar”. I made this 500 pixels wide and 20 pixels high. I gave it a grey background and gave it a dark grey border. To create the percentage, I then created a div with the class of “barfill” and made this float left inside of the “bar” div. I gave it a blue background and the percentage width I wanted displayed. To get results like the demo image, you would put “43%”. Check out the download to get the images and full code I used in my demo image.

]]> http://www.thatguycharlie.com/2010/css-powered-percentage-bar/feed/ 0 How to Create a CSS Stylesheet http://www.thatguycharlie.com/2009/how-to-create-a-css-stylesheet/ http://www.thatguycharlie.com/2009/how-to-create-a-css-stylesheet/#comments Tue, 29 Dec 2009 06:01:47 +0000 Charlie http://www.thatguycharlie.com/?p=923 Although simple, this is a question I’ve been asked numerous times by learner developers. This “tutorial” assumes you have also never created a html and css webpage before because the two facets are so closely linked.

About

Firstly, you need to understand what CSS is. CSS stands for Cascading StyleSheet and it is the key element of web development. CSS is used to tell a webpage how you want it to look. It can be used to define id’s, classes, and other html elements.

You can load a stylesheet in html using this code:

<link rel=”stylesheet” type=”text/css” href=”yourstyle.css”/>

Example

Now, an example. Create a new file in notepad or a similar text editor and save it as style.css to a folder on your computer. Repeat this and create another file called index.html and save it to the same folder as your style.css file. Open your index.html in a text editor and add this code:

<html>

<head>

<title>My First Webpage</title>

<link rel=”stylesheet” type=”text/css” href=”style.css”/>

</head>

<body>

<div class=”mybox”>Sample Text</div>

</body>

</html>

As you can see, we have added a <div> element with a class of “mybox”. Now, open your style.css and add the div class by typing this code.

.mybox {

width: 100px ;

height: 100px;

background-color: #000000 ;

}

Save your style.css and index.html.

Explanation

What you have just done is told the “mybox” class to be 100 pixels high by 100 pixels wide with a background color of black (which is the same as #000000). Double click index.html and it will open in your default web browser. See your black box? Pretty cool, hu?

There are hundreds of ways and commands you can use in CSS so I’d recommend reading more about CSS at W3Schools. Have fun!

]]> http://www.thatguycharlie.com/2009/how-to-create-a-css-stylesheet/feed/ 0 How to Run Multiple GP4 Instances http://www.thatguycharlie.com/2009/how-to-run-multiple-gp4-instances/ http://www.thatguycharlie.com/2009/how-to-run-multiple-gp4-instances/#comments Mon, 16 Feb 2009 11:14:33 +0000 Charlie http://nitronicguy.wordpress.com/?p=90 So yeah, I guessed a few people I know might enjoy trying this out. :-D

This glitch in GP4 can/(should) in no way harm your computer. Joining two sessions at once may lag your computer though. Just close one to regain some breathing space on your CPU.

I am not responsible for the foolish things you do as a result of reading this post.

Please Note: If your computer crashes, your hard drive get’s deleted, your email gets spammed, your user name hacked or any other such event, I simply had nothing to do with it.

Ok, now that is out of the way. Here is the method I use for opening two GP4′s. Read all the steps before trying it out so you can know what to do when your screen goes black asking for Admin Permission.

1) Put a shortcut to GP4 on your Desktop. (shortcut: the thing you double click to open GP4 :P )

2) Right-click and hit run as Administrator. (oh, didn’t i mension? You need to have an administrators password *or be an admin*)

3) As you hit ok on the “Program needs Permission to continue” admin box, quicky double click the gp4 short cut again on your desktop (not as administrator, so dont right click and select that).

Try to double click as many times as you want to have open. You will most likley be able to open only one extra but it is possible to open lots more.

There it is! Have fun xD

]]> http://www.thatguycharlie.com/2009/how-to-run-multiple-gp4-instances/feed/ 0