<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>FunkyTower &#187; Uncategorized</title>
	<atom:link href="http://www.davidcrandall.com/categories/uncategorized/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.davidcrandall.com</link>
	<description>A great source for tech news, tech help, tech info, and quality web design solutions</description>
	<lastBuildDate>Tue, 18 Aug 2009 08:38:50 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>NO MORE FUNKYTOWER!</title>
		<link>http://www.davidcrandall.com/2009/08/18/no-more-funkytower/</link>
		<comments>http://www.davidcrandall.com/2009/08/18/no-more-funkytower/#comments</comments>
		<pubDate>Tue, 18 Aug 2009 08:38:50 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://www.davidcrandall.com/2009/08/18/no-more-funkytower/</guid>
		<description><![CDATA[That&#8217;s right, soon, FunkyTower WILL BE GONE! We will be replacing it with a new website: davidcrandall.com That&#8217;s all! Be watching out as the change will happen within the next couple of months! David]]></description>
			<content:encoded><![CDATA[<p>That&#8217;s right, soon, FunkyTower WILL BE GONE!  We will be replacing it with a new website: davidcrandall.com</p>
<p>That&#8217;s all!  Be watching out as the change will happen within the next couple of months!</p>
<p>David</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidcrandall.com/2009/08/18/no-more-funkytower/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Can I Get A Free MacBook Pro?  I think so&#8230;</title>
		<link>http://www.davidcrandall.com/2009/05/29/can-i-get-a-free-macbook-pro-i-think-so/</link>
		<comments>http://www.davidcrandall.com/2009/05/29/can-i-get-a-free-macbook-pro-i-think-so/#comments</comments>
		<pubDate>Fri, 29 May 2009 08:20:23 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://www.funkytower.com/?p=438</guid>
		<description><![CDATA[We&#8217;ve all seen those &#8220;Free This&#8221; and &#8220;Free That&#8221; ads.  You know the ones, where you give your info, they say &#8220;almost done&#8221; then you have to sign up for 20 billion offers, get tons and tons of spam, and ultimately go crazy.  Well, one site is changing the way things go down. Now you [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.freemacbookpro.com/system/images/0000/0194/macbookpro-header.jpg?1224194315"><img src="http://www.freemacbookpro.com/system/images/0000/0194/macbookpro-header.jpg?1224194315" alt="" width="375" height="112" /></a></p>
<p>We&#8217;ve all seen those &#8220;Free This&#8221; and &#8220;Free That&#8221; ads.  You know the ones, where you give your info, they say &#8220;almost done&#8221; then you have to sign up for 20 billion offers, get tons and tons of spam, and ultimately go crazy.  Well, one site is changing the way things go down.<span id="more-438"></span></p>
<p>Now you can get a Free Macbook Pro without paying a dime and only completing one FREE offer.  How?  Well, the free offer is still paying the company providing the MacBook Pro, and all you have to do after you complete the offer is have some friends sign up.  THAT IS IT!</p>
<p>So little work, so great of a machine to be given to you for free.</p>
<p>So how can you win your free MacBook Pro? EASY</p>
<p>1.  <a title="Free Macbook Pro" href="http://www.freemacbookpro.com/?referral=7rq9m9" target="_blank"><strong>Click This Link To Visit The Webpage</strong></a></p>
<p>2. Fill out the information</p>
<p>3.  Complete the Free Trial offer for eMusic and receive 25 FREE music downloads and 7 days of free service.  Don&#8217;t worry, you can cancel this subscription before the free trial ends and they WONT charge you.</p>
<p>4.  Refer the required ammount of friends.   This really ISN&#8217;T that hard.  Get family, friends, neighbors, and coworkers in on it.  Tell them if anything, they&#8217;ll at least get 25 free music downloads.</p>
<p>THAT IS IT!</p>
<p>What are you waiting for?</p>
<p><a href="http://www.freemacbookpro.com/?referral=7rq9m9"><strong>CLICK HERE TO GET YOUR FREE MACBOOK PRO!!!</strong></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidcrandall.com/2009/05/29/can-i-get-a-free-macbook-pro-i-think-so/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Global Avatars &#8211; Get Your Avatar to Show Up in a Blog Comment</title>
		<link>http://www.davidcrandall.com/2009/03/09/global-avatars-get-your-avatar-to-show-up-in-a-blog-comment/</link>
		<comments>http://www.davidcrandall.com/2009/03/09/global-avatars-get-your-avatar-to-show-up-in-a-blog-comment/#comments</comments>
		<pubDate>Mon, 09 Mar 2009 23:08:29 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Avatars]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[Comments]]></category>
		<category><![CDATA[Custom]]></category>

		<guid isPermaLink="false">http://www.funkytower.com/2009/03/09/global-avatars-get-your-avatar-to-show-up-in-a-blog-comment/</guid>
		<description><![CDATA[Many websites are developed with a CMS built in; many of those websites use blogging systems like WordPress. FunkyTower.Com uses WordPress. Many of us bloggers have a comment system where readers can leave comments, but have you ever noticed that some comments seem to have the writer&#8217;s custom avatar while others do not? How do [...]]]></description>
			<content:encoded><![CDATA[<p>Many websites are developed with a CMS built in; many of those websites use blogging systems like WordPress.  FunkyTower.Com uses WordPress.</p>
<p>Many of us bloggers have a comment system where readers can leave comments, but have you ever noticed that some comments seem to have the writer&#8217;s custom avatar while others do not?  How do they do that?  Well, it&#8217;s quite simple, really.</p>
<p>It&#8217;s called Gravatar (www.gravatar.com)</p>
<p>Gravatar is a free online avatar generator.  Simply sign up with your e-mail address, upload an avatar, and you&#8217;re done.  Now whenever you leave comments on a blog that has avatars enabled (with Gravatar support, which most do) your avatar will show up automatically.  The way it works is Gravatar uses the e-mail address you enter when you leave a comment in conjunction to the e-mail you used to make the Gravatar account; when it finds your e-mail address in a comment post, it replaces the default avatar chosen by the blog owner with your avatar!  Pretty neat, huh?</p>
<p>This will generally work.  The few times it won&#8217;t are when the blog owner disables the support for &#8220;Gravatars&#8221; or just doesn&#8217;t have any sort of avatar system for comments.  Other than that, when you leave comments here at FunkyTower.Com, or at other blogs like chris.pirillo.com (an amazing geek), you will have your very own, custom avatar.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidcrandall.com/2009/03/09/global-avatars-get-your-avatar-to-show-up-in-a-blog-comment/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Monitor or HDTV&#8230;or both?</title>
		<link>http://www.davidcrandall.com/2009/03/05/monitor-or-hdtvor-both/</link>
		<comments>http://www.davidcrandall.com/2009/03/05/monitor-or-hdtvor-both/#comments</comments>
		<pubDate>Fri, 06 Mar 2009 06:33:02 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://www.funkytower.com/?p=424</guid>
		<description><![CDATA[When it comes to computers, I&#8217;m somewhat of a power user.  I&#8217;m also a big fan of certain TV shows and sometimes, I just want to watch TV in the comfort of my office; I&#8217;m in front of the computer half the time anyway.  Or say you&#8217;ve been spending hours upon hours in your home [...]]]></description>
			<content:encoded><![CDATA[<p>When it comes to computers, I&#8217;m somewhat of a power user.  I&#8217;m also a big fan of certain TV shows and sometimes, I just want to watch TV in the comfort of my office; I&#8217;m in front of the computer half the time anyway.  Or say you&#8217;ve been spending hours upon hours in your home office working on that document and you need a break right around the same time that new episode of Family Guy comes on.  Maybe the only way to get a little privacey is to lock your self in the office, but you don&#8217;t want to just spend time on your computer &#8211; you&#8217;d rather be playing games on your Xbox, or watching a movie or watching TV.  Whatever your case, I have stumbled upon a VERY nice product.</p>
<p>I recently obtained a <a href="http://www.amazon.com/gp/product/B001AYCNIW">Samsung Touch of Color T260HD 26-Inch LCD HDTV Monitor</a>.  That&#8217;s right, a 26&#8243; LCD monitor with a TV tuner&#8230;and for less than $500.  &#8220;Well, David, that can&#8217;t be!  If such a product exists the quality and features must be poor and limited.&#8221;  Ah, ye of little faith&#8230;Believe it or not, this thing is a monster!</p>
<p><span id="more-424"></span>See, I have an office in my bedroom.  I spend most of my time in here networking with people, building websites, recording music, and researching new software and technologies to write about here at FunkyTower.Com.  The problem is, I run several applications at a time, and it is so difficult to manage them all on a 17&#8243; monitor only capable of reaching a 1440 x 900 resolution!  I needed something much bigger.  Also, I really wanted to snag a TV.  I didn&#8217;t have one in my room like I used to, and I really really wanted one.  I thought to myself &#8220;Why not just get a HDTV with a VGA or DVI PC input in the back?&#8221;  Sure, one can choose this, but should I choose a screen size of say, 24 inches or more as I desired, I would be confined to a maximum resolution of 1920 x 1080.  I did some research and decided to look for a monitor with an HDTV tuner.</p>
<p>Most of them ran for over $1,000 for a decent size.  This was a bit more than I could afford.  Soon, I stumbled across the Samsung Touch of Color T260HD &#8211; a 26&#8243; LCD HDTV monitor.  It has 2 HDMI inputs, 1 Component Video input, 1 L/R audio input, VGA input, 1 DVI input, 1 SPDIF output, 1 COAX input, and a headphone jack.  It has a wonderful resolution of 1920 x 1200 &#8211; slightly more efficient than an regular HDTV &#8211; and a beautiful 10000:1 contrast ratio.  I was amazed at the quality of the picture when I plugged this baby in.  It was so easy to set up, and it&#8217;s making my life as a computer geek much more efficient.</p>
<p>I&#8217;ve watched a DVD and DirecTV digital through this and the picture is pretty nice.  I plan to install my DirectTV HD box tomorrow morning; I&#8217;ve also purchased a video card and will run this dual with my HP w17e (the old 17 incher.)</p>
<p>And for $450 on <a href="http://www.amazon.com/gp/product/B001AYCNIW" target="_blank">Amazon,</a> what more could you ask for?  The power butten is even touch-screen, and a beautiful red glow emits below it when the monitor is powered on.  Such an amazing product.  It comes with the DVI and VGA cables and a nice little remote to control everything with.</p>
<p><a href="http://www.tigerdirect.com/include/AddCartfromGallery.asp?EdpNo=3984239&amp;csid=ITD&amp;Sku=S203-2520&amp;imgcart=1&amp;imgcounter=2#" target="_blank"><strong>Click Here to see some photos of it.</strong></a></p>
<p>So if you&#8217;re unsure about buying a TV and using it for a monitor &#8211; don&#8217;t.  Buy THIS monitor and use it as a TV.  The video quality is amazing for an LCD and you may save your self a couple hundred dollars.  And if 26 inches is too big, don&#8217;t worry; they have the T240HD for 24&#8243; monitors, T22HD for 22&#8243; monitors, and the T200HD for 20&#8243; monitors.</p>
<p><strong>What Do You Think?</strong></p>
<p>What Do you think of this monitor?  Do you have it?  Do you have a similar monitor to recommend?  What ever the case, I want to hear about it.  You can leave a comment below, or e-mail me personally at <a href="mailTo:david@funkytower.com">david@funkytower.com</a></p>
<p>I look forward to hearing from you!</p>
<p>Take it easy,<br />
David</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidcrandall.com/2009/03/05/monitor-or-hdtvor-both/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>What&#8217;s so great about Windows 7?  What&#8217;s New?  Is it better than Vista?</title>
		<link>http://www.davidcrandall.com/2009/02/02/whats-so-great-about-windows-7-whats-new-is-it-better-than-vista/</link>
		<comments>http://www.davidcrandall.com/2009/02/02/whats-so-great-about-windows-7-whats-new-is-it-better-than-vista/#comments</comments>
		<pubDate>Mon, 02 Feb 2009 23:56:26 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://www.funkytower.com/?p=412</guid>
		<description><![CDATA[Answer to question #1 and #2: A lot.   Answer to #3:  A LOT better. One may look at Windows 7 via a Youtube video and think &#8220;It&#8217;s exactly the same as Vista!  It&#8217;s got a similar look, the file structure is similar to Vista&#8217;s, how could it possibly be any different?&#8221;  All I have to [...]]]></description>
			<content:encoded><![CDATA[<p>Answer to question #1 and #2: A lot.   Answer to #3:  A LOT better.</p>
<p>One may look at Windows 7 via a Youtube video and think &#8220;It&#8217;s exactly the same as Vista!  It&#8217;s got a similar look, the file structure is similar to Vista&#8217;s, how could it possibly be any different?&#8221;  All I have to say is don&#8217;t knock it until you try it.</p>
<p>Firstly, I haven&#8217;t had any problems with Windows 7 thus far, and I&#8217;ve had it almost a month.  It runs so much quicker than you may think.  In fact, once explorer has loaded, you&#8217;re pretty much free to do whatever you&#8217;d like without losing speed &#8211; and that&#8217;s how it should be.</p>
<p>The taskbar in Windows 7 is fantastic.  By default, it is bigger and more spacious.  It automatically groups multiple windows together based on the program running, and allows you to preview each window before selecting it &#8211; which is really nice.  Some users, however, may find this to be a difficult adjustment, so you can always right click the taskbar, click properties, and choose never to group your windows.</p>
<p>Next to the clock on the far right side of the taskbar is a thin, rectangular button; hover over this button and preview the desktop &#8211; click the button and it will take you to the desk top.  Click it again, and it will pull whatever windows you had opened originally.</p>
<p>Window management is improved amazingly.  Again, the grouping of windows on the taskbar and the ability to preview them is a fantastic feature for power users.  You may now stack windows side by side or on top of each other as well.  This way, if you&#8217;re dealing with transferring files and folders, browsing several websites at once, or using multiple programs at once, you can do so at ease.</p>
<p>They&#8217;ve added a new feature called &#8220;Aero Shake.&#8221;  Now, we all know &#8220;Aero&#8221; is the name of the Windows Style/Theme; well, Aero Shake is a really neat feature that can be extremely useful, or just fun to use when you&#8217;re bored.  Say you have a myriad of windows open and you need to focus on just one; simple grab the top of the window bar and move it back and forth a couple of times.  Suddenly, all other windows have been minimized.  What&#8217;s that you say?  You want your windows pulled up again?  Well that&#8217;s an easy one &#8211; shake the window one more time and vualah!  All your windows have been pulled up as before!</p>
<p>Connecting to the internet via Wi-fi was a pain with Vista.  Even now on my Vista machine, I have to wait for it to boot up and wait for at least 2 or 3 minutes for it to find the default connection.  Pretty ridiculous, right?  Well, with Windows 7, connecting to the internet via your wifi card has never been more simple.  Simply install your drivers for your wireless card as you would in any other OS (operating system), then you will see a little signal icon on your taskbar next to the clock on the far right; it will look like signal bars on a cell phone.  Simply click it and a list of wireless connections will automatically appear &#8211; click yours, enter WEP info if needed, and you&#8217;re connected immediately.</p>
<p>Another improvement is User Account Control (UAC.)  For us tweakers, web designers, and and various other types of geeks, the UAC feature was annoying and extremely difficult to adjust to our liking.  NOW, in Windows 7 you can adjust it to your liking or even turn it off.  That&#8217;s right, no more fighting the UAC to test your programs or customize your computer.</p>
<p>The Resource Monitor in Windows 7 has also been redone and made more efficient and easier to monitor your cpu, ram, etc.</p>
<p>Windows Explorer has been completely REWRITTEN!  FINALLY!  It runs so much smoother.  The search has even improved!  It finds what you need within a couple of seconds based several aspects of what you&#8217;ve entered as your search term.  It even searches through meta data!  Nice!</p>
<p>Speaking of searches, you can now search the web through Windows Explorer.  I will show you how to do this in a soon coming article.</p>
<p>Next cool feature in Windows 7 is rotating desktop backgrounds.  Now, I don&#8217;t mean physical rotation, but I mean order rotation.  That&#8217;s right, you may choose from an unlimited amount of photos for your desktop background, and it will display a slide show of the photos you select, fading in and out of each photo; each photo only stays displayed as long as you choose &#8211; that&#8217;s right, you can choose how long each photo is displayed as your desktop background.  You may also change the photo at any given moment.  There&#8217;s a lot to this feature, so I will continue raving about this feature in a soon coming post.</p>
<p>Other improvements in Windows 7 are the Magnifier and the new Internet Explorer.  The new Internet explorer still needs a good amount of work, but it has improved none the less.</p>
<p><strong>What do you think?</strong><br />
Do you have Windows 7?  What do you think of it?  Do you think it will be a good upgrade from XP and Vista?</p>
<p>Or, have you found any new features in Windows 7?  Whatever you have to share, share it with me!  I&#8217;d love to know what you have to say.  Leave a comment below, or shoot me an e-mail at <a href="mailto:david@funkytower.com">david@funkytower.com</a></p>
<p>Take it easy,<br />
David</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidcrandall.com/2009/02/02/whats-so-great-about-windows-7-whats-new-is-it-better-than-vista/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Windows 7 Beta Installation Error 0&#215;80070241 and 0&#215;80070570 solution</title>
		<link>http://www.davidcrandall.com/2009/01/27/windows-7-beta-installation-error-0x80070241-and-0x80070570-solution/</link>
		<comments>http://www.davidcrandall.com/2009/01/27/windows-7-beta-installation-error-0x80070241-and-0x80070570-solution/#comments</comments>
		<pubDate>Tue, 27 Jan 2009 23:16:59 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://www.funkytower.com/?p=398</guid>
		<description><![CDATA[I have to say I was quite excited to finally finished downloading Windows 7 beta 7000 for the first time.  I waited those long hours for the download to finish, I burned my DVD, put the DVD in the drive, Windows 7 beta setup popped up, I chose my parititian, and let the set up [...]]]></description>
			<content:encoded><![CDATA[<p>I have to say I was quite excited to finally finished downloading Windows 7 beta 7000 for the first time.  I waited those long hours for the download to finish, I burned my DVD, put the DVD in the drive, Windows 7 beta setup popped up, I chose my parititian, and let the set up utility do its thing.  It got to the &#8220;Expanding Files&#8221; step in the installation process.  It completed about 92% of this process, then suddenly&#8230;.ERROR 0&#215;80070241.  This error told me that some files might be missing or corrupt and to restart the installation.  BUMMER!!!!</p>
<p>I went online and Googled for help, and found some interesting solutions like &#8220;Burn your disk at a slower speed&#8221; or &#8220;Burn your disk with THIS software and not THIS software.&#8221;  I went through about 4 lightscribe DVD&#8217;s following these suggestions and found myself with the same problem.</p>
<p>I was honestly disappointed.  I waited a long time for that download to finish, used up my new lightscribe dvd&#8217;s, and created a new partition for what?  Nothing?!  I was just about ready to give up when I remembered&#8230;the download manager.</p>
<p>Windows 7 downloads using an online download manager so that you can pause your download, shut off your computer, and continue your download at another time.  It was quite late when I started downloading, and I decided to pause my download and continue the next morning.  I thought to myself&#8230;&#8221;The error is telling me that some of the files may be missing or corrupt&#8230;could it be that pausing my download caused me to loose data or caused some data to become corrupt?&#8221;</p>
<p>So, I downloaded Windows 7 beta 7000 a SECOND time WITHOUT pausing it.  Then, I burned it to a DVD in RAW format at the slowest speed possible.  I ran through the installation and 20 minutes later, Windows 7 was installed and working beautifully.</p>
<p>So in case you didn&#8217;t catch my solution: download Windows 7 Beta 7000 without ever pausing it &#8211; let it run straight through, and burn your DVD at the slowest speed in RAW format.  Take these extra measures, and you should have Windows 7 beta running smoothly.</p>
<p><strong>What Do You Think?</strong></p>
<p>What were some problems that you discovered when installing Windows 7?  What was your solution to this problem?  What do you think of Windows 7?  I&#8217;d love to hear from you!  Leave a comment or e-mail me at <a href="mailto:david@funkytower.com">david@funkytower.com</a></p>
<p>Take it easy,<br />
David</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidcrandall.com/2009/01/27/windows-7-beta-installation-error-0x80070241-and-0x80070570-solution/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Making a navigation bar in CSS</title>
		<link>http://www.davidcrandall.com/2008/08/12/making-a-navigation-bar-in-css/</link>
		<comments>http://www.davidcrandall.com/2008/08/12/making-a-navigation-bar-in-css/#comments</comments>
		<pubDate>Wed, 13 Aug 2008 02:25:06 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Bar]]></category>
		<category><![CDATA[How To]]></category>
		<category><![CDATA[Links]]></category>
		<category><![CDATA[Navigation]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.funkytower.com/?p=334</guid>
		<description><![CDATA[CSS is such a useful tool in designing your website and adding some functionality to it.  One of the things that turns most &#8220;beginner web designers&#8221; on to CSS is the ability to customize the color of links.  This is great to avoid having unwanted underlines and the ugly blue default link color.  Well did you [...]]]></description>
			<content:encoded><![CDATA[<p>CSS is such a useful tool in designing your website and adding some functionality to it.  One of the things that turns most &#8220;beginner web designers&#8221; on to CSS is the ability to customize the color of links.  This is great to avoid having unwanted underlines and the ugly blue default link color.  Well did you know you can create a very versitile navigation bar using CSS?  It&#8217;s really quite easy: instead of applying effects to a piece of text &#8211; apply effects to a table cell!  In this tutorial you will learn effects regaurding: hovering cell background effects, text effects, button effects, and more!</p>
<p><span id="more-334"></span></p>
<p><strong>Step 1 &#8211; Creating the table:</strong></p>
<p>The first thing we need to do is set up our table.  I&#8217;ll make it easy for you and create a verticle, 5 collumn table.  You can customize this table any way you&#8217;d like.  You can convert it to 5 rows instead of five collumns if you prefer having a side bar.</p>
<p>Open up Notepad or a text editing decoder similar to notepad and create a basic HTML document with a table like so:</p>
<blockquote><p><em>&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;title&gt;Your Website Title&lt;/title&gt;<br />
&lt;/head&gt;</em></p>
<p><em>&lt;body&gt;<br />
&lt;table width=&#8221;400&#8243; border=&#8221;0&#8243; cellspacing=&#8221;0&#8243; cellpadding=&#8221;0&#8243;&gt;<br />
  &lt;tr&gt;<br />
    &lt;td&gt;Page 1&lt;/td&gt;<br />
    &lt;td&gt;Page 2&lt;/td&gt;<br />
    &lt;td&gt;Page 3&lt;/td&gt;<br />
    &lt;td&gt;Page 4&lt;/td&gt;<br />
    &lt;td&gt;Page 5&lt;/td&gt;<br />
  &lt;/tr&gt;<br />
&lt;/table&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;</em></p></blockquote>
<p>Again, you can modify this table in any way you need to.  The only thing I suggest NOT modifying is the font, alignment, or size of the text &#8211; and do not be quick to add links to your navigation bar.  We&#8217;ll cover this in the next step.</p>
<p>But first, be sure that you&#8217;ve saved your work.  For now, save this document as &#8220;navigationbar.html&#8221; and continue saving your work after each step &#8211; just to be safe <img src='http://www.davidcrandall.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p><strong>Step 2 &#8211; Making our links</strong></p>
<p>Instead of using the common &lt;a href=&#8221;http://yourwebsiteurl.com&#8221;&gt; tag, we&#8217;re going to go a different route.  Because we want the entire cell to act as a button or link, we need to modify the entire cell, not the text within it.  To do this, we&#8217;ll add a function called &#8220;onClick&#8221; inside each &lt;td&gt; tag.</p>
<p>To do this and find each &lt;td&gt; tag and add this function: onClick=&#8221;document.location.href=&#8217;http://www.funkytower.com&#8217;;&#8221;</p>
<p>Now all your &lt;td&gt; tags should look like this:</p>
<blockquote><p><em>    &lt;td onClick=&#8221;document.location.href=&#8217;http://www.funkytower.com&#8217;;&#8221;&gt;Page 1&lt;/td&gt;<br />
    &lt;td onClick=&#8221;document.location.href=&#8217;http://www.funkytower.com&#8217;;&#8221;&gt;Page 2&lt;/td&gt;<br />
    &lt;td onClick=&#8221;document.location.href=&#8217;http://www.funkytower.com&#8217;;&#8221;&gt;Page 3&lt;/td&gt;<br />
    &lt;td onClick=&#8221;document.location.href=&#8217;http://www.funkytower.com&#8217;;&#8221;&gt;Page 4&lt;/td&gt;<br />
    &lt;td onClick=&#8221;document.location.href=&#8217;http://www.funkytower.com&#8217;;&#8221;&gt;Page 5&lt;/td&gt;</em></p></blockquote>
<p>Change the URL to whatever you&#8217;d like it to be so that it fits the purpose of your navigation bar.</p>
<p><strong>Step 3 &#8211; CSS Properties for each button</strong></p>
<p>Now that we have a dull navigation bar with no style or beauty to it, let&#8217;s work on our CSS.  Let&#8217;s first start by making our navigation bar look just how we want it.  Paste this code somewhere between the &lt;head&gt; and &lt;/head&gt; tags:</p>
<blockquote><p><em>&lt;style type=&#8221;text/css&#8221;&gt;<br />
.nav {<br />
 background-color:#990000;<br />
 font-family: Arial, Helvetica, sans-serif;<br />
 color: #FFFFFF;<br />
 text-align: center;<br />
 cursor: pointer;<br />
}<br />
&lt;/style&gt;</em></p></blockquote>
<p>Let&#8217;s break this down:</p>
<ol>
<li><em>.nav &#8211; </em>This is the name of the class we will use.  Change it to anything you want like &#8220;.navbar&#8221; or &#8220;.thebar&#8221; or &#8220;.thethingie&#8221;&#8230;what ever you want <img src='http://www.davidcrandall.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </li>
<li><em>background-color &#8211; </em>This, obviously, will be the background color of our cell.  Change the color to whatever you&#8217;d like!</li>
<li><em>font-family &#8211; </em>This is your basic font for your text.  There are different font-families you can use.  Here are some common ones<em>1.  Verdana, Tahoma, Arial, Helvetica, sans-serif<br />
2.  Georgia, Times New Roman, Times, serif<br />
3.  Geneva, Arial, Helvetica, sans-serif<br />
4.  Arial, Verdana, Helvetica, sans-serif<br />
5.  Courier New, Courier, Verdana, sans-serif</em>Now, you can go online and find more fonts families, but these here are the most common &#8211; so if I were you, I&#8217;d stick to one of these. </li>
<li><em>color &#8211; </em>Simply put: the color of the text.  Again, this can be anything you want.</li>
<li><em>text-align &#8211; </em>The alignment of the text.  Chose left, right, center, or justify.</li>
<li><em>cursor &#8211; </em>This is what the cursor becomes when it is within the table cell.  The &#8220;cursor: pointer;&#8221; property will help indicate that the cell is, in fact, a link to another webpage by showing <img class="alignnone size-thumbnail wp-image-337" title="pointer" src="http://www.funkytower.com/wp-content/uploads/ie-hand.gif" alt="" width="40" height="40" />And it also will keep your cursor from turning into <img class="alignnone size-medium wp-image-336" title="text" src="http://www.funkytower.com/wp-content/uploads/auto.gif" alt="" width="40" height="40" />when hovering over the text in your navigation bar.</li>
</ol>
<p>So now that we understand the basic properties of our CSS code, it&#8217;s time to add some effect to our navigation bar!</p>
<p><strong>Step 4 &#8211; Adding Effect:</strong></p>
<p>To do add a hover effect to your navigation bar, add the following code to your CSS style:</p>
<blockquote><p><em>.nav:hover {<br />
</em><em>background-color: #CC0000;<br />
} </em></p></blockquote>
<p>&#8220;.nav:hover&#8221; indicates that we&#8217;re using the same properties as &#8220;.nav&#8221; except for the following properties (i.e, these are the properties that will change when we hover our mouse over the table cells in our navigation bar)</p>
<p>Note that the only property I&#8217;ve put here was the background color.  You can use/change whatever property you&#8217;d like such as &#8221;color&#8221; for text - just ommit the &#8220;cursor&#8221; property, as it won&#8217;t matter since we covered that in the previous CSS properties.</p>
<p><strong>Step 5 &#8211; Implimenting the CSS to the Navigation Bar</strong></p>
<p>This step is probably the easiest step.  Simply add <em>class=&#8221;nav&#8221;</em> within your &lt;td&gt; tags.  Now your ENTIRE HTML document should look something like this:</p>
<blockquote><p><em>&lt;html&gt;<br />
&lt;title&gt;Untitled Document&lt;/title&gt;<br />
&lt;style type=&#8221;text/css&#8221;&gt;<br />
.nav {<br />
 background-color:#990000;<br />
 font-family: Helvetica, Arial, sans-serif;<br />
 color: #FFFFFF;<br />
 text-align: center;<br />
 cursor: pointer;<br />
}<br />
.nav:hover { background-color:#CC0000; }<br />
&lt;/style&gt;<br />
&lt;/head&gt;</em></p>
<p><em>&lt;body&gt;<br />
&lt;table width=&#8221;400&#8243; border=&#8221;0&#8243; cellspacing=&#8221;0&#8243; cellpadding=&#8221;0&#8243;&gt;<br />
  &lt;tr&gt;<br />
    &lt;td class=&#8221;nav&#8221; onClick=&#8221;document.location.href=&#8217;http://www.funkytower.com&#8217;;&#8221;&gt;Page 1&lt;/td&gt;<br />
    &lt;td class=&#8221;nav&#8221; onClick=&#8221;document.location.href=&#8217;http://www.funkytower.com&#8217;;&#8221;&gt;Page 2&lt;/td&gt;<br />
    &lt;td class=&#8221;nav&#8221; onClick=&#8221;document.location.href=&#8217;http://www.funkytower.com&#8217;;&#8221;&gt;Page 3&lt;/td&gt;<br />
    &lt;td class=&#8221;nav&#8221; onClick=&#8221;document.location.href=&#8217;http://www.funkytower.com&#8217;;&#8221;&gt;Page 4&lt;/td&gt;<br />
    &lt;td class=&#8221;nav&#8221; onClick=&#8221;document.location.href=&#8217;http://www.funkytower.com&#8217;;&#8221;&gt;Page 5&lt;/td&gt;<br />
  &lt;/tr&gt;<br />
&lt;/table&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;</em></p></blockquote>
<p><strong>Step 6 &#8211; Save it and Test it!</strong></p>
<p>Upload it to your server and test it out.  Now you have a fully functional navigation bar done completely in CSS!  Final thing to do is test it out!!!</p>
<p><strong>Other Tips:</strong></p>
<p>Now, this is totally optional, but I would reccomend adding your CSS to an external CSS document, rather than adding the entire CSS code to the head of your HTML document. </p>
<p>To do this, copy and paste all the CSS code (excluding &lt;style type=&#8221;text/css&#8221;&gt; and &lt;/style&gt;) into a new notepad document and save it as style.css in the same location as your HTML document.</p>
<p>Now, open up your HTML document and replace ALL your CSS code, including the &lt;style&gt; tags, with this:</p>
<blockquote><p><em>&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;style.css&#8221; type=&#8221;text/css&#8221; /&gt;</em></p></blockquote>
<p>Now save your HTML document and test it.  <img src='http://www.davidcrandall.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p><strong></strong></p>
<p><strong>What Do you Think?<br />
</strong>Did this tutorial help you??  Got any other cool tips or tricks regaurding HTML/CSS?  Need to know how to do anything else with CSS or HTML?  Let me know and I would love to help you!!!  You can e-mail me at <a href="mailto:david@funkytower.com">david@funkytower.com</a> and I&#8217;ll do everything I can to help you <img src='http://www.davidcrandall.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p> </p>
<p>Take it easy,<br />
David Crandall</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidcrandall.com/2008/08/12/making-a-navigation-bar-in-css/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
