Adding Language flags to the header

I have installed the qtranslate programme but would like to add language flags to the header.
I have followed the details on another thread and managed to get the flags to show but they are over to the right side and not on the page, I think this is because I changed the width of the site, but I do not know what code to add to the following to get the flags in the correct place.
.lang-flag {
float: right;
margin-top: -30px;
padding: 2px;
}
I have removed the flags at the moment as the site is live.
The site is www.playtennisinthesun.com
Many thanks

 

Hello!

Could you please provide us some edited screenshot where you exactly want the flag so that we can provide you the solution?

Thanks,
Praveen

 

I have attached the header of my website, I would like to add the Spanish, Italian and French flags and the links to the appropriate pages above the word ¨sun¨in the header file.
Thank you

 

Hello!

Please follow the screenshot given below.

PHP:

     <div class="top-flag">
                    <ul>
                        <li><a href="<-- Page Redirection link-->"><img src="<-- Flag Image path -->"/></a></li>
                        <li><a href="<-- Page Redirection link-->"><img src="<-- Flag Image path -->"/></a></li>
                        <li><a href="<-- Page Redirection link-->"><img src="<-- Flag Image path -->"/></a></li>
                    </ul>
                </div>

Now, paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

.top-flag {
  width: 300px;
  height: 100px;
  float: right;
  margin-top: 15px;
  margin-right: 50px;
}
.top-flag ul {
  list-style: none;
}
.top-flag ul li {
  float: left;
  width: 80px;
  margin-left: 10px;
}
.top-flag ul li a img{
width:100%;
}

Thanks,
Praveen

 

Well despite my best efforts I cannot get the qtranslate programme to work. I have followed the step by step instructions, first of all when I copied the code into home page settings for English and Spanish the next screenshots show them on separate pages by I have both languages on the English home page??
The next screen shot shows separate tabs for the different languages, how do I do this, ??
I want to put the text in myself which I have translated and not use any automatic programme, is there someone out there that can help me with the first 1 or 2 pages then I can replicate for the other pages.
I also want the menu in Spanish which I have done but have no idea how to attach the home page to the flag.
Thank you

 

Please ignore my previous post, I have now successfully installed and am using Polylang, it was so much easier to follow the instructions.
I still have one problem and that is to get the language flags in the header. In the text that you asked me to add to the header.php I don´t know where to find the flag image path?
Thank you

 

Hello!

Upload your flag image in images folder of theme.

Now, in header.php file, replace the <img> tag in earlier provided code with the code given below.

PHP:

<img src="<?php  echo bloginfo('template_url') . '/images/image_name.extension'; ?>" />

Thanks,
Praveen