Language Flag Sprites

How to create the CSS and HTML for a hyperlink with sprite image for multiple language flags in Visual Studio.

Introduction

A major part of Ousia CMS is the multilingual management side, where all items are automatically generated and linked. There is then a control available that enables you to have a dropdown list that shows links to the content in the other languages, or a set of hyperlinks with flag images (in either 32px or 64px) to indicate the language.

We use the following item on the right as the background, and then some CSS to control the position of the element as per the dropdown below.

Please feel free to use the sprite image and CSS, however please use it from your own server! All assets are available for download below.

Creating the Structure

First off, let's create the structure, if you are here for the CSS only then skip this step.

Create a new empty project named Flags.
Add a new CSS file, called flags.css
Add a new HTML file, called flags.htm
Add an existing item, called FlagSprite_32_22.png
Add an existing item, called FlagSprite_64_45.png

We now have all of the assets we need, so let's open the flags.css file (if it hasn't already), and copy the following CSS.

CSS

body a{margin:10px;float:left;}

/*22 high by 32 wide*/

.ouFlgCS32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px -0px;box-shadow:0px 0px 1px #000;border-radius:6px;}

.ouFlgDE32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -0px;box-shadow:0px 0px 1px #000;border-radius:6px;}

.ouFlgEN32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -0px;box-shadow:0px 0px 1px #000;border-radius:6px;}

.ouFlgES32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px -22px;box-shadow:0px 0px 1px #000;border-radius:6px;}

.ouFlgFR32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -22px;box-shadow:0px 0px 1px #000;border-radius:6px;}

.ouFlgHI32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -22px;box-shadow:0px 0px 1px #000;border-radius:6px;}

.ouFlgIT32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px -44px;box-shadow:0px 0px 1px #000;border-radius:6px;}

.ouFlgPL32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -44px;box-shadow:0px 0px 1px #000;border-radius:6px;}

.ouFlgPT32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -44px;box-shadow:0px 0px 1px #000;border-radius:6px;}

.ouFlgRU32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px -66px;box-shadow:0px 0px 1px #000;border-radius:6px;}

.ouFlgTR32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -66px;box-shadow:0px 0px 1px #000;border-radius:6px;}

.ouFlgZH32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -66px;box-shadow:0px 0px 1px #000;border-radius:6px;}

/*44 high by 64 wide*/

.ouFlgCS64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px -0px;box-shadow:0px 0px 2px #000;border-radius:12px;}

.ouFlgDE64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px -0px;box-shadow:0px 0px 2px #000;border-radius:12px;}

.ouFlgEN64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px -0px;box-shadow:0px 0px 2px #000;border-radius:12px;}

.ouFlgES64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px -46px;box-shadow:0px 0px 2px #000;border-radius:12px;}

.ouFlgFR64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px -46px;box-shadow:0px 0px 2px #000;border-radius:12px;}

.ouFlgHI64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px -46px;box-shadow:0px 0px 2px #000;border-radius:12px;}

.ouFlgIT64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px -91px;box-shadow:0px 0px 2px #000;border-radius:12px;}

.ouFlgPL64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px -91px;box-shadow:0px 0px 2px #000;border-radius:12px;}

.ouFlgPT64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px -91px;box-shadow:0px 0px 2px #000;border-radius:12px;}

.ouFlgRU64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px -136px;box-shadow:0px 0px 2px #000;border-radius:12px;}

.ouFlgTR64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px -136px;box-shadow:0px 0px 2px #000;border-radius:12px;}

.ouFlgZH64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px -136px;box-shadow:0px 0px 2px #000;border-radius:12px;}

What this has done is created 12 different CSS classes for both 32x22 and 64x44 pixel varieties of the image. Within each class we have set the relevant background-image, the relevant height and width, and the display style to block.

The most important part is where the position is changed, which then only displays the relevant section of the image, as shown on the dropdown below.

Additional CSS puts a box-shadow and border-radius in for browsers that support it.

Next we will add the links to the test page, so copy the html below into Flags.htm

HTML

<div>32 Pixels Wide</div>

</div>

<div>64 Pixels Wide</div>

</div>

Debug flags.htm in your browser and you should have 24 separate flags.

Website design by Claytabase

This is a section of code that has been modified from Ousia Content Management System code, one of the quickest and most optimised systems on the market, part of our website design services.

These are available with sites starting at around £500.

more: Responsive and fast. Web Development, Design and Hosting with Content Management System