Category Archives: Articles

CSS Tab Navigation Without Javascript

In this article I will show you how you can develop a simple navigation bar using one image and only CSS. You do not have to use any JavaScript to achieve this effect. The benefit is it uses a list displayed horizontally so if styles are turned off you get just plain text. Pretty cool! So let’s have a look at what we are going to create. Click here to see the demo.

First we need to create the look of our buttons and navigation bar. The graphic I used was really simple but because the buttons are in a relative position to the rest of the page, you can create decorative and creative designs and place it anywhere on the page. I used Fireworks here to create 4 buttons with 4 variations for each button.

In the image below I evenly placed each button graphic. I made each space between the buttons the same pixels to make it easy to plan the CSS layout in the future. The red boxes just show a quick way to double check the height and widths were correct.

Here is a close up in Fireworks again checking the alignment of each button graphic. Once you have this evenly laid out you can drag the slice up and down and know where each background image will need to be placed using the properties in Fireworks to note exactly to the pixel where each graphic is positioned.

OK so lets look at the CSS. For the purpose of the tutorial my navigation is one DIV that is 534 x 51 pixels. So you can take this an apply it your project and position it anyway you like. I first declared the styles for the “a: links such as active, hover and visited. You probably will have these for your page but in my example its only the navigation bar. And if the styles are turned off you want to make sire the links appear as clickable text.

We set the style for the DIV called #navigation. This will be the container for everything. This will make it easier to move and position on your page.

Here we are declaring the ID of “nav” this will help declare the specific list were are styling.

Here I am displaying the line items in line floating left to and turning off any styles.

Here we set the style for the UL specifically calling the ID. You probably wouldn’t have another nav on the page but this is just the ID I chose to use. But you may have another list so the ID is important.

Here we are relying on the Body ID to declare what page we are on and declare the correct style. Here the Body ID is page1.

Here we are identifying each link and it’s hover state as well as using the Body ID for the page. This comes in handy when you can mark the page the visitor is on.

Now just duplicate this last block of CSS for each link changing the background image coordinates. I find easiest to copy the code and duplicate it and change the image coordinates. This way it saves time and you won’t make any typos creating more work for yourself. Click here to see the demo and you can view the source for the CSS. Contact me if you have any questions.

Subscribe to my feed for more articles and tutorials.

Guide to Installing WordPress On Localhost

Getting Started Installing WordPress Locally

Installing WordPress on a local server is easy once you understand a few steps. Its important to have a locally hosted version of your website to test the recent version of WordPress and your plugins work properly before uploading them to a live server. Many times WordPress will update and cause plugins to malfunction. Having a copy of your site on local server will allow you to make updates and test how they look and perform.

First you will need a local server. I highly recommend installing WampServer on your local computer. It works so much easier than Microsoft Internet Information Services (IIS). You can download the latest version here wampserver.com . This bundle includes Apache, MySQL and  phpMyadmin in one installation. Download and install the latest version of WordPress on your local server. Make sure the version of WordPress is updated as well as your plugins on your online site. Using FTP download all your files of your site.  Your local site should now have the same folder structure as the online version.

The best approach I have found to export and transfer your data to a localhost is to use phpMyAdmin. phpMyAdmin is a free tool written in PHP, and it allows you to manage your databases in MySQL. Your hosting company should already have phpMyAdmin installed in your Cpanel.  It should be located in the databases section of your Cpanel.

Open phpMyAdmin and look at the top left of the screen. Here you will see all the databases listed. Yours might have just two listed. The first one is called “information_schema”. This database contains all the information and Metadata used for all the other databases. For the purpose of this tutorial, you do not need to be concerned with this database. Go to settings -> permalinks.

Click on the name of your database on the left margin. Then make sure the name of your database appears at the top. You should now see all the tables listed inside your WordPress database. Next, select the checkbox that says “check all”. Now we are ready to export your entire WordPress database including any other data created from plugins.

Select the “export” tab at the top of the page. Under “export method” select “custom”.  Leave all the tables selected. Select to export as a SQL file. Under “format specific instructions” select “structure and data”. Every thing else can be left alone and revisit if you have any trouble. Hit go and save your SQL file.

Pagesd: 1 2

Exploring the Features of HTML5

