Discussion :

[Yoshidu62]

Bonjour, voici mon problème :

j'ai une bannière composée de 2 images l'une à côté de l'autre.

Mon image de gauche est positionné comme ceci :

Code :

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

1
2
3
4
5
6
7
 
#bangauche {
  width : 500px;
  height : 150px;
  position : absolute;
  float : left;
}

Et mon image de droite comme cela :

Code :

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

1
2
3
4
5
6
 
#bandroite {
  position : relative;
  width : 280px;
  height : 150px;
}

Mon problème est que j'ai mis mon image de gauche en tant que lien, et que le lien n'est "actif" que sur 220px de mon image au lieu de toute mon image (500px).

Le problème vient du positionnement de mes images, pourtant à l'écran elles sont bien l'une à coté de l'autre (même sous IE ), mais le lien ne veut pas se faire sur toute mon image.

C'est comme ci pour mon lien, il y avait les 2 images l'une au-dessus de l'autre, donc le lien n'est pas actif sur les 280 premiers pixels (taille de l'image de droite), mais ensuite comme l'image est terminée mais que la deuxième continue et bien là le lien s'active.

Je comprends pas pourquoi, si vous avez une idée?

Merci.


ps : désolé pour la compréhension mais c'est difficile à expliquer

[masu]

Juste avec les elements que tu donne je voi pas trop.
un truc etrange c'est a la fois le position:absolute et float dans ton #bangauche

tu pourrai aussi donner la portion de code html en plus du css stp.

[Yoshidu62]

Voici le 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
 
<div id="banniere">
      <!-- Partie gauche de la banniere -->
      <div id="bangauche">
        <a href="index.html"><img src="images/bangauche.png" alt="banniere"></a>
      </div>
      <!-- Fin Partie gauche de la banniere -->
      <!-- Partie droite de la banniere -->
      <div id="bandroite">
        <ul id="menu">
          <li id="presentation"><a href="presentation.html">Presentation</a></li>
           <li id="formation"><a href="formation.html">Formation</a></li>
          <li id="recrutement"><a href="recrutement.html">Recrutement</a></li>
          <li id="espace_client"><a href="espace_client.html">Espace Client</a></li>
          <li id="contact"><a href="contact.html">Contact</a></li>
        </ul>
      </div>
      <!-- Fin Partie droite de la banniere -->
    </div>

En fait je suis nul en ce qui concerne les positionnements, je suis un peu paumé avec les float, position:relative, absolute, etc...

[masu]

essai ca

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
#bangauche {
  width : 500px;
  height : 150px;
  /*position : absolute;*/
  float : left;
}
#bandroite {
	/*position : relative;*/
  width : 280px;
  height : 150px;
	margin-left: 510px;/*marge = a la taille de l'element de gauche*/
}

et pour le html

Code :

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

1
2
3
<div id="bangauche">
        <a href="index.html"><img src="css.png" alt="banniere" width="500" height="150" /></a>
      </div>

[Yoshidu62]

Ca ne fonctionne pas, mon lien fonctionne bien sur toute mon image gauche, mais par contre mon image droite est partie loin loin vers la droite

[masu]

essai d'enlever le margin-left de #bandroite.
sinon tu n'a pas cu css sur le menu qui pourrai interferer ?

[Yoshidu62]

J'avais bien une erreur dans mon menu, ça fonctionne donc très bien SAUF sous IE!!!! j'en ai marre

[Yoshidu62]

Sous IE j'ai mon image droite qui est bien sur la droite, mais elle est en-dessous de l'image gauche, au lieu d'être à côté.

je remet le 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
 
#banniere {
  width : 780px;
  margin : 10px auto 0 auto;
}
#bangauche {
  width : 500px;
  height : 150px;
  float : left;
}
#bandroite {
  width : 280px;
  height : 150px;
  background-color : red;
  margin-left : 500px;
}

et 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
 
<div id="banniere">
      <!-- Partie gauche de la banniere -->
      <div id="bangauche">
        <a href="index.html"><img src="images/bangauche.png" alt="banniere"></a>
      </div>
      <!-- Fin Partie gauche de la banniere -->
      <!-- Partie droite de la banniere -->
      <div id="bandroite">
        <ul id="menu">
          <li id="presentation"><a href="presentation.html">Presentation</a></li>
          <li id="formation"><a href="formation.html">Formation</a></li>
          <li id="recrutement"><a href="recrutement.html">Recrutement</a></li>
          <li id="espace_client"><a href="espace_client.html">Espace Client</a></li>
          <li id="contact"><a href="contact.html">Contact</a></li>
        </ul>
      </div>
      <!-- Fin Partie droite de la banniere -->
    </div>