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

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.

Configuring the Xorg X server

Because, even it is based on Linux kernel, Ubuntu has a Graphic User Interface, I’ll present an useful application for modifying the X-server parameters, even the application is not supported anymore, Xorg-edit. The author’s home page can be found here.

After you compile the application, it can be found under System –> Administration section. Every time you’ll run the application you will be prompted for your user session password, to gain super user rights.

The application’s window presents six tabs: Device, Monitor, Input Device, Screen, Server and Other Options. Each one will give you the option to add or to modify X-server parameters, and to test them before you restart X-server. But, please note that, the modifications will be effective only after you restart the Xorg X-server.

Device Section

Using the lspci -v | grep VGA command in a terminal you’ll find the information regarding the graphic display controller. Note that information.
On Device tab click on the drop-down list indicator and chose “Add Device” option. After this type in the name of your VGA controller (i.e.: S3 Inc. VT8375 [ProSavage8 KM266/KL266], this is the name the VGA controller for my testing laptop).

On “Driver” option you can chose the driver for your graphic card from the drop-down list. The BusID can be found using the command in a terminal lspci | egrep “AGP|PCI Express|VGA|Display” (which is similar with the command above, and in my case the output is 01:00.0 VGA compatible controller: S3 Inc. VT 8375 [ProSavage8 KM266/KL266]). So, the BusID is 01:00.0, and should be associate with the computer bus that the graphic card uses (in my case I added PCI:01:00:0; note the double dot between the 01 and 00 and between 00 and 0, which is different from the output of the lspci command (i.e.: 01:00.0)).

On “Video Ram” option you can add the amount of RAM memory in KB that the graphic card is using. This option is not mandatory (as the Manual page for Xorg X-server says).

“Screen Number” option is mandatory for cards where a single PCI entity can drive more than one display, range from 0 to one less than the total number of heads per entity.

This options appear by default on Device tab, but you have the option to add new one along with its value.

Monitor Section

In this section you have the possibility to define parameters for your displaying device. The mandatory entry for this section is the Identifier which is an unique name for the monitor.

In the Hor.Sync field you can input the range(s) of horizontal sync frequencies supported by the monitor and it’s measured in KHz. If you are unsure about this range you can input a minimum value (take 20 KHz) and a maximum value (120 KHz) separated by a dash and it should be enough to cover your monitor horizontal sync frequency.

In the Vert.Refresh field holds vertical refresh frequencies supported by the monitor and the units are in Hz. As for Hor.Sync frequency you can specify a range of values (with minimum an maximum value) to cover the monitor’s vertical refresh frequency.

The display size gives the width and height, in millimeters, of the picture area of the monitor, is optional and is useful to calculate the DPI of the screen.

The Modeline entry is a more compact version of the Mode entry, and can be used to specify video modes for the monitor. is a single line format for specifying video modes. The format is “name” – mode description. The mode-description is in four sections, the first three of which are mandatory. The first is the dot (pixel) clock. This is a single number specifying the pixel clock rate for the mode in MHz. The second section is a list of four numbers specifying the horizontal timings. These numbers are the hdisp, hsyncstart, hsyncend, and htotal values. The third section is a list of four numbers specifying the vertical timings. These numbers are the vdisp, vsyncstart, vsyncend, and vtotal values.. So we can assume that the values from second and third section creates pairs which represents the screen resolution.

Input Device Section

In this section is useful for input device configuration and it contains parameters for at least two devices: one for the core (primary) keyboard, and one of the core pointer.

The default options may or may not work for all hardware configurations.

Screen Section

A “screen” represents the binding of a graphics device (Device section) and a monitor (Monitor section).

The Default Depth specifies which color depth the server should use by default. The -depth command line option can be used to override this. If neither is specified, the default depth is driver-specific, but in most cases is 8.. 24 should be maximum for most graphics devices.

Each Screen section may have multiple Display subsections and they are optional. You can set different modes and options for displaying device if you want to override the default settings.

Server Section

A “server layout” represents the binding of one or more screens (Screen sections) and one or more input devices (InputDevice sections) to form a complete configuration. If no ServerLayout sections are present, the single active screen and two active (core) input devices are selected as described in the relevant sections above.

Other Options Section

The DRI section (optional) is used to provide some information for the Direct Rendering Infrastructure. In simple terms, the DRI enables hardware-accelerated 3D graphics on Linux. More specifically, it’s a software architecture for coordinating the Linux kernel, X window system, 3D graphics hardware and an OpenGL-based rendering engine.

The Extensions section is used to specify which X11 protocol extensions should be enabled or disabled. The Extensions section is optional, as are all of the entries that may be specified in it.

The Module section is used to specify which Xorg server modules should be loaded. This section is ignored when the Xorg server is built in static form. The type of modules normally loaded in this section are Xorg server extension modules. Most other module types are loaded automatically when they are needed via other mechanisms. The Module section is optional, as are all of the entries that may be specified in it.

The Files section is used to specify some path names required by the server, and is an optional entry.

Saving settings

After you entered your configuration data, before you save them, you have the option to test the x-server hitting the F7 key. If no errors present a message will be displayed saying that the configured server works well and you can see a log file that contains the result of the tested parameters. Seeing that message you can assume that you’ve entered valid values accepted by the x-server, but, too see if you entered the right values for your hardware configuration you have to restart the x-server (the simplest way, reboot the system).

Before you make any changes to your configuration xorg.conf file, located in /etc/X11/ directory, make a backup copy of it, to restore the settings if something goes wrong and your system will be unusable. Also, BE SURE that YOU KNOW EXACTLY what you are doing.

References:

xorg.conf – Configuration File for Xorg X server
Building DRI
Introduction to DRI

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:

<ul id="buttons">
<li id="home"><a href="#">Home</a></li>
<li id="services"><a href="#">Services</a></li>
<li id="about_us"><a href="#">About Us</a></li>
<li id="partners"><a href="#">Partners</a></li>
<li id="policy"><a href="#">Policy</a></li>
<li id="contact"><a href="#">Contact</a></li>
</ul>>

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.

Before you registered for the exam you should register for an account at Linux Professional Institute. After you register you’ll receive an unique LPI ID which you must provide (also with a valid ID card) at the exam center for proper identification.

Exams can be taken on Pearson Vue or Prometric Testing Centers. You can locate a Vue testing center or look-up for a Prometric test center.

I found Vue’s site more user friendly and the information more easy and more quickly to find, but this is just a personal opinion. On the other hand, it is possible that Prometric to have a testing center more close to you than Vue. It is better to take a look on both websites, to analyze data and to take the right action, convenient to your needs. The prices are similar for both providers, at least for my country. The difference is that on Vue’s site you can register for all three exams at any time and on Prometric’s site candidate must successfully pass either LPI 101 or 102 before booking for the second LPI exam and the Ubuntu 199 exam can be booked at any time.

Vouchers are valid for 12 months from date of receipt so, there is enough time to learn and to prepare for successfully passing the LPIC-1 and UPC exams.

Update, 06 June 2010: The link to “special offer exam” is dead. But the offer is still valid, and the link to “the online form” is still active. Good luck.

CSS units for measurements

According to W3 Consortium lengths refer to horizontal or vertical measurements and there are two types of length units: relative and absolute. Using relative units means that the scale from one medium to another will be more easily.

Relative units are:

• em: the ‘font-size’ of the relevant font
• ex: the ‘x-height’ of the relevant font
• px: pixels, relative to the viewing device

The absolute units are:

• in: inches — 1 inch is equal to 2.54 centimeters.
• cm: centimeters
• mm: millimeters
• pt: points — the points used by CSS 2.1 are equal to 1/72nd of an inch.
• pc: picas — 1 pica is equal to 12 points.

Absolute length units are only useful when the physical properties of the output medium are known and with this, the discussion about these measurement units is closed.

The most known and used units within CSS style sheets are em and px. One is relative to the relevant font and the other is relevant to the viewing device.

Using em as measurement unit

If we check the properties for our default (or many) web browser we will see that the default font size is set to 16px. A good approach is to define the font-size style attribute for the elements displayed in a web page to 62.5% which means that 1em measurement unit will be equal to 10px (simple calculation 62.5%*16px = 10px), or to directly declare font-size:10px. This is good because if we define a 1.1 em unit it is translated to 11px and so on. On the other hand if we are using values with more than one digit to represent non-integer values, problems may occur because, using values like 1.2345em cannot split a pixel to the desired value (1.2345*10px = 12.345px) and the measurement unit will take the rounded value. The problem comes when the subvalue is half of the value, because there is a different behavior among the top wide-spread web browser on rounding these values. Some of them will round the subvalues up (IE 6 and IE 7) and some of them will round the subvalues down (Opera and Safari) and Firefox tends to round both up and down. With this approach the result will not be the same on different web browsers.

So, a good behavior is to use as much as possible multiplying values that in the end will compute integer values (measured as pixels). Take a look at this application which transforms px to em values and viceversa.

Using px as measurement unit

Because the content of the web pages is mostly served as graphic representation through an user agent to the audience a good reflex might be to set all measurement units using px values. This approach tends to be necessary and most desirable when the width and height style properties are declared, and even the measurement unit is relative to the viewing device, in absolute values the space occupied is the same.

Using a mix of em and px as measurement units

Another option is to use px as a measurement unit to declare some style properties, such as width, height, background-position or letter-spacing, and em measurement unit to declare another style properties like margin, padding, line-height, font-size or text-indent. In the last case, the properties will follow the size of the text font.

Conclusions for what measurement units to use

Based on whatever option we chose and use for measurement units it’s good to follow some practices.

A good start is to declare explicitly the font-size for the body element to a fixed value of 10px. In this case the control of the sizes isn’t influenced by the default font size value on users’ web browser. If we set the value as a percent (62,5%) relative to the default web browser’s font size value, and if this value is different from 16px, problems may occur.

Use px as a measurement unit for width and height of the elements. You may find that in IE7 11em is not equal with 110px when you set the width of an element (assuming that 1em = 10px).

When we use em as measurement unit is better to define subvalues of it with one digit. Using more than one could lead to some unexpected displaying behavior on some web browsers which can make the web site pages look messy.

Also, some attention should be given on inheritance on DOM tree. Changing the font-size value, after the initial declaration of 10px, should be made using the em measurement unit. Using px to declare the font size of an element will also modify the value of em measurement unit.

Today web browsers developers tend to adhere to HTML and CSS standards more accurately than a few years ago, and for a web site developer this represents less time consumed for fixing bugs for old versions of user agents. I hope that one day in the near future, the old versions browser will be gone for ever, and the HTML and CSS standards will be implemented in the same way in all major browsers.

The communication between the server and the web browser is done using XMLHttpRequest objects manipulated through a JavaScript function. The goal is to create a JavaScript function which, based on users action, will change the data displayed on users’ browser following some well defined rules.

Creating the XMLHttpRequest Object

This object is built in the browser and, depending on what browser you are running the code, it is accessed in different way. Netscape Navigator (version 7.0 and later), Apple Safari (version 1.2 and later), and Firefox let you create XMLHttpRequest objects with code like this:

XMLHttpRequestObject = new XMLHttpRequest();

In case that you are dealing with Internet Explorer the object can be created using code like this:

XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);

The object is accessed in those browsers through the browser window object, and checking it’s presence means that you are dealing with certain web browsers.

For Netscape, Safari and Firefox the code will be as follows:

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
}

For Internet Explorer we’ll have:

if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);
}

Although the XMLHttpRequest object supported in different browsers differs we can use the same basic properties and methods of this object.
So, the code used to create XMLHttpRequest object for different web browsers will be:

var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);
}

Opening the XMLHttpRequest Object

It’s time to open the XMLHttpRequest object. Here’s how you use the XMLHttpRequest object’s open method in general (items in square brackets are optional, and items in italics are placeholders that you fill in yourself):

open(“method”, “URL”[, asyncFlag[, "userName"[, "password"]]])

Where method is the HTTP method used to open the connection, such as GET, POST, PUT, HEAD, or PROPFIND, URL is the requested URL, asyncFlag is a boolean value which indicates if the call is asynchronous (default value true), userName is the user name of your account and the password is the password of your account.

The method used to open the connection will be for this case the GET method. After the connection is open, we can start to open the XMLHttpRequest object and to configure it in preparation for connecting to the server and downloading data.

This piece of JavaScript code will prepare the object:

XMLHttpRequestObject.open(“GET”, dataSource);

Note that using the open method like this configures the XMLHttpRequest object and it does not connect, or open any connection to the server.

The onreadystatechange property contains the name of the event handler that should be called when the value of the readyState property changes (read/write). Using this property we can call an anonymous function that will open the connection to the server and to download the necessary data. Inside the anonymous function, we need to check on the data that’s been downloaded: is the download complete and are we ready to use that data? We can determine that with two properties of the XMLHttpRequest object: readyState and status.

The value of 4 for the readyState property means that the download is complete and the value of 200 for the status property means that is completed OK. Checking these values with an if statement which returns the true value means that we can go further with our request.

The JavaScript code will be as follows:

XMLHttpRequestObject.onreadystatechange = function(){
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
{//here we’ll place the necessary code to fetch the data}
}

To recover the downloaded text we can use the XMLHttpRequest object’s responseText property. That property is where the XMLHttpRequest object stores downloaded plain text. If we use XML data the object property will be responseXML (we’ll use it a little bit later) which is common for all major browsers.

The JavaScript code will be:

documentGetElementById(divID).innerHTML = XMLHttpRequestObject.responseText;

where the element with the divID id will be the placeholder for our requested data.

Connecting to the server

In this example, we’re using the GET method, so we call the XMLHttpRequest object’s send method, passing it a value of null, which is JavaScript’s placeholder for a value of nothing.

The JavaScript code will be:

XMLHttpRequestObject.send(null);

At this point we have created the XMLHttpRequest object, we opened it and we have created the connection to the server. From now we can make useful XML to store data and to have the source for our Ajax requests.

Using Ajax with XML

In the Firefox/Mozilla brand of browsers, we have to specify that we’re going to be downloading XML data, not plain text. To do that, we have to set the MIME type of the download to text/xml. We can achieve this using this line of code:

XMLHttpRequestObject.overrideMimeType(“text/xml”);

Another difference will be that we will use the XMLHttpRequest object’s responseXML property, which holds a JavaScript XML document object:

var xmlDocument = XMLHttpRequestObject.responseXML;

Let’s say that we want to download data regarding streets name from a certain city area (Bucharest in my case). For this we have to create a variable streetsName which will hold the data parsed from the XML file ruled by the Tag Name read-only property:

streetsName = xmlDocument.getElementsByTagName(“streetName”);

After this we need to create the format for the placeholder of the data. In this case I will create a list of elements <span> displayed as block. Maybe it will be better to generate elements of an unordered list, but the problem is that, using the following sequence of JavaScript code, the HTML output will be a type of <ul></ul><li>...</li>, which means that we have an empty ul element and some orphans li elements, and this could lead to problems on CSS formatting.

The necessary code will be:

var xmlDocument = XMLHttpRequestObject.responseXML;
streetsName = xmlDocument.getElementsByTagName("streetName");
obj.innerHTML = "Here are the fetched streets name:";
for (loopindex = 0; loopIndex < streetsName.length; loopIndex++)
{
obj.innerHTML += "<span>" + streetsName[loopIndex].firstChild.data + "</span>";
}

where obj = document.getElementById(divID); which is the container of our data.

The structure of the XML file will be simple:

<?xml version="1.0" ?>
<streetsName>
<streetName>Calea Victoriei</streetName>
<streetName>Regina Elisabeta</streetName>
<streetName>Lascar Catargiu</streetName>
<streetName>Iuliu Maniu</streetName>
<streetName>Cotroceni</streetName>
<streetName>Ion Ionescu de la Brad</streetName>
<streetName>Calea Dorobantilor</streetName>
</streetsName>

From now the only thing we need to create is a form element which, based on user click action, will execute the function that will fetch the desired data from server.

The entire code (HTML and JavaScript) can be downloaded from the following link, a simple example on how data is fetched form server using Ajax and XML.

Use of table for building the menu

HTML element <table> has the advantage of being well implemented in all major browsers, so no displaying issues when it's content is deployed. The idea is simple, to create only one table row, with one data cell for each item menu. Using the CSS style attributes the menu will get the appearance it needs.

The HTML code is a follows:

<table>
<tr>
<td><a href="">Item 1</a></td>
<td><a href="">Second Item</a></td>
<td><a href="">Third One</a></td>
<td><a href="">Item 4</a></td>
<td><a href="">Fifth in the row</a></td>
<td><a href="">LastItem</a></td>
</tr>
</table>

We can add some style to the table appearance and be sure you set the border-collapse property to collapse so no spaces are between data cells and borders are collapsed into a single border when possible. A detailed presentation of this style property can be found at W3 Schools CSS border-collapse property page.

Using unordered list items to create navigational menu

Using the items of an unordered list to create the navigational menu is, maybe, the most used technique.
Comparing with the previous method it requires almost the same number of lines for CSS styles, and the effect is similar. To display items horizontally you can use the display:inline style property, so the elements of the unordered list are displayed in the same line, like a row of elements. Setting the item elements to be displayed as inline elements, make them "unmovable" on y axis, which means that using padding or margin property to arrange the way they are displayed has no effect. But giving some values to height or/and line-height properties this issue can be easily handled.

Another way to display the elements on the same row is to float the list-items of the unordered list to left. This method tends to be more desired then the previous and the result is much similar with the menu created using table elements.

Following the next link you can see a few examples of horizontal navigational menus using the methods described above. I left the style properties unaltered so you can see on different web browser how the menus are displayed.

Adding some graphic style to the menu

Using background images for the elements of the menu creates a nice and more desired visual effect. Even if you use a repeated background image or you create a little more sophisticated rounded corner button for your menu you definitely add a bit of color to the (maybe) flat HTML page. In the next line I'll give some hints on how to create these rounded corner buttons.

Creating rounded corner buttons for the navigational menu

The simplest approach may be to create a button with a given width and height and use it as a background image for each item of the menu. This will work fine in situations when the text of the menu items has the same length or the differences are insignificant.

Split image for the background

Another method is to split the images in two parts and build the menu items using besides the anchor element an additional span element. The code for the menu will look like:

<ul id="split">
<li><a href=""><span>Item 1</span></a></li>
<li><a href=""><span>Second Item</span></a></li>
<li><a href=""><span>Third One</span></a></li>
<li><a href=""><span>Item 4</span></a></li>
<li><a href=""><span>Fifth in the row</span></a></li>
<li><a href=""><span>Last Item</span></a></li>
</ul>

The idea is to set the display:block property for anchor and span elements, and using the padding values the items are displayed correctly with the desired effect, which means that the width of each item will follow the length of the text. Note that the image on the right side in this case should have a width which is greater than the length of the text with the values for the left and right padding added; otherwise the background image will be broken.

Using two span elements for the right and left margins

In this case the image is split in three parts, one for the right margin, second for the left margin and the third one for the middle. This last one image may have a width as small as possible, because it can be repeated on x axis. The HTML code of the menu will be as follows:

<ul id="split3">
<li><a href=""><span><span>Item 1</span></span></a></li>
<li><a href=""><span><span>Second Item</span></span></a></li>
<li><a href=""><span><span>Third One</span></span></a></li>
<li><a href=""><span><span>Item 4</span></span></a></li>
<li><a href=""><span><span>Fifth in the row</span></span></a></li>
<li><a href=""><span><span>Last Item</span></span></a></li>
</ul>

The good part for this method is that the padding values can be set just for the last span element, and this is enough to reach the desired effect. Even we have more CSS and HTML code for this last method I think is more simple than the previous one, because you don't have to tweak padding values to have all elements aligned.

Please follow this link to see (and download files) examples of building navigational menus using the method I've described.

The resulted page was tested on Firefox v3.0.9., Internet Explorer v6.0, v7.0 and v8.1, Opera v9.63, Safari v3.2.1 and Google Chrome.

Mootools JavaScript Framework

Mootools JavaScript framework is designed for the intermediate to advanced JavaScript developer and allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API. I use this framework and so far I’m pleased with the way things are going. If you want to know more about please read the Mootools documentation.
In the next lines I will present how to use one of this framework plug-in, Assets Method:images to preload images and the content after the operation is completed. It’s easy to understand and to reproduce.

Assets Method:images

What does this plug-in do? Preloads an array of images (as strings) and returns an array of img elements.. The syntax is very simple:

var myImages = new Asset.images(source[, options]);

where sources – is an array or a string, of the paths of the image files and options – (object, optional) could be a function which is executed on onProgress or onComplete events for this plug-in.

Optimizing web page appearance

The purpose of using this plug-in is to have our page content displayed after the images within are loaded. Our page will have some text and let’s say 10 images with the size varying from 60Kb to 100Kb to be displayed.
First, we need to hide the content when web page is loaded. For doing this we have two options: one to set the display style property to none, and the second to set the visibility style property to hidden. The difference between this two options is that display:none means that the placeholder for the element is not present at all, and for visibility:hidden the placeholder exists on page but is not visible.

With Mootools JavaScript Framework we can set the desired style property using:

$('myContent').setStyle('display', 'none');

 or

$('myContent').setStyle('visibility', 'hidden');

The problem is that until the JavaScript library is loaded there is a slightly chance for our content to be shown until it has the style property set. So, it will be better to use a very trivial JavaScript function to set the style property which will be declared on <head> area, and call it inside the document body.

Our function will be as follows:


function hideContent{
documentGetElementById('myContent').style.display = "none'
}

 or

function hideContent{
documentGetElementById('myContent').style.visibility = "hidden';
}

It is important where the function should be fired up. So I place the JavaScript code just after the opening <div> tag with the id "myContent". Place the code before, and you will have a "null" object.
At this point we have our content hidden. After this we can initiate the images preloading process. The options for the Asset Mootools Plug-in could be one of two functions which can be executed on onComplete or onProgress events. On onProgress we have a function which will create HTML elements so during the preloading process a "Loading content, please be patient ..." text string will be displayed, and on onComplete event a function will reveal the content of our page.

Creating HTML elements

One of the methods used to create HTML elements with Mootools is the Element constructor which creates a new element of the type passed in. I chose to create two elements, one of division type and the second of image type, which will be injected after the text generated to be displayed. The image, which will be an animated GIF, is added just as a bit of flavor for our page presentation. The code will be executed based on MooTools' custom domready event.
The elements will be created inside a division container. We have two options to place this container, before the main content container or after. If we place it at the end of page content, the string text will appear without the image, for a certain period of time, and this is an undesired effect, so it will be better to place it just after the opening <body> tag.

The JavaScript code will be as follows:

var myImages = new Asset.images(['images/img1.png', 'images/img2.png', 'images/img3.png', 'images/img4.png','images/img5.png', 'images/img6.png', 'images/img7.png', 'images/img8.png', 'images/img9.png', 'images/img10.png'], {
  onProgress: function(){
    var myDisplayTextContainer = new Element('div', {id: 'loadingText'}); //create text container
    var myPreloadingImg = new Element('img', {id: 'loadingImg'}); //create image
    myPreloadingImg.setProperty('src', 'images/preloading.gif'); //set the image source
    $('loading').grab(myDisplayTextContainer); //grabs text string container
    myPreloadingImg.inject(myDisplayTextContainer, 'after'); //inject image after text string container
    $('loadingText').set('text', 'Loading content, please be patient ...'); //create text string
  },
  onComplete: function(){
    $('loading').setStyle('display' , 'none'); //or use $('loading').setStyle('visibility', 'hidden')
    (function(){
$('myContent').setStyle('display', ''); //or use $('myContent').setStyle('visibility', 'visible')
    }).delay(250);
  }
})

I use a delay time before the content is displayed, because the animated GIF creates an ugly visual effect just before is disappearing.
Anyway, being a stochastic process, a different behavior is expected for each web browser, even the desired result may be as expected.
Please follow the link, to see how content is displayed using the Mootools Asset Method:images to preload images.

Limitations and issues using this method

There could be a chance when using this method with display style property used to hide/show content, that the images will not be displayed on Internet Explorer 6. Using visibility style property instead to target this browser engine version will fix this issue. On the other hand, if the visibility property is used on Internet Explorer 7, there could be a chance that the images and some text will not appear on page, or they are shown after some time.
Another issue is that, is more than one instance of the image injected after the text string container. This could simply be "cosmeticized" setting the overflow style property for the image container to hidden and setting the height of the container to a value that fits the text string and the preloading image heights.

Preloading images using JavaScript

If your are looking for some JavaScript functions to preload images, independent of any framework, here you can find a good example for a JavaScript Image Preloader.

I hope this resource is useful.

The Italic refers to “cursive typefaces based on a stylized form of calligraphic handwriting”, and the font style originated in Italy. The influence from calligraphy can be seen in their usual slight slanting to the right, and is definitely different from what does mean oblique writing.
When you may use <i> HTML element? It is recommended to use the <i> HTML element when you want to define terms (i.e. "the prime number is a natural number which has exactly two distinct natural number divisors: 1 and itself"), to emphasis foreign words (i.e. "Au revoir - she said, touching his hand with a tender gesture.", names of ships (i.e. "Titanic sunk at it's first and only journey.") etc.
In typography, emphasis is the exaggeration of words in a text with a font in a different style from the rest of the text—to emphasis them. So, in this situation, emphasis could mean an italic or an oblique or a bold face font type, or even small caps or adding space between letters.
A web browser displays the words between the <em> HTML starting and ending tag most often as an italic writing, but some browsers can show the text in a different way.
On the other hand if you think from a search engine optimization for your content, it seems that using <em> rather than <i> HTML element will give to your words more importance.

As a conclusion, the text effect using the <i> HTML element can be achieved using Cascading Style Sheets rules, and the use of this element could be deprecated to some point. Using <em> instead will add more importance to your words or sentences and in most cases the visual effect will be the same.

Finally we can take some conclusions about what iPowers offers for hosting different website content.

Let’s see what they offer for Pro Plan package:

• Storage space: 1,500 GB – this is a lot, and for a small or medium size company it’s hard to reach this limit, and even this characteristic is oversell still remains on top.
• Transfer/Bandwidth: 15,000 GB/month – it is OK for awhile.
• Domains Allowed: unlimited, and one is personalized and for free. Available extensions and prices.
• Support for: CGI-BIN + PHP 4 & 5. Perl, Python Server Side Includes, Secure Socket Layer etc.
• MySQL Databases: 25 – this could be not enough, depending on your demands.
• Web Statistics: AWStats – good enough to compare with Google Analytics reports.
• Access and CGI Error logs.
• FTP accounts management
• E-mail features: 2,500 email addresses with extensions your-name-domain.com or your-account-name.ipower.com.
• vDeck Control Panel – the graphic interface for managing your account.
• Possibility to install different web applications (CMS’s, e-commerce solutions etc.) through this graphic interface.
• Archive Gateway: the possibility to compress the files on the server.
• Marketing Services: A marketing guide, some free credits for Google and Yahoo advertising search etc.

The knowledgebase offers the possibility to find answer to your questions. There are more than 100 tutorials and how to’s covering many aspects, such as: configuring different email clients, account management, domain registration and services, e-commerce services, scripting, site add-ons etc. iPower Knowledgebase for more and detailed resources.

You have to note that your resources are located on a shared server and knowing the IP address of your domain you can find which are your neighbours. As an example, lostresort.biz is stored among another 460 domains, quite a lot inactive. A shared server if is configured properly you will not have to worry about security issues at a group level. Also be aware of the writing permissions you set for your folders or files.

MySQL databases are just 25 for this package and could be a serious limitation if you need more than this. Through Control Panel you can create or drop databases.
You have to know that is no support for Java. Also no support to manage your files through SSH connection. It seems that this limitation is for security reasons. Working with Java involves many resources than PHP applications. So, if you are a JBoss or NetBeans lover you are unable to watch them in action on an iPower web shared server.

One of the most important service provided by a web hosting sustainer is the technical support. Problems occur even is the user’s fault or not. iPower offer 3 ways for contancting support personnel: by phone (I did not use it), by a chat console (I did not use it) and through a console in which tickets are created (I use it often). So far I did not encountered fatal errors or persistent problems with my applications. If you are using the Service Ticket Console you have two possibilities to get you answer: within 24 hours from your request (or maybe less), and faster if pay some extra money. The longest time I had to wait until my request was solved was 7 days. But it was solved. I’ve noticed that the support service limited to a certain technical level is outsourced to some Indian companies. To be honest, I’m not very glad with this but so far I don’t have serious motives to complain about. If you search over the internet about iPower complains you’ll find a lot of negative comments. Some of them are right, but I do not agree with the comment that says “leave ‘A’ hosting provider because it is worst, and go to ‘B’ hosting provider because it is the best”. I believe that this is not an unbiased approach.

Even if you don’t buy a hosting plan form iPower at least you have something to compare. I hope that what I wrote on this post and on previous is helpfully for anyone who wants to take the decision to resort to a web hosting provider.

iPower Web Hosting solutions – Affiliate Banner