Discussion :

[sam01]

Bonjour,

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

Voici mon html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
 
 
 
<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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
 
 
.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;
}

Merci d'avance pour votre aide.

[polymorphisme]

Bonjour,

du fait que tes drapeaux doivent être alignés,
je modifierais plutôt le code comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div id="language">
 
            <p class="label">Choose your language:&nbsp;</p>          
            <p class="img"><a href="#" title="English version"><img src="images/en.gif" alt="English version"></a>&nbsp;    
            <a href="#" title="Versiòn española"><img src="images/es.gif" alt="Versiòn española"></a>&nbsp;     
            <a href="#" title="Version française"><img src="images/fr.gif" alt="Version française"></a>
            </p>     
 
</div>

Après, il existe d'autres façon de faire bien entendu.

[sebastiano]

Le plus simple ça reste de créer une liste.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<ul class="drapeaux">
<li>IMAGE DE TON DRAPEAU #1</li>
<li>IMAGE DE TON DRAPEAU #2</li>
<li>IMAGE DE TON DRAPEAU #3</li>
</ul>

Tu places ta class .drapeaux à droite, un float:left pour chaque <li> de ton <ul>, tu n'as plus qu'à configurer les tailles de chaque élément, et le tour est joué.

[sam01]

Bonjour,

du fait que tes drapeaux doivent être alignés,
je modifierais plutôt le code comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div id="language">
 
            <p class="label">Choose your language:&nbsp;</p>          
            <p class="img"><a href="#" title="English version"><img src="images/en.gif" alt="English version"></a>&nbsp;    
            <a href="#" title="Versiòn española"><img src="images/es.gif" alt="Versiòn española"></a>&nbsp;     
            <a href="#" title="Version française"><img src="images/fr.gif" alt="Version française"></a>
            </p>     
 
</div>

Après, il existe d'autres façon de faire bien entendu.

Bonjour,

voilà j'ai testé ton code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 
<div class="banniere">
 
<div id="language">
 
            <p class="label">Choose your language:&nbsp;</p>          
            <p class="img"><a href="#" title="English version"><img src="images/en.gif" alt="English version"></a>&nbsp;    
            <a href="#" title="Versiòn española"><img src="images/es.gif" alt="Versiòn española"></a>&nbsp;     
            <a href="#" title="Version française"><img src="images/fr.gif" alt="Version française"></a>
            </p>     
 
</div>
 
 
 
<img src="images/banniere/banniere_finale_test06.png">
 
 
</div>

ce n'est toujours pas alignés...

Par contre au lieu d'être collé les un au dessus des autres il y a un espace.

Ce qui me gène le plus, c'est que les drapeau ne veulent pas aller en haut à droite de ma bannière, c'est décallé vers le bas...

C'est parceque ma bannière est une image c'est ça ?

[sam01]

J'ai trouvé un code plus simple

html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
 
<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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
 
 
.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.

[sam01]

ça y est j'ai trouvé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
 
 
<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 css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 
 
.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;
}

Les drapeaux sont en haut à droite de ma bannière et en plus ils sont alignés.

Excatement ce que je veux.