28234 sujets

CSS et mise en forme, CSS3

Décalage entre deux DIV superposées

Bonsoir a tous,

Je suis en train de m'arracher les cheveux sur un petit problème et j'espère trouver ici une âme charitable qui puisse m'éclairer (ou m'achever une bonne fois pour toutes, c'est selon... ^^)

Si vous pouviez jeter un oeil sur le fiddle ci-dessous et m'expliquer pourquoi lorsque la souris est sur un des liens, il y a un décalage d'1 ou 2 pixels entre le fond rouge et le layer noir qui vient s'animer au dessus (j'ai mis ces couleurs pour qu'on puisse bien le voir), ce serait une libération!

https://jsfiddle.net/17k45bzu/

D'avance merci Smiley smile

[UPDATE: j'ai nettoyé un peu le code, parce qu'avouons que c'etait un peu le chantier ^^]

Nouveau fiddle, plus propre:

https://jsfiddle.net/17k45bzu/2/

Merci aux insomniaques Smiley cligne Pas la peine de vous planquer, je vois le compteur de vues qui monte!

PS: Je me demande si c'est pas un bug d'affiche du au scale sur le hover? Genre difficulté de calculer le nombre exact de pixels sur un scale a 1.05? cela dit quand je teste a 1.1 ca fait la même...
Modifié par Zoryn (04 Dec 2015 - 03:32)
Hello,

Et scale(1), c'est propret, non ? pourquoi une autre valeur ?
Le filet rouge qui peut rester visible à droite provient de la largeur des .left, .center et .right, exprimée en pourcentage,
Quand je passe à des largeurs exprimées en pixels, plus de problème,
sinon on a des valeurs de largeur différentes pour les <a> et les <span> , voir l'inspecteur de Chrome par exemple
Salut,

Merci pour ta reponse!
Pour ce qui est du scale(1), ca me fait perdre la notion de scale au survol (je passe justement de 1 a 1.05).
Quant aux largeurs exprimées en px, ca serait effectivement idéal, mais adieu le responsive non? (c'est la seule raison pour laquelle je me tourne vers les %

En effet, la largeur est différente pour le a et le span, alors que j'imagine qu'elle devrait etre indentique puisqu'a 100% (des 31% des div entourant chaque lien)...
Je sèche, vraiment Smiley decu
Après avoir lu un très intéressant post qui traite du sujet :
http://forum.alsacreations.com/topic-4-69191-2-RnsoluCalculdedimensionrelativearrondiaunombreentier.html

je crois avoir résolu le problème en utilisant un bon vieux tableau html :


<table width="100%" cellpadding="0" cellspacing="0">
<tr>
  <td width="30%">
    <a href="contact.php">
      <span class="hud-text"><span>Nous contacter <i class="fa fa-arrow-circle-right"></i></span></span>
    </a>
  </td>
  <td width="5%"></td>
  <td width="30%">
    <a href="equipe.php">
      <span class="hud-text"><span>Rencontrer<br/> notre équipe <i class="fa fa-arrow-circle-right"></i></span></span>
    </a>
  </td>
  <td width="5%"></td>
  <td width="30%">
    <a href="specialites.php">
      <span class="hud-text"><span>Parcourir<br/> nos spécialités <i class="fa fa-arrow-circle-right"></i></span></span>
    </a>
  </td>
</tr>
</table>


Plus besoin des classes .left, .right et .center, bien entendu
j'ai changé la largeur des éléments en 30% pour avoir deux inter-colonnes de 5%, valeur entière (et total = 100%), et tout semble fonctionner correctement, on n'a plus de largeur non entière, et l'affichage est bon quelque soit la largeur de la fenêtre.
farang a écrit :
Après avoir lu un très intéressant post qui traite du sujet :
http://forum.alsacreations.com/topic-4-69191-2-RnsoluCalculdedimensionrelativearrondiaunombreentier.html

je crois avoir résolu le problème en utilisant un bon vieux tableau html :


&lt;table width="100%" cellpadding="0" cellspacing="0"&gt;
&lt;tr&gt;
  &lt;td width="30%"&gt;
    &lt;a href="contact.php"&gt;
      &lt;span class="hud-text"&gt;&lt;span&gt;Nous contacter &lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;/a&gt;
  &lt;/td&gt;
  &lt;td width="5%"&gt;&lt;/td&gt;
  &lt;td width="30%"&gt;
    &lt;a href="equipe.php"&gt;
      &lt;span class="hud-text"&gt;&lt;span&gt;Rencontrer&lt;br/&gt; notre équipe &lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;/a&gt;
  &lt;/td&gt;
  &lt;td width="5%"&gt;&lt;/td&gt;
  &lt;td width="30%"&gt;
    &lt;a href="specialites.php"&gt;
      &lt;span class="hud-text"&gt;&lt;span&gt;Parcourir&lt;br/&gt; nos spécialités &lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;/a&gt;
  &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;


Plus besoin des classes .left, .right et .center, bien entendu
j'ai changé la largeur des éléments en 30% pour avoir deux inter-colonnes de 5%, valeur entière (et total = 100%), et tout semble fonctionner correctement, on n'a plus de largeur non entière, et l'affichage est bon quelque soit la largeur de la fenêtre.


Merci beaucoup de t'etre penché sur le sujet Smiley smile
J'avoue avoir pensé au tableau, mais comme le suggère JENCAL, c'est pas forcément super propre donc je préfèrerais trouver une solution un peu plus css3. Je vais continuer a fouiller, mais encore merci de te donner la peine, ca réchauffe le coeur Smiley smile
Et pourquoi transformer tes balises alors que tu aurais pu modifier la mise en forme avec display: table-... ?
bzh a écrit :
Et pourquoi transformer tes balises alors que tu aurais pu modifier la mise en forme avec display: table-... ?


heu ?, c'est ce qu'il a fait (section>a>span + span).

Tu parles probablement de la proposition inapropriée de farang ?
cdt,
gc-nomade a écrit :
apparement c'est chrome qui te joue ce tour, le plus simple est de placé ton fond rouge dans le span https://jsfiddle.net/17k45bzu/7/ , j'imagine Smiley smile


Bonne idée! je viens d'essayer, mais meme chose. Bon, pour préciser un peu plus, faut savoir qu'a la place du fond rouge, j'ai une image qui zoome et se floute ^^ Donc ptet que ca vient du scale du a + blur et scale de l'image. Bref, je mets Chrome a genoux! Smiley biggrin
Sujet clos
Aller à