Ajustement Image

problème sous IE

22 août 2006 à 16:18:54

Bonjour

Je souhaiterais savoir comment régler un problème d'ajustement de mon "pied de menu" ( image en bas de mon menu vertical ) qui se produit uniquement sous IE. Mon image dont je vous parle est décalée sur la gauche sous IE ( l'image fait pile la longueur du menu vertical ) tandis que sous firefox elle se place idéalement bien.

zeunyton

22 août 2006 à 16:20:41

dans ton css essayee :

footer{
clear:both;
}

SORRY je me suis tromper j'ai lu trop vite
peut tu afficher l'adresse que l'on vois un peut ton probléme un lien vers ton site est suffisant

Flo59

22 août 2006 à 16:44:50

Voilà :

http://img123.imageshack.us/my.php?image=gddrthd3.jpg

Flo59

23 août 2006 à 10:38:33

Flo59

24 août 2006 à 11:17:05

Personne ne pourrait m'aider ?

kalex

24 août 2006 à 13:11:05

Pourquoi ne pas le metter en un seul bout ???
Et sinon fait comme moi, Tu affiche une banniere firefox pour ceux qui utilisent IE, et tu met SITE OPTIMISE POUR FIREFOX ! (fais pas $é&'-@?! avec ton IE

sa tu le met pas

)

zeunyton

24 août 2006 à 13:16:11

ces tu afficher ton code que je verifie quelle ligne

Flo59

24 août 2006 à 17:28:10

#menu
{
float: left;
width: 140px;
font-family: Arial, Verdana, serif, "Trebuchet MS";
font-size: 96%;
padding-left: 0;
margin-top: 0%;
}

.element_menu
{
width: 99%;
background-color: #eacf71;
padding: 8px 1px;
background-image: url('motif.jpg');
}

Flo59

25 août 2006 à 10:59:10

c'est le code pour mon menu

zeunyton

25 août 2006 à 12:22:04

essaye

Candygirl

25 août 2006 à 16:02:10

Citation : Flo59

Mon image dont je vous parle est décalée sur la gauche sous IE ( l'image fait pile la longueur du menu vertical ) tandis que sous firefox elle se place idéalement bien.

Euh, pour moi ce n'est pas ton image qui est décalée à gauche, mais le reste de ton menu qui est trop long sur IE...

C'est dur à dire de quoi ça provient exactement sans la structure html correspondant à ton css mais à première vue ceci:

width: 99%;

pourrait bien en être la cause.

Flo59

25 août 2006 à 16:57:30

Merci pour votre aide,

Le fait de modifier le padding ne modifie pas l'alignement vertical de mon menu et du pied de menu...

Quant au width: 100% il augmente d'à peine 1 millimetre la largeur du menu, il reste toujours une grande différence sous IE (et le fait de mettre à 100% fait que sous firefox le menu est un poil trop grand par rapport au pied de menu )...

Riko

25 août 2006 à 17:02:44

Salut,
peux tu mettre un lien vers ton site pour voir ton code html et css ,cela permettra peut être de mieux voir le problème.

Candygirl

25 août 2006 à 17:05:43

Les % ne sont pas calculé de la même manière sur IE et FF. Maintenant si tu as une image de largeur fixe en bas pourquoi mettre des % (d'autant que tu as définis une largeur en pixel pour ton menu...)? As-tu tester avec une valeur en pixels voir si tu obtiens le même résultat entre IE et FF ?

Autrement donne nous le code complet html et css du menu pour qu'on puisse t'aider.

Flo59

26 août 2006 à 11:27:58

Alors le fait de mettre en px au lieu des % ne change rien ( sa revient exactement au même ).

Je met mon code xhtml

<div id="menu">

<div class="element_menu">
<h3>Le site</h3>
<ul>
<li><a href="?inc=home">- Accueil</a></li>
<li><a href="?inc=presentation">- Présentation</a></li>
<li><a href="?inc=contact">- Contact</a></li>

<li><a href="?inc=livre">- Livre d'or</a></li>
</ul>
</div>

<div class="element_menu">
<h3>blabla</h3>
<ul>
<li><a href="page5.html">- blabla</a></li>

<li><a href="page6.html">- blabla</a></li>
<li><a href="page7.html">- blabla</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Divers</h3>
<ul>
<li><a href="page7.html">- Jeux vidéo</a></li>

</ul>
</div>
<img src="pied.jpg" alt="pied" />

</div>

#menu
{
float: left;
width: 140px;/*largeur en pourcentage*/
font-family: Arial, Verdana, serif, "Trebuchet MS";
font-size: 96%;
padding-left: 0;
margin-top: 0%;/*menu vertical collï¿½au menu horizontal*/
}

.element_menu
{
width: 99%;/*100% de la largeur du menu, donc barre verticale collï¿½ au reste du menu*/
background-color: #eacf71;
padding: 8px 1px;
background-image: url('motif.jpg');
}

.element_menu h3
{
background-image: url('degrades.jpg');
background-repeat: no-repeat;
background-color: #c0e16e;
font-size: 16px;
padding: 5px 0 4px 4px;
border-color: #888d6d;
color: #888d6d;
border-width: 1px 1px 1px 0px;
border-style: dashed;
width: 100%;/*les titre des menu font 100% de la largeur du menu donc les petite barres des titres collï¿½ a la barre verticale*/
text-align: center;
position: relative;
top: 11px;
}

Candygirl

26 août 2006 à 11:42:23

En fait c'est ton h3 qui agrandit le conteneur sur IE. Vire le 100% du h3

Flo59

26 août 2006 à 13:48:21

ah voilà c'est résolu merci bien

Flo59

27 août 2006 à 10:40:53

Par contre j'ai un autre petit problème: sous IE ma bannière ( enfin mon début de bannière

) est sur-élevé par rapport au menu horizontal. J'ai essayer de mettre un margin-bottom: 0px; mais rien n'y fait je vois pas d'ou sa peut venir...

[URL=http://imageshack.us][IMG]http://img84.imageshack.us/img84/9580/ban1kp7.jpg[/IMG][/URL]

[URL=http://imageshack.us][IMG]http://img177.imageshack.us/img177/5057/ban2gi7.jpg[/IMG][/URL]

Voilà là j'ai en fait fait prolonger mon menu verticale dans ma bannière et on voit bien sur IE que la banniere n'est pas collée au menu horizontale ( ce n'est pas que le bloc orange qui est sur-élevé mais toute la banniere ).

<div id="en_tete">

<img src="tortue3.jpg" alt="ban" />
</div>
<div id="menu_horizontal">
<ul>
<li class="bouton_gauche"><img class="maison" src="home.gif" alt="home" />
<a href="index.php">Accueil</a></li>
<li class="bouton_gauches"><img class="dl" src="disk.gif" alt="dl" />
<a href="?inc=telechargement">Telechargement</a></li>

<li class="bouton_droites"><img class="livre" src="book.gif" alt="book" />
<a href="?inc=livre">Livre d'or</a></li>
<li class="bouton_droite"><img class="tel" src="phone.gif" alt="phone" />
<a href="?inc=contact">Contact</a></li>
</ul>

</div>

#en_tete
{
width: 100%;
height: 130px;
background-image: url('bann.jpg');
background-repeat: no-repeat;
}

div#menu_horizontal
{
font-family: Verdana, Arial, serif, "Trebuchet MS";
font-size : 90%;
width : 100%;
height : 45px;
background-color: #c0e16e;
background-image: url('degrade.jpg');
background-repeat: no-repeat;
border-bottom: 1px solid;
border-top: 1px solid;
}

Flo59

28 août 2006 à 10:22:25

Mes images ne s'affichent pas, je ne sais pas pourquoi, je met des lien:

http://img216.imageshack.us/img216/1142/ban1sg5.jpg

http://img216.imageshack.us/img216/7820/ban2av7.jpg

Flo59

29 août 2006 à 10:43:53

Quelqu'un aurait-il une ptite idée pour régler ce problème ?

Flo59

31 août 2006 à 18:50:03

Je suis perdu