Web design and hosting, database, cloud and social media solutions that deliver real business results
  • Business Solutions
    • Robotic Process Automation
    • Bespoke Software
    • Database Services
      • Data Integration
      • Datawarehouse Services
      • Power BI
    • Web Services
      • Logo Design
      • Payment Gateways
      • Web Site Optimisation
      • Web Site Security
      • Technical Tools
    • Cloud Services
      • Amazon Web Services
      • Google Cloud Services
      • Microsoft Azure
    • Microsoft Office
    • Social Media Services
  • Academy
    • Our Test Environment
    • Learning Databases
      • The Basics
      • Get Open Query
      • SQL Server Data
      • SQL Server Maintenance
      • Using SQL Server Dates
      • Using SQL Server Functions
      • Using SQL Server Pivot-Unpivot
      • Technical Tools
    • Learning Web Design
      • Building Ousia Content Management System
      • Using ASP-NET
      • Using CSS
      • Using JavaScript
    • Learning Cloud and IT Services
      • Task Scheduler Error 2147943645
      • Requesting SSL and Generation of PFX file in OpenSSL Simple Steps
    • Using Social Media
      • Asking for a Google Review
      • Changing a Facebook account from personal to business
      • Choosing where to focus Social Media effort
      • Social Media Image Sizes
      • Using Meta Data to set Social Media Images
  • About
    • Blog
      • Building an entry level gaming machine
      • Google Core Update Jan 2020
      • Hot Chilli Internet Closure
      • How To Choose Content For Your Website Adverts Leaflets
      • Preventing Online Scam
      • Skimmers of the gig economy
      • The most annoying things about websites on the Internet
      • Top 5 websites for free Vector Graphics
    • Portfolio
    • Team
      • Adrian Anandan
      • Ali Al Amine
      • Ayse Hur
      • Chester Copperpot
      • Fernando Ancona Camara
      • Gavin Clayton
      • Sai Gangu
      • Suneel Kumar
      • Surya Mukkamala
      • Trevor Momanyi

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>

<a href="/Ousia.css" class="ouFlgCS32"></a>

<a href="/Ousia.css" class="ouFlgDE32"></a>

<a href="/Ousia.css" class="ouFlgEN32"></a>

<a href="/Ousia.css" class="ouFlgES32"></a>

<a href="/Ousia.css" class="ouFlgFR32"></a>

<a href="/Ousia.css" class="ouFlgHI32"></a>

<a href="/Ousia.css" class="ouFlgIT32"></a>

<a href="/Ousia.css" class="ouFlgPL32"></a>

<a href="/Ousia.css" class="ouFlgPT32"></a>

<a href="/Ousia.css" class="ouFlgRU32"></a>

<a href="/Ousia.css" class="ouFlgTR32"></a>

<a href="/Ousia.css" class="ouFlgZH32"></a>

</div>

<div style="clear:both">

<div>64 Pixels Wide</div>

<a href="/Ousia.css" class="ouFlgCS64"></a>

<a href="/Ousia.css" class="ouFlgDE64"></a>

<a href="/Ousia.css" class="ouFlgEN64"></a>

<a href="/Ousia.css" class="ouFlgES64"></a>

<a href="/Ousia.css" class="ouFlgFR64"></a>

<a href="/Ousia.css" class="ouFlgHI64"></a>

<a href="/Ousia.css" class="ouFlgIT64"></a>

<a href="/Ousia.css" class="ouFlgPL64"></a>

<a href="/Ousia.css" class="ouFlgPT64"></a>

<a href="/Ousia.css" class="ouFlgRU64"></a>

<a href="/Ousia.css" class="ouFlgTR64"></a>

<a href="/Ousia.css" class="ouFlgZH64"></a>

</div>

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

Author

Gavin Clayton
Gavin Clayton
I formed Claytabase in 2010 as a way of carrying on my work with SQL Server and ASP.NET. This has culminated in the Ousia Content Management System being taken from concept to one of the quickest CMS's on the market.

Helpful?

Please note, this commenting system is still in final testing.

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
Copyright Claytabase Ltd 2021, registered in England and Wales 08985867

Site Links

RSS Login ContactCookie PolicySitemap

Social Media

facebook.com/Claytabaseinstagram.com/claytabase/twitter.com/Claytabaselinkedin.com/company/claytabase-ltd

Get in Touch

+442392064871info@claytabase.co.ukGround Floor, Building 1000, Lakeside North Harbour, Western Road, Portsmouth, Hampshire, United Kingdom, PO6 3EZ

Partnered With

Partners
The settings on this site are set to allow all cookies. These can be changed on our Cookie Policy & Settings page.
By continuing to use this site you agree to the use of cookies.
Ousia Logo
Ousia CMS Loader