Texte en dessous d'image sur google chrome

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Texte en dessous d'image sur google chrome

Message par Oz-Chan le Jeu 15 Nov 2012 - 22:51

Bonsoir,
me voilà avec un autre problème en ce qui concerne chrome. Sur firefox, mon texte marche parfaitement comme vous pouvez le voir sur cette image:
Alors que sur google chrome, la première ligne passe en dessous de l'image et soudainement par dessus quand l'image est pleinement apparue comme cela :
Il doit surement y avoir un problème de webkit...
Voici mon CSS:
Code:
/* --- DESCRIPTIONS DES FORUMS --- */

.phalink {
  padding: 0px 5px 1px 5px;
  border: 1px solid #870000;
  background-color: #870000;
  border-radius: 5px;
  margin-bottom:50px;
  border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  letter-spacing: 0px;
  -moz-transition: all 1s;
    -webkit-transition: all 1s;
}

a.phalink {
  color: #FFDF40;
}

a.phalink:hover {
  color: #FF733B;
  letter-spacing: 0.5px;
}

.desc {
  height: 46px;
  margin-top: 9px;
  margin-bottom: -1px;
  padding: 5px;
  overflow: hidden;
  padding-right: 0px;
  text-align: justify;
  border: 2px solid #870000;
  border-top: 6px solid #870000;
  border-radius: 20px 0px 0px 0px;
  -webkit-border-radius: 20px 0px 0px 0px;
  background-image: url("http://i42.servimg.com/u/f42/13/82/15/09/kyu112.jpg");
  box-shadow: 0px 0px 2px #c16a6a;
  -moz-box-shadow: 0px 0px 2px #c16a6a;
  -webkit-box-shadow: 0px 0px 2px #c16a6a;
}

.txtdesc {
margin-top: -7px;
  height: 85px;
}
  .pix {
          margin-top: -7px;
          margin-right: 3px;
            margin-left: 4px;
          opacity: 0.5;
          -webkit-transition: opacity 1s;
          -moz-transition: opacity 1s;
          -o-transition: opacity 1s;
          -ms-transition: opacity 1s;
          transition: opacity 1s;
        }

.pix:hover {
  margin-top: -7px;
          margin-right: 3px;
            margin-left: 4px;
  opacity: 1;
  -webkit-transition: opacity 1s;
          -moz-transition: opacity 1s;
          -o-transition: opacity 1s;
          -ms-transition: opacity 1s;
          transition: opacity 1s;
}
et mon HTML
Code:
<table class="desc" border="0">
<tr>
<td><div style="float: right;">
<img class="pix" src="http://i62.servimg.com/u/f62/13/82/15/09/vessal10.jpg"/>
</div><div class="txtdesc"> Résidence principale des Bezarius. Excentré, loin de la foule qui grouille en pleine journée dans les rues de la capitale, le Manoir dégage un air familier lorsque l'on s'en approche. Étrangement, ses visiteurs s'y sentent chez eux. Serait-ce le cadre idyllique qui l'entoure, les quelques arbres que l'on peut apercevoir depuis les fenêtres, ou alors les papiers peints qui rappellent les nombreuses années déjà écoulées ? Welcome.~</div></td></tr></table>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f35-le-hall-les-couloirs">Hall & Couloirs</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f133-les-chambres">Chambres</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f36-les-autres-salles">Autres Salles</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f34-la-chapelle">Salle de réception</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f134-l-exterieur">Extérieur</a>
Je vous remercie pour votre future aide et vous souhaite une bonne soirée !


Dernière édition par Oz-Chan le Mer 21 Nov 2012 - 19:05, édité 1 fois

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Oz-Chan le Ven 16 Nov 2012 - 22:02

Up !

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Oz-Chan le Dim 18 Nov 2012 - 18:45

UP

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Oz-Chan le Lun 19 Nov 2012 - 16:06

Up !

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Ea le Mar 20 Nov 2012 - 23:48

Bonjour,


Où en est votre problème ?

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Oz-Chan le Mer 21 Nov 2012 - 4:30

Bonsoir,
Il est toujours en cours. ;;

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Milouze14 le Mer 21 Nov 2012 - 6:42

Salut Oz-Chan,
change ton code HTML par celui-ci:
Code:

<table class="desc" border="0">
<tr>
<td  class="txtdesc">
Résidence principale des Bezarius. Excentré, loin de la foule qui grouille en pleine journée dans les rues de la capitale, le Manoir dégage un air familier lorsque l'on s'en approche. Étrangement, ses visiteurs s'y sentent chez eux. Serait-ce le cadre idyllique qui l'entoure, les quelques arbres que l'on peut apercevoir depuis les fenêtres, ou alors les papiers peints qui rappellent les nombreuses années déjà écoulées ? Welcome.~</td>
<td class="pix"><img src="http://i62.servimg.com/u/f62/13/82/15/09/vessal10.jpg"/>
</td></tr></table>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f35-le-hall-les-couloirs">Hall & Couloirs</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f133-les-chambres">Chambres</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f36-les-autres-salles">Autres Salles</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f34-la-chapelle">Salle de réception</a>
<a class="phalink" href="http://pandora-hearts-abyss.forumactif.com/f134-l-exterieur">Extérieur</a>

J'ai juste supprimé les balises div et attribué des td à la place en respectant les class respectives Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4562
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Ea le Mer 21 Nov 2012 - 12:12