By now you may have heard a little about HTML5 and wondered how will it effect your web authoring. HTML4, the last major version of the markup language, began back in 1997 and a lot has changed in web site technology since. As of this writing, HTML5 has not officially been adopted and remains in draft stage at the W3C. HTML5 is designed so that old browsers can safely ignore new HTML5 markup allowing a smooth conversion to the new way of doing things.

HTML5 changes the common uses of a generic block where you would use <div> for example and in-line <span>elements. Instead of a generic description, a new tag such as <nav> is used to designate a navigation area, <footer> to declare the traditional “footer” section of a page. The way we designate media on a page has changed with inclusion of the <audio> and <video> tags instead of <object>. There is also a renewed emphasis on the importance of DOM scripting (e.g., JavaScript). The modern aspects of web site creation has moved the creators of HTML5 toward open source standards. For cross compatibility reasons, it is not best practice to rely on plug ins like Flash, Silverlight and Java. While these technologies have benefited some features of web sites, they have also created limitations.

HTML5 allows for greater control over audio and video display without relying on browser plug ins. In addition to specifying markup, HTML5 specifies scripting application programming interfaces also know as APIs. The document object model (DOM) interfaces are also extended. Once you get comfortable with working with HTML5 you will approach your web authoring in a new approach. You begin to think of assets such as audio, video, and other content that can be pulled together to make a web page. HTML5 allows you to integrate more assets into a single document, all while keeping the integrity and separation of those assets. Taking it one step further, HTML5 bridges the gap between a traditional desktop browser and the mobile phone experience. If your design and functionality work on the desktop browser chances are it will perform on the mobile phone.

HTML5 in conjunction with CSS3 and tools such as jqery offers the flexibility needed for today’s modern web sites. Your text remains selectable and authors can easily update their sites. Think of it in terms of taking content from different sources rather than hosting your own content for pages. You can organize your page semantically and link to and even pull in content from other sites, using the semantics of that page. You can separate content from organization using more than just divs, but actual first-order elements for navigation and headers and footers.

The great thing HTML5 allows you to do is develop web sites and don’t have to worry if it will work on a mobile phone and tablets.

This is now the new DOC type for HTML5 is written. And that’s it!

<code>This is some computer code</code>
This is the result of using the <code> tag some computer code

This concludes my very brief introduction to HTML5. Certainly there is so much more that you can explore on this subject. Expect more browsers to implement the new features of HTML5 in the near future. But don’t wait until then! Start to explore the new features of HTML5 today.

Subscribe to my feed for more articles and tutorials.

Discover the Power of CSS

Keeping your pages clean of extraneous markup makes your pages easier to update, SEO friendly and WC3 compliant. Using the CSS approach, you separate the content from presentation. When you first begin to learn CSS, you may want to just declare simple rules for your web page such as background color, font size, and font colors. The more you learn the advanced techniques, you can begin to really take control of your layout such as eliminating tables, image effects and navigation tricks.

Whatever your goals are, CSS can really be a good tool to learn and master to make your XHTML more valid and adhere to web standards. Below I will demonstrate the basics of CSS to get you started and the advantages to creating valid and clean markup in your web pages.

First thing we need to do is create a CSS file. This file will contain all the markup and instructions our pages will need. This can be done using Dreamweaver or a text editor like notepad. Below I have written the beginning of a basic CSS file. I have declared the links and their different states as well as the body style. We start with type selectors and pseudo classes..

Now we have all our links and page background defined. Since this is just an introduction I will try to keep this simple. But just imagine how far you can take this if you want. Say you want to change all the links on your web site from blue to another color and remove the underline. This would take a long time to do. But with CSS its easy to just change one file. You can take it one step further and depending on the page, your body can be a different color.

Declaring the page ID allows you to tell the visitor what page they are on. You can make the navigation button highlighted for that page. Once you declare the body ID you have control over what different elements appear on different pages. If all your paragraphs are 12 pt Helvetica, its easy to give them a different style just on the homepage. To do this we create an advanced selector.

Now we have our CSS file created, all we need to do it link it to our page. You can also link multiple CSS files if you want. Between the head tags link the CSS file and then declare the body ID.

As you can imagine, just these simple mark up instructions can have a powerful effect on your web sites and they grow. Changing just one line of a CSS file, you can change an element throughout hundreds of pages. CSS also allows your site to keep a similar uniform look across the entire web site. This has just been the beginning of what is possible with CSS. On your next web site, leave those font tags behind and explore the power of CSS.

Subscribe to my feed for more articles and tutorials.