Discussion :

[gangstarrr]

Bonjour ,
voila je suis en train de créer un site et je bloque un peu sur un point, en fait j'ai réalisé une bannière et je voudrais mettre dessus deux liens images (2 drapeaux pour les langues du site en fait) , j'ai réussi à mettre ces images liens mais en fait quand je rétréci la fenêtre elle se déplace et finir par sortir de ma bannière. En fait je voudrais que ces liens restent fixe à un certain endroit de ma bannière.

Voici mon code:
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
 
#ban1{
   margin:auto;
   width:1048px;
   height: 240px;
   background-image: url("../images/header.png");
 
 
}
#drapeau{
position: absolute;
height:30px;
width:120px;
left: 1105px;
top: 30px;
 
}

et le html:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
	<div id="ban1">
				<div id=drapeau>
					<a href="../pages_en/Main.html">
						<img src="../images/dusa.gif" width="30" height="30" border="0">
					</a>
					<a href="../pages_fr/Main.html">
						<img src="../images/DFrance.gif" width="30" height="30" border="0">
					</a>
				</div>
			</div>

merci pour votre aide.

[Erwan31]

Bonjour,
n'oublies pas d'insérer ton code dans les balises adéquates.

L'élément positionné en absolue se réfère au premier bloc parent positionné mais tu n'as pas "positionné" ta bannière, tu dois donc lui ajouter une position relative.
Mieux vaut utiliser le right que le left pour le positionnement des drapeaux.

Je te déconseille d'utiliser les drapeaux qui ne seront pas forcément identifiable pour tout le monde alors que le nom du pays le sera,
ajoutes donc le nom avec si tu le souhaites les drapeaux en background CSS.

D'autre part tu n'as pas renseigné d'attribut ALT à tes drapeaux, ce qui fait qui si les images ne sont pas chargées pour une raison ou une autre, le nom des pays ne sera pas accessibles.

Ta largeur batarde de 1048px fixe est à éviter : une grande proportion d'utilisateur en résolution 1024X768 et inférieur ne veront pas la totalité de la bannières...

Je te conseil donc de mettre par exemple

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
#ban1{
position:relative;
margin:auto 0;
width:1048px;
height: 240px;
background: url(../images/header.png);
 
 
}
#drapeau {
position: absolute;
height:30px;
width:120px;
right: 20px;
top: 10px;
}
#drapeau #en {} 
#drapeau #de {}

Code :

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

1
2
3
4
5
6
7
 
<div id="ban1">
<div id=drapeau>
<a id="de" href="../pages_en/Main.html">Deutsh</a>
<a id="en" href="../pages_fr/Main.html">English</a>
</div>
</div>

[gangstarrr]

merci bien ca marche parfait, et pour les conseils aussi ca va améliorer un peu mon site et au moins toutes les résolutions pourront le voir.