Autrement, j'imagine que c'est vos margin-top qui foirent.

Vous avez 2 <div>, le deuxième ( avec class="txtdesc" ) se trouve 7 pixels plus haut grâce à margin-top: -7px

Ensuite dans le premier, vous avez une image ( avec class="pix" ) qui est remontée de 7 pixels, mais le bloc qui l'entoure ( et empêche la présence du texte ) reste tout de même 7 pixels plus bas.

Ainsi sur chrome apparemment les 7 pixels de différence de hauteur permette d'avoir une ligne complète en haut, et sur un autre navigateur pas.

Donc il faut arranger ça différemment si vous ne voulez pas ce problème, par exemple mettre le margin-top: -7px sur le div qui entour le <img class="pix" /> plutôt que le <img class="pix" /> lui-même.


Cordialement.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Oz-Chan le Mer 21 Nov 2012 - 14:36

Bonjour,
Je vous remercie de votre aide !
Pour Milouze, ton code fait que mon texte ne reste que à gauche et ne passe même plus en dessous de mon image avec une marge beaucoup trop grande. Ce n'est pas ce que je cherche mais merci quand même. >.<
Ea-> J'ai essayé de mettre un margin-top:7px; mais cela ne fonctionne pas... Est-ce le bon endroit : <td><div style="float: right;maring-top:7px;">. Si non, pourriez-vous me le montrer?
je vous remercie encore tous les deux pour votre précieuse aide !

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Ea le Mer 21 Nov 2012 - 15:40

Oui, sauf que c'est "margin" et pas "maring" et -7px plutôt que 7px.

Et après il faudrait enlever celui qui est mis à .pix dans le css car l'image serait alors 7 pixels trop haut.


Cordialement.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Oz-Chan le Mer 21 Nov 2012 - 15:56

Re,
J'ai bien fait ce que vous m'avez demandé mais le résultat se trouve être toujours le même sur google chrome...

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Ea le Mer 21 Nov 2012 - 16:15

awip moi aussi

il faudrait plutôt retirer le margin-top à txt-desc, et si vous voulez remonter la description et l'image, ajouter :

Code:
.desc { padding-top: 0px; }
( là comme valeur vous avez 5px, donc en réduisant à 0 ça remonterait les éléments contenu de 5 pixels )

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Oz-Chan le Mer 21 Nov 2012 - 16:38

Re,
Alors, je ne peux pas modifier cette partie car sinon, j'ai tout le cadre autour qui change de forme et qui n'est plus alignée avec celui de droite.
Voilà le rendu :
firefox

Chrome


Je vous remercie toujours de votre aide.

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Ea le Mer 21 Nov 2012 - 16:42

Chez moi c'est le contraire, sans le padding top le cadre à gauche est 5 pixels trop haut : http://i.imgur.com/yW5wQ.png

Avec il est à la même hauteur : http://i.imgur.com/9HIbD.png


Cordialement.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Oz-Chan le Mer 21 Nov 2012 - 16:45

Effectivement mais il reste trop grand comparé à celui de droite.
Il y a un espace en haut de la description qui ne devrait pas être là et ne veut pas disparaitre.. Comment puis-je faire pour que mes deux lignes soient égales?

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Ea le Mer 21 Nov 2012 - 16:57

Pour que le haut et le bas des 2 cadres soient au même pixel ?

Je ne vois qu’agrandir la taille de celui de droite, ou diminuer la taille de celui de gauche.


Cordialement.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Oz-Chan le Mer 21 Nov 2012 - 17:00

Ce que j'aimerais, c'est que le texte redevienne comme avant. Il y a un espace ici que j'aimerais enlever car ce n'est pas beau.

Et que ça redevienne comme ceci

Merci encore de votre aide !

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Ea le Mer 21 Nov 2012 - 17:02

Et bien comme mis au dessus :

Code:
.desc { padding-top: 0px; }
Moi je ne vois pas ce que ça ajoute comme problème.

Vous avez :

Code:
.desc { padding: 5px; }
dans le CSS et c'est de là que vient l'espacement en haut. En mettant le padding-top à 0 ça devrait retirer cette espacement comme voulu.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Oz-Chan le Mer 21 Nov 2012 - 17:33

C'est presque bon !
J'ai juste encore une petite question. Est-ce possible de faire des espaces entres les lignes des descriptions? Car sur chrome, elles sont toutes collées et sur firefox bien espacées.
merci !

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Ea le Mer 21 Nov 2012 - 18:54

À ma connaissance l'espacement entre ligne ne devrait dépendre que de font-size, line-height et font-family.

Donc par exemple en mettant :

Code:
.txtdesc { line-height: 20px; font-size: 11px; font-family: verdana, tahoma, serif; }
cela devrait donner le même interligne pour tout les navigateurs.

( à part si on a activé des options de navigateur du style "ne pas personnaliser les polices d'écriture" )

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte en dessous d'image sur google chrome

Message par Oz-Chan le Mer 21 Nov 2012 - 19:04

Merci ! je ne connaissais pas le premier.
Cette fois-ci, tout est bon. Je vous remercie pour votre aide !

Oz-Chan
****

Messages : 252
Inscrit(e) le : 01/01/2010

http://pandora-hearts-abyss.forumactif.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum