28173 sujets

CSS et mise en forme, CSS3

Bonjour
Voilà je suis en train de bosser sur un site dont l'url est ICI
Voici le fichier CSS
Le problème (classique) que l'on voit partout, c'est les décalages de l'affichage des <div> entre IE et FF.
j'ai le premier <div> de mon menu qui s'affiche bien partout, et puis tout le reste est décallé, je suis en position relative (car il est centré, donc au niveau horizontal, cela dépend de la résolution de l'écran donc je ne peux pas passer en absolute) et je joue avec les px pour l'alignement. Mon problème vient peut-être de là.
j'utilise la valeur top pour positionner mes blocs. j'ai essayé avec margin-top mais c'est encore pire.

Ce sujet a déja été traité de nombreuses fois et sur d'autres forum, mais je n'ai jamais vraiment trouvé de soluce "parfaite"....
D'avance, Merci à ceux qui pourraient m'aider Smiley smile
Salut

Désolé mais pour moi le rendu sous FF et IE est identique Smiley confus
Peut-être un peu plus de précision sur ce qui te chagrine ... ou une capture pour mieux visualiser le probleme ...
Salut !
Non ce n'est pas du tout la même chose, il y a un décalage important partout au niveau du menu à gauche mais surtout le sous menu qui s'affiche n'importe où !!

Positionnement sous Internet Explorer
et sous Firefox

Ce n'est pas vraiment la même chose.... Smiley cligne
Effectivement ... Sorry je n'avais pas pris le temps de bien regarder Smiley rolleyes
Et là je me rend compte que ton code est un peu space ... Je ne veut pas m'avancer car je ne suis pas un pro, mais ca ne m'a pas l'air trés accessible tout ca ! Ta sémantique est quasi inexistante ! si je desactive les images : plus rien !
Je sais que ca ne repond vraiment pas à ton probleme ... Mais ca parait un peu essentiel ici.
Mais je prefere te conseiller d'attendre l'avis de quelqu'un de plus compétent Smiley cligne
Modifié par barbe douce (12 Apr 2006 - 13:41)
Ouai y'a beaucoup trop d'image dans ta page .. ca prend des heures à chager .. en plus tous ces position:relative; ca rend malade ... ton design est logique dans le sens où :
T'as une liste de menus qui doivent tous être espacé de 10pixels environ...
T'as le menu "ouvert" montre une liste de sous-menus qui ont tous la même taille .. avec un marge à gauche de 50pixels environ.. les sous menus sont espacé de 2pixels environs ...
etc..

Bref tu dois traduire ca en CSS... c'est mieux donc d'utiliser des listes, un truc comme ca :
<ul id="menu">
  <li><a href="#">Présentation</a></li>
  <li>
    <a href="#">Nos produits</a>
    <ul>
      <li><a href="#">sous menu 1</a></li>
      <li><a href="#">sous menu 2</a></li>
      <li><a href="#">sous menu 3</a></li>
      <li><a href="#">sous menu 4</a></li>
      <li><a href="#">sous menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Comment<br />commander?</a></li>
  <li><a href="#">Nous contacter</a></li>
</ul>

... plus un CSS de base :
* { margin: 0; padding: 0; border: none; } /* tout le monde à margin et padding = 0 et pas de border */
html, body { font-family: Verdana; font-size: 11px; text-align: left;}
ul#menu {
margin-left: 13px;
}
ul#menu li{ /* tous les "li" dans "#menu"*/
  list-style-type: none; /* pas de puces */
}
ul#menu li a { /* les "a" des "li" dans "#menu" */
  display: block;
  margin: 5px 0; /* espace entre les menus */
  width:164px;
  height:42px;
  background: #E1E1E1;
}
ul#menu li ul { /* les "ul" qui sont dans des "li" dans "#menu" = la liste de sous menu en fait */
  margin-left: 50px;
  margin-bottom: 5px;
  width: 205px;
  border: solid 5px #CCC;
  background: #CCC;
}
ul#menu li ul li a { /* tous les "a" qui sont dans des "ul" qui sont dans des "li" dans "#menu" */
  display: block;
  margin: 2px 0; /* espace entre les sous-menus */
  width: 205px;
  height: 18px;
  background: #FFFFEB; 
}


pars de ca, ce sera plus simple et plus efficasse ...
Merci pour votre aide !
Ca m'a super aidé là je dois dire et c'est vrai que c'est bcp plus propre !
Il y a juste encore un petit problème !
C'est que avec IE àa fonctionne sans problème, mais avec FF, le menu est "bloqué" au dessus !
Pourriez-vous me dire comment cela se fait-il?
Le site est ICI

D'avance, Merci Smiley smile
Modifié par arnaud_verlaine (20 Apr 2006 - 21:01)