Problème de liens et de position

Version imprimable

21/06/2006, 16h05
Yoshidu62

Problème de liens et de position
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:

1 2 3 4 5 6 7 #bangauche { width : 500px; height : 150px; position : absolute; float : left; }
Et mon image de droite comme cela :
Code:

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 :aie: ), 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 :aie:
21/06/2006, 16h09
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.

Voici le html :

Code:

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...

essai ca

Code:

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:

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

21/06/2006, 16h32
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 8O
21/06/2006, 16h54
masu

essai d'enlever le margin-left de #bandroite.
sinon tu n'a pas cu css sur le menu qui pourrai interferer ?
21/06/2006, 17h29
Yoshidu62

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

:help:

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:

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:

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>