Lost Resort BIZ - The Blog » Cristi_N

Develop a Ping-Pong game using HTML5, CSS3 and JavaScript

Cristi_N — Tue, 15 Nov 2011 09:36:00 +0000

The goal of this project is to develop a ping pong game based on the next requirements:

the game should be played by two human players using the same keyboard
the game must have an options panel to modify the ball speed, the paddle speed and the score limit for game over
the players should have the possibility to start/pause the game

Also, we’ll use CSS3 style properties to style the HTML elements and jQuery framework, to create the game engine.
This is how the result of the project looks:

Files needed

First, we create a folder named pingpong in which the index.html and style.css files will be stored. Inside the pingpong folder another two folders will be created, images which will store the images needed (just a few, for the background) and js where the JavaScript file with the game engine will be placed (and eventually the jQuery library, if no alternative is used). Having these, we can start developing the project.

Content of the `index.html` file

In HTML5 syntax, the Document Type declaration is very simple:

With this the UAs will know that the semantics of HTML5 (and previous versions of HTML) will be used. After this statement we can declare the root element html and its descendents head and body.



Ping Pong Battle  - a game example using HTML5, CSS3 and JavaScript

Inside the head element the title element should come first. After this, some metadata for the page is added: character set, the name of the author, the application’s name used to generate the page etc. The base element allows authors to specify the document base URL for the purposes of resolving relative URLs, and the name of the default browsing context for the purposes of following hyperlinks. The element does not represent any content beyond this information.

A custom font will be used to style some text inside the page, thus the link element which points to a storage location for this custom font-type. After this, the jQuery library is loaded. Note that the JavaScript file with the game engine and a jQuery plugin are loaded after all HTML elements are declared (placed just before the ending body tag), due to the fact that undefined elements are not desired.

The body element will have the following content:


	
		
			Player A: 00To move paddle use W key for going UP and S key for going DOWN.
			
				
					
					Press button to Start the game and use Space bar to Pause the game.
				
			
			Player B: 00To move paddle use UP key for going UP and DOWN key for going DOWN.
		
		
			
				
				
				
				
					The game is paused.
 Click the Start/Resume button to resume the game
				
				
					GAME OVER!
				
				
			
		
		
			
				Ball Speed:  
				Max Score: 
				Paddle Speed:

The container with the ID scoreboard will carry the “Start/Resume game” button and the score (which will be updated dynamically) board for the both players. In HTML5 there is an element named button which can be added to perform some action. Note the attribute type="button" which means that it does nothing if the button is clicked. If this is not specified, the page will be reloaded with every click in an undesirable loop.

The container with the ID playground will have the moving paddle for the players and the generic ball, and the container with the ID saveoptions will carry a form which based on user input will modify the “Ball Speed”, “Paddle Speed” and the value of “Max Score”.

Having this, we can now start developing the game engine.

CSS properties for HTML elements – tips and tricks

Cristi_N — Mon, 24 Oct 2011 08:54:18 +0000

Today, web browsers tend to adhere more accurately to the Web Standards, especially when it comes about CSS properties. CSS3 properties are supported by all web browser engines and with every version released more new properties can be used to style the HTML elements. In this article I’ll try to emphasize some useful approaches which can be used to make your work easier.

Which statement is served first?

A style.css file is nothing more than a text file with (a lot of) statements which define properties for HTML elements. Note, this is the default style sheet file, and the statements are read from top to bottom and from left to right. So, a good approach is to have on top statements for html and body elements, and general properties for other HTML elements (like text-decoration:none for anchor link, or list-style-type:none for unordered or ordered list elements etc.). Keeping things in good order, will save you time from not wasting it.

Which property should come first?

When declaring properties for styling HTML elements I think is better to start with properties that have to do with the position of the element inside the HTML page. So, start with declarations for display, margin, padding and position, and finish with the font characteristics. Also, give a width to the elements like img or the ones who float. With this approach, you’ll avoid loading pages with elements that “struggle” to find their places inside the content.

Which value for measurement unit to use?

When it comes about values for measurement units, is better to use px, a relative unit to the viewing device for style properties like margin, padding, position and width. At least, a pixel has the same dimension in all web browsers’ engine, and the cross-browser differences are not noticeable. For font you can use em to have the height flexible.

Dealing with images and objects

Give a width and a height to the images or the objects you want to be loaded inside the page. With this, you wont see “running” pieces of text finding their places inside the page. Note that, this elements will overflow if their width will exceed the width of their parent element (a div). For avoiding this, is better to set a maximum limit for the element’s width:

img {max-width:100%;height:auto}

With this, the image width will be limited to it’s parent width, and height:auto will set the height to the correct value, preserving the aspect ratio. An object is often the media stream of a movie or a video clip. Setting the same maximum limit as the images have, wont have the same result in all major browser. A solution might be to set the max-width to 100% and the max-height to a maximum value in pixels based on the aspect ratio of the video AND taking into consideration the width of the parent in pixels. More precisely, if you have a container with the width set to 600px, set the max-height of the object to 450px (aspect ratio 4:3).

Classes or IDs?

When you want to style some HTML elements or to manipulate them using JavaScript giving and ID and/or classes to him will help things out. An ID is an unique identifier so, it can be used once per page. A footer, a navigation menu or a main content container should be emphasized by an ID. Classes must be used when more than one element needs to be styled or manipulated. Semantically, is incorrect to use only classes inside a HTML page. But, this approach can be used, because no errors will occur.

Tables or DIVs?

In our days, the trend is to use DIV as a container and to keep separated the style properties for the HTML elements, and make the page layout “tableless”. Anyway, tables are good also, at least when it comes about forms. The elements are aligned better inside a form, when label and input are coming together, if they are placed inside a td element.

Conclusions

A good start, when you develop a website site, with solid knowledge as a foundation for HTML and CSS coding, will keep things clear and easy to understand for further improvements.

Fistic – WordPress Template

Cristi_N — Sun, 16 Jan 2011 06:37:38 +0000

This is a free WordPress template released under the GPL v3. The colors used are (most) green (thus the Fistic name) and white and some variations of dark green nuance.

Structure

The header of the page page has 3 (three) areas: first: the title and the description of the blog which float to the right, second the menu: (supports custom menus) and third: a container with a search box floating to the right and a box with a link pointing to login page if user is not logged in and to admin panel if the user is logged in.

The front page has a different layout from single post and single page. It lists the existing post with the following format: on the left the title of the post (permalink to the post), in the middle a thumbnail and on the right the excerpt of the post. The image thumbnail is generated as follows: if the post doesn’t have a featured image, a function generates a random number between 1 and 6 and adds an image from the /template_directory/img/thumbs/ folder if is not a sticky post, and from the /template_directory/img/sticky/ folder if it is a sticky post. See the code bellow:

//Random image for thumbs if don't exist
function random_thumb_post () {
	$templ_dir = get_bloginfo('template_directory');
	$ext = '.png';
	if (!is_sticky()) {
		$thumb_dir = '/img/thumbs/';
	} else {
		$thumb_dir = '/img/sticky/';
	};
	$i=rand(1,6);
	$img[$i]= $templ_dir . $thumb_dir . $i. $ext;
	print '<img class="float-left thumb-img" src="'.$img[$i].'" alt=" " />';
	};

Note that the images are PNGs and you can see how they are displayed on the second page of the front page of this presentation environment.

The single page has the main content floating on the left and a sidebar floating on right. The main content container is split in two, on the right side being the details for the post (time, tags, author) and a box with a list of random post titles (excluding the current one).

The footer area has just a few notes about the copyright notice and a small text about the template's author.

Gallery

Web browser compatibility

The template was tested on different environments and it displays well on Firefox v3.6, Opera v10.63, Safari v5.0, Chrome v8.0 and Internet Explorer v8.0. Looks good on Internet Explorer v7.0 and more than acceptable on Internet Explorer v6.0.

Known issues

Opera doesn't know how to render the italicized version of the used font (Neucha). Also, in "Reader made ... comments" section on front page, for Linux OSes is seems that the font used (sans-serif) doesn't fit the text in the container width, so I've place the "Nimbus Mono L" before sans serif-font, and it looks a little bit different.

Download

You can DOWNLOAD the template from WordPress site. A LIVE PREVIEW of the template is available also.

Check for pagination of front or archive page in WordPress

Cristi_N — Thu, 11 Nov 2010 09:18:52 +0000

In my WordPress templates, as many others web developers are doing in their own, I put the navigation links for posts on front page or archive type page in a container, styled using CSS properties. There are situations when the container is displayed well, when the pagination links are not present. But, why this container shouldn’t be displayed at all, to preserve a clean appearance of the template?

Check for pagination

The solution is quite simple and doesn’t require a lot of coding to achieve this result. If you take a look at how WordPress Link Template Functions are made you’ll see that one parameter which counts is max_num_pages, which, I presume, stores the value of the maximum page number to navigate through. So, check if this value is greater than 1 (one), and the value returned is true, than, display the pagination links. The following code can be placed before the pagination links’ container:

max_num_pages ; ?>
	 1) : ?>
		//navigation links container here

You don’t need to reset the query. Also I leave this code on two statements just for artistic impression. You can use if ($wp_query->max_num_pages) > 1 only statement as well, the result is the same.

Pencil Draw – WordPress Template

Cristi_N — Thu, 14 Oct 2010 05:35:28 +0000

About the template

The template was created using blue, green and white colors. It has a header area, a main content floating to the right, a sidebar floating to the left and a footer area. The design was built based on what I call a “pencil draw” simulation, used to create the corners of the containers and as background for various inpage elements. The header area has a search form, so the one in the sidebar is not necessary anymore.

The design

The design is not very complicated and/or graphic emphasized. The containers were built using 3 (three) <div> elements which overlap one over another to create the box effect. The DTD used for the HTML code is XHTML 1.0 Transitional. The fonts used for the template are Trebuchet MS and Georgia.

The header area

The header area contains a heading formatted as a link for the name of the blog, and the description of the blog goes under it. Those two elements are placed on the left side. On the right side I placed a search form.
The last element is the menu container. The template supports custom menus as it is emphasized in WordPress codex about wp_nav_menu(). As the documentation says, if no custom menu is defined the function will fallback to wp_page_menu, else if name argument has no value defined or the value defined doesn't match the name of any custom menu defined, the function's name argument will take the name of the first custom menu defined (with the lowest ID). To use any other custom menu you have to manually add the menu name in the functions.php file in the navigation menu section. The menu supports two levels deep navigation (the parent will have children, and the children will have children), which means that the style sheet formats the menu list elements to be displayed. If you want more you have to add the proper formatting for the third level and so on (i.e.: div#menu ul ul ul ...). You have to pay attention to the order the CSS properties are declared, as long as they are served to the HTML page from top to bottom of the style.css.

The main content container

This container floats to the right. The main page file, index.php takes the while loop for the exiting posts and displays the entire content of the posts, not the excerpt. Based on the way the container is created, it was simple to add a conditional statement for the sticky post and with the help of the CSS properties to emphasized it on page. The pages supports wp_link_pages() function which will add links to the next pages of one post, if it is split in more than one parts. Another function used is wp_list_pages() to add a link inside the page to the child pages of the current page. The page.php and single.php pages has the comment form built using the comments_template() function. Also I added a filter to change the messages of the input elements' labels. The template supports nested comments, three levels deep. If you want more, you have to add the proper style properties to achieve the desired effect. The comments made by the administrator and by the author of the post are styled to be displayed different from the other comments. But, you have to modify in the style.css file the statements for the comment-author-administrator class, if your nickname, as it appears in the dashboard of your user admin (or editor) page, is different from administrator, and change it to the nickname you have. Otherwise, no change to the comment style. The comment li elements are not styled differently for even and odd classes. In the next version this will be added.

The template also has a 404.php, a search.php and an archive.php page. If you want to use the archive.php page read how to create an archive page.

The sidebar

The sidebar floats to the left and it supports widgets. By default it has 4 (four) custom widgets defined: Category, Blogroll, Archives (monthly) and Meta. Also in functions.php file has 3 (three) custom widgets declared: Custom Calendar, Custom Search Form and Custom Tag Cloud.

The footer

The footer has 2 functions which will generate a list of 3 (three) links for random posts and 3 (three) links for random pages. These two containers will float to the left, and on the right side are posted credentials for the template's author.

Credits

The template is released under GPL v3 license. You can use it as it is, modify it, for commercial or non-commercial use.

You can DOWNLOAD the template from WordPress site. A LIVE PREVIEW of the template is available also.

Red Shadow WordPress Template

Cristi_N — Wed, 15 Sep 2010 06:41:17 +0000

About the template

Basically it has the backbone of the ~~actual~~ previous template of this blog. But, being developed based on an old WordPress template, requires a lot of code updates to meet the latest major version requirements. Anyway, after a week of reading, writing and designing and after a few more to wait for its approval, now it is ready to be distributed.

The design

The design is not very complicated and/or graphic emphasized. It has four main areas: the header, the main content container, the left sidebar and the footer. The containers were built using 8 (eight) <div> elements which overlap one over another to create the box effect. The style sheet formats almost all HTML elements (the drop-down list and the radio buttons are not, and a few more). Anyway, if you want to make some modifications, go ahead and do it. The DTD used for the HTML code is XHTML 1.0 Transitional. The font used for the main headings is Josefin Sans Std Light. The method used by Google seems to not be supported by old IE versions.

The header area

The header area contains a heading formatted as a link for the name of the blog, and the description of the blog goes under it. Those two elements are placed on the left side. On the right side there are 2 (two) images formatted as links which will give the possibility to your readers to subscribe to your articles using RSS 2 feeds and the Google Feedburner. For the last one you have to edit the header.php file and add the necessary link provided by Google. Maybe, in the near future I'll create a function to make this happened using the Dashboard.

The last element is the menu container. The template supports custom menus as it is emphasized in WordPress codex about wp_nav_menu(). As the documentation says, if no custom menu is defined the function will fallback to wp_page_menu, else if name argument has no value defined or the value defined doesn't match the name of any custom menu defined, the function's name argument will take the name of the first custom menu defined (with the lowest ID). To use any other custom menu you have to manually add the menu name in the functions.php file in the navigation menu section. The menu supports two levels deep navigation (the parent will have children, and the children will have children), which means that the style sheet formats the menu list elements to be displayed. If you want more you have to add the proper formatting for the third level and so on (i.e.: div#menu ul ul ul ...). You have to pay attention to the order the CSS properties are declared, as long as they are served to the HTML page from top to bottom of the style.css.
A snippet of the code is presented bellow.

Important!
In this area you have two icons on the right side. One points to the rss feed link and the other should pointed to you feedburner link. Read more here how to obtain your link. After this you have to edit header.php and add the link in the proper place.

The main content container

This container floats to the left. The main page file, index.php takes the while loop for the exiting posts and displays the entire content of the posts, not the excerpt. Based on the way the container is created, it was simple to add a conditional statement for the sticky post and with the help of the CSS properties to emphasized it on page. Another feature added, if I can say so, was to shrink the message "Enter your password to view comments." which is generated by comments_popup_link() function declared in comment-template.php file on line 973. The problem was if a password protected post exists and the password was not typed and used, instead of displaying "No comments" or "1 Comment" message, the page serve the "Enter your ..." message. This instance is ~~only~~ present in a WPMU environment all WP environment, based on what I experienced. So, shrinking the message assures that it will fit the container's width, otherwise will go under the place should be. The pages supports wp_link_pages() function which will add links to the next pages of one post, if it is split in more than one parts. Another function used is wp_list_pages() to add a link inside the page to the child pages of the current page. The page.php and single.php pages has the comment form built using the comments_template() function. Also I added a filter to change the messages of the input elements' labels. The template supports nested comments, three levels deep. If you want more, you have to add the proper style properties to achieve the desired effect. The comments made by the administrator (or by the main editor) are styled to be displayed different from the other comments. But, you have to modify in the style.css file the statements for the comment-author-administrator class, if your nickname, as it appears in the dashboard of your user admin (or editor) page, is different from administrator, and change it to the nickname you have. Otherwise, no change to the comment style. The comment li elements has different background for even and odd classes.

The template also has a 404.php, a search.php and an archive.php page. If you want to use the archive.php page read how to create an archive page.

The sidebar

The sidebar floats to the right and it supports widgets. By default it has 4 (four) custom widgets defined: Category, Blogroll, Archives (monthly) and Meta. Also in functions.php file has 3(three) custom widgets declared: Custom Calendar, Custom Search Widget and Custom Tag Cloud. Please use the Custom Calendar widget as it is formatted with a different background box.

The footer

The footer has 2 links for RSS feeds and a link for the author of this template. Also it has a simple custom function which will display a Welcome back, user first name user last name message if the user is logged in, or a Login link if the user is not logged in. Anyway, it will be a little change, the message will be formatted as a link to the admin page, in the next version of this template.

Credits

The template is released under GPL v3 license. You can use it as it is, modify it, for commercial or non-commercial use. A thank you message is all that I need, if you get some satisfaction using this template.

You can DOWNLOAD the template from WordPress site. A LIVE PREVIEW of the template is available also.

I hope you'll enjoy it .

Apache Server 2 – Bible

Cristi_N — Mon, 16 Aug 2010 08:28:46 +0000

A book by Mohammed J. Kabir

Structure of the book

The book is structured in six parts, starting from httpd server installation and ending covering the performance and scalability of the Apache Server. Even it was written long time ago, the book still remains a good reading to understand how Apache httpd server runs and how to administrate it for optimal functionality.

Part I: Getting Started

In this part the author explains how to get Apache up and running with minimal changes to the default configuration files so that you can get Apache httpd server up and running on your system as quickly as possible. You can install httpd server on Linux and/or Windows machines.

Part II: Website Administration

This part focuses on typical Web administration tasks such as virtual Web-site creation, user authentication and authorization tasks, monitoring, logging, rewriting and redirecting URLs, proxy service, and the like. You learn a great deal there is to know about creating and managing virtual Web sites. You master various methods of user authentication, authorization, and access control techniques. You learn to monitor Web servers and to customize log files for analysis.

Part III: Running Web Applications

The practice of serving static HTML pages is almost a thing of the past. These days, most popular Web sites have a great deal of dynamic content. People do not visit Web sites that do not change frequently. Therefore, it is important to know how to enable dynamic contents using CGI scripts, Server Side Includes, FastCGI applications, PHP, mod_perl scripts, and Java servlets. This part shows you how to use all of these technologies with Apache.

Part IV: Securing Your Web Site

Ensuring Web site security is a critical part of a Web administrator’s job. In this part, the author discuss the various security issues that can arise with Apache, and how to resolve these issues by using various tools, techniques, and policies or guidelines. He also shows you how to turn your Apache server into a Secure Socket Layer (SSL) – capable Web server using either the mod_ssl or Apache-SSL modules. You are also introduced to the potential risks of running SSI and CGI programs and how to take preventive measures to avoid these risks.

Part V: Running Apache on Windows

As the title says, you will learn hot to install and run Apache on a 32 bits Windows platform. With Apache 2.0, the performance of Apache Web server under this platform has become very promising. I am using too, as a localhost environment and so far so good.

Part VI: Tuning for Performance and Scalability

Like any good application, Apache can be fine-tuned beyond the initial configuration for higher performance.
In this part, the author shows you how to speed up Apache by tuning the configuration, and you will also learn how to create a scalable Web server network using multiple Apache Web server systems.

Conclusions

A comprehensive book about how to install, configure and tweak the Apache httpd server. Examples accompanied the subjects debated. A good start for reading about the Apache httpd Server.

References

The book itself. Well, I did not find any direct link to the official publisher’s site. Wiley is the successor of Hungry Minds, but doesn’t have any records about this book. If you search on Google about the title’s book you’ll even find an electronic format of it.

XML 1.1 Bible, 3rd Edition

Cristi_N — Mon, 15 Mar 2010 09:10:29 +0000

A book by Elliotte Rusty Harold

A few words about author

Elliotte Rusty Harold is an internationally respected writer, programmer, and educator, both on the Internet and off. He got his start writing FAQ lists for the Macintosh newsgroups on Usenet and has since branched out into books, Web sites, and newsletters. He’s an adjunct professor of computer science at Polytechnic University in Brooklyn, New York. His Cafe con Leche Web site at cafeconleche.org has become one of the most popular independent XML sites on the Internet.

Subject covered by the book

The author speaks more to a website page author and less to a software programmer. XML is a markup language and not a programming language. The book covers the following aspects: you’ll learn how to validate documents against DTDs and schemas, how to author XML documents and make sure your XML is well formed, how to format your documents with CSS and XSL style sheets and how to build large documents from smaller parts using entities and XInclude and to connect documents with XLinks and XPointers.

The book is structured in five parts, starting with the simple things of introducing XML and ending with XML applications, and the data flows on more than 1150 pages.

XML is for structured data

XML is ideal for large and complex documents because the data is structured. You specify a vocabulary that defines the elements in the document, and you can specify the relations between elements. XML is a document format, a series of rules about what a document looks like. Comparing with HTML which has predefined elements, with XML you can define your own elements with the limitation that they are not completely arbitrary and have to follow a specific set of rules. An XML document has to be a well-formed document.

Document Type Definitions

The second part of the book covers how to validate XML documents against DTDs. A document type definition lists the elements, attributes, entities, and notations that can be used in a document, as well as their possible relationships to one another. It is set of declarations of rules for the structure of elements in an XML document.

Style Languages

To style the output of an XML document you can apply the rules of CSS, as used for HTML documents. But you can use the more powerful XSL (Extensible Stylesheet Language) which includes both a transformation language and a formatting language. The third part of the book covers both aspects, XSL Transformations (XSLT) and XSL Formatting Objects (XSL-FO) with examples to understand well how XSL works.

Supplemental Technologies

This part of the book is about XLinks, XPointers, XInclude and Schemas. XLink is similar with HTML link but is not restricted only to <A> (anchor) tag, which is a more flexible approach.
Schemas address a number of perceived limitations of DTDs, including a strange, non-XML syntax, namespace incompatibility, lack of data typing, and limited extensibility and scalability.

XML Application

This last part introduces more deeply in XHTML structure. XHTML 1.1 is much more practically extensible.
It is divided into abstract modules, each covering a specific area of functionality, such as tables, forms, images, structure, and text. The HTML elements and attributes are structured in 28 modules. For the most part, however, standard HTML pages require most of the modules. It’s when you begin mixing XHTML into your own XML applications that you can take advantage of smaller subsets of functionality.

Conclusions

If you want to learn how to use structured data with the help of XML and XHTML this book is a good start. Aspects are well explained and accompanied by detailed examples. Even it was released in 2004 is far from being obsolete.

References

XML Bible, 3rd edition - ISBN: 978-0-7645-4986-1

Ubuntu – useful applications

Cristi_N — Fri, 05 Mar 2010 13:41:29 +0000

As of today, Ubuntu had come to its 9.10 version, named Karmic Koala. Ubuntu is a Linux based operating system, built mostly from Debian. To some extent is a good alternative for paid Operating Systems (Windows, Mac OS etc.). If you intend to use this OS mostly for Internet surfing, programming, learning, image manipulation, testing and some other tasks it is a good choice to install it on your computer.

Windows emulation application

Wine lets you run Windows software on other operating systems (like Linux). You have to note that not every application will run, but users tested and reviewed more thousands applications. Application database has more than 13,000 entries with applications that work on various OSes.

Updating your Operating System

This operation can be done using two methods. First you can use the Update Manager (which can be find under System –> Administration.

After you press the Check button you will be prompted for your user session password. After this step, if any updates available, you can install them, all or partially based on your selection.

The other method can achieve the same result using the command prompt terminal. Terminal can be found under Applications –> Accessories.

In the terminal you can type:

sudo apt-get update
sudo apt-get upgrade

The apt-get command is a powerful command-line tool used to work with Ubuntu’s Advanced Packaging Tool (APT) performing such functions as installation of new software packages, upgrade of existing software packages, updating of the package list index, and even upgrading the entire Ubuntu system.

First command updates the package index; the APT package index is essentially a database of available packages from the repositories defined in the /etc/apt/sources.list file.
Second command upgrades packages; from time to time, updated versions of some packages currently installed on your computer become available from the package repositories.

The sudo command will run the commands as super user and you’ll be prompted for your user session password. After the system update you can run sudo apt-get autoclean to clear out the local repository of retrieved package files. More details about apt-get command can be found if you ran in a terminal the command man apt-get.

How to create navigational menus using only images

Cristi_N — Thu, 29 Oct 2009 11:41:59 +0000

Pre-Requisites: We want to create a navigational menu using a fancy font-type which looks great on our website. But, we want to achieve this effect not using any JavaScript library or any flash object and we want this menu to be similar in functionality with any other menu that uses text in anchor links.

Creating the menu

The solution I will present I find it simple and easy to implement. We will create a navigational menu using an unordered list of anchor links displayed on one line, and we use different background images for each element to create the desired effect. The HTML code will be as following:


	  Home
	  Services
	  About Us
	  Partners
	  Policy
	  Contact

Nothing complicated so far.

The CSS style properties that we will use are:

ul#button li{float:left;padding:0;margin:0.1em 0.1em 0 0.1em;width:110px;height:40px;text-align:center}
ul#button li a{text-decoration:none;color:#ffffff;display:block;height:40px;font-size:0px;line-height:0px}
#home{background:url(images/buttons_sprite.png) no-repeat 0 0}
li#home a:hover{background:url(images/buttons_sprite.png) no-repeat 0 -41px}
#services{background:url(images/buttons_sprite.png) no-repeat -110px 0}
li#services a:hover{background:url(images/buttons_sprite.png) no-repeat -110px -41px}
#about_us{background:url(images/buttons_sprite.png) no-repeat -220px 0}
li#about_us a:hover{background:url(images/buttons_sprite.png) no-repeat -220px -41px}
#partners{background:url(images/buttons_sprite.png) no-repeat -330px 0}
li#partners a:hover{background:url(images/buttons_sprite.png) no-repeat -330px -41px}
#policy{background:url(images/buttons_sprite.png) no-repeat -440px 0} 
li#policy a:hover{background:url(images/buttons_sprite.png) no-repeat -440px -41px}
#contact{background:url(images/buttons_sprite.png) no-repeat -550px 0}
li#contact a:hover{background:url(images/buttons_sprite.png) no-repeat -550px -41px}

As you can see, we will use one image which will incorporate all the necessary images we need, 6 for each active item and another 6 for roll-over effect. In this circumstances it will be one server request (instead of having 12 for all elements) for background images. Using the background-position CSS style property and setting a width and a weight for each list item we can control the appearance of the list elements. Setting the font-size
to 0px the text should not be displayed. But in Safari and Chrome if you set it to 0px or 0em somewhat the text is displayed, even its dimension is reduced. Adding line-height property and set it to 0px will make the text disappear forever.

Conclusions

With this method you can have the appearance you want for your menu using only images with the help of CSS style properties, with the font type you want, and with the good format of the HTML page code in accordance with the SEO requirements.

Follow this link and see few examples on how to create menus using only images.

Lost Resort BIZ - The Blog » Cristi_N

Develop a Ping-Pong game using HTML5, CSS3 and JavaScript

Files needed

Content of the index.html file

CSS properties for HTML elements – tips and tricks

Which statement is served first?

Which property should come first?

Which value for measurement unit to use?

Dealing with images and objects

Classes or IDs?

Tables or DIVs?

Conclusions

Fistic – WordPress Template

Structure

Gallery

Web browser compatibility

Known issues

Download

Check for pagination of front or archive page in WordPress

Check for pagination

Pencil Draw – WordPress Template

About the template

The design

The header area

The main content container

The sidebar

The footer

Credits

Red Shadow WordPress Template

About the template

The design

The header area

The main content container

The sidebar

The footer

Credits

Apache Server 2 – Bible

A book by Mohammed J. Kabir

Structure of the book

Part I: Getting Started

Part II: Website Administration

Part III: Running Web Applications

Part IV: Securing Your Web Site

Part V: Running Apache on Windows

Part VI: Tuning for Performance and Scalability

Conclusions

References

XML 1.1 Bible, 3rd Edition

A book by Elliotte Rusty Harold

A few words about author

Subject covered by the book

XML is for structured data

Document Type Definitions

Style Languages

Supplemental Technologies

XML Application

Conclusions

References

Ubuntu – useful applications

Windows emulation application

Updating your Operating System

How to create navigational menus using only images

Creating the menu

Conclusions

Content of the `index.html` file