[Résolu] Alignement de drapeaux sur une bannière

Bonjour,

j'aimerais les mettre trois drapeaux alignés en haut à droite de bannière.

Voici mon html :

 
 
 
<div class="banniere">
 
		<div id="language">
		
			<p>Choose your language:</p>		
			
			<ul>
		
				<li><a href="#" title="English version"><img src="images/en.gif" alt="English version"></a></li>		
			
				<li><a href="#" title="Versiòn española"><img src="images/es.gif" alt="Versiòn española"></a></li>		
			
				<li><a href="#" title="Version française"><img src="images/fr.gif" alt="Version française"></a></li>
			
			</ul>		
			
		</div>
 
 
 
 
<img src="images/banniere/banniere_finale_test06.png">
 
 
</div>
 
  

et voici mon css

 
 
 
.banniere
{
width:1000px;
height:120px;
margin-top:10px;
border:none;
/*background-image: url('../images/banniere/banniere_finale_test07.png');*/
background-image: url('../images/banniere/banniere_finale_site_02.png');
margin-left:20px;
}
 
 
 
#language {
	position: absolute;
	top: 109px;
	width: 1000px;
	text-align: right;
	line-height: 20px;
	vertical-align: middle;
	font-size: 90%;
	color: #ffffff;
}
 
#language ul, #language li { 
	list-style-type: none;
	display: inline;
	margin: 0px;
	padding: 0px;
}
 
#language p {
	display: inline;
}
 
#language img {
	border: 0px;
	padding-left: 10px;
}
 
 
 

J'ai trouvé un code plus simple

html

 
<p class="galerie_image"><a href="lien1"><img src="images/es.gif" ></a></p>
<p class="galerie_image"><a href="lien2"><img src="images/fr.gif" ></a></p>
<p class="galerie_image"><a href="lien2"><img src="images/en.gif" ></a></p>
 
 
 

css

 
 
.galerie_image
{
float: left; 
margin: 5px;
border: 1px solid #000000;
text-align: center;
}
 
 

J'ai bien mes drapeaux alignés mais j'ai deux soucis :

1) le haut de ma bannière est dédoublé

2) les drapeaux sont placés en à gauche et j'aimerais les mettre en haut à droite



Merci pour votre aide.

Hello,

Je ferais plutôt comme ça :

<ul id="banniere">
    <li class="flag">...</li>
    <li class="flag">...</li>
    <li class="flag">...</li>
</ul>

#banniere {
    text-align: right;
}

li.flag {
    display: inline;
}

Bonjour,

ben maintenant c'est bien an haut à droite mais les drapeaux sont les uns sur les autres...
Ils ne sont plus alignés.

Ca y est j'ai trouvé

<div class="banniere">

<p class="galerie_image"><a href="lien1"><img src="images/es.gif" ></a></p>
<p class="galerie_image"><a href="lien2"><img src="images/fr.gif" ></a></p>
<p class="galerie_image"><a href="lien2"><img src="images/en.gif" ></a></p>



</div>

et le css

.banniere { 
width:1000px;
height:120px;
margin-top:10px;
border:none;
background-image: url('../images/banniere/banniere_finale_site_02.png');
margin-left:20px;
text-align: right; 
} 


.galerie_image
{
float: right; 
margin: 5px;
border: 1px solid #000000;
text-align: center;
}

Modifié par samb01 (06 Oct 2010 - 10:20)