CSS - Superposition de l'image sur le dessus de l'autre

Je ne peux pas mieux le décrire par des mots, donc je vais vous montrer avec des photos.

Voici comment mon concepteur entend le Gravatar images à regarder dans la barre latérale de notre site:

comment le concepteur veut http://i41.tinypic.com/rjnn6v.png

Voici la superposition de l'image que j'ai faite (screenshotted de Photoshop):

mon image de superposition http://i43.tinypic.com/s1sz2e.png

Voici à quoi il ressemble maintenant...

pas tout à fait idéal http://i42.tinypic.com/21j13s3.png

Pas tout à fait idéal, je pense que vous serez d'accord. C'est le code CSS, je suis en utilisant:

.gravatarsidebar {
    float:left; 
    padding:0px;
    width:70px;
}

.gravataroverlay {
 width:68px;
 height:68px;
 background-image: url('http://localhost:8888/images/gravataroverlay.png');
}

Et voici le XHTML (et un peu de PHP pour récupérer le Gravatar basé sur l'adresse email de l'utilisateur, qui est récupérée à partir de notre base de données):

<div class="gravataroverlay"></div>

        <div class="gravatarsidebar">
            <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
            echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?>  
        </div>

Que puis-je faire? Je ne peux pas utiliser le positionnement relatif car il rend le mot "Recherche" dans le div en dessous de séjour déplacé vers la droite.

Merci pour votre aide!

Jack

Vous pourriez avoir plus de chance si vous demandez à Doctype: doctype.com

OriginalL'auteur Jack | 2010-04-11

  1. 7

    Avez-vous essayé d'utiliser z-index pour forcer les deux images de superposition? Peut-être que quelque chose comme cela? Voici un exemple de pseudo.

    <div class="gravatar-sidebar">
     <img class="overlay-image" src="images/gravataroverlay.png" />
     <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
     echo '<img src="' . $gravatar_link . '" alt="Gravatar" class="gravatar-image"/>'; ?>
</div>

/*CSS*/
.gravatar-sidebar {float:left;padding:0px;width:70px;position:relative;}
img.overlay-image{position:absolute;left:0px;top:0px;z-index:10;}
img.gravatar-image{position:absolute;left:0px;top:0px;z-index:1;}
    Qui permet d'obtenir exactement l'effet que je veux! Merci beaucoup pour votre aide! 🙂
    Fonctionne très bien si vous ajoutez un "Vendu" ou "sale Attente" de l'image sur le haut d'une liste de biens immobiliers.

    OriginalL'auteur Jon

  2. 0

    Vous ne pouvez pas utiliser le positionnement relatif où? Sur l'image gravatar?

    Je me demande pourquoi vous avez votre superposition div à l'extérieur du conteneur de l'image elle-même. À tout le moins, ils devraient être frères et sœurs. Faire un conteneur qui contient seulement de l'image et de la superposition, puis faire la superposition de position absolue à 0,0 à être en haut de l'image.

        <div class="gravatarsidebar">
        <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
        echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?>
        <div class="gravataroverlay" style="position:absolute; top:0; left:0;"></div>  
    </div>
    Je ne peux pas utiliser le positionnement relatif de la superposition de l'image, depuis quand je la déplace, il laisse toujours un "écart" de sa largeur, ce qui pousse le mot "Recherche" à droite. Je vais donner à votre suggestion d'un aller bien, et de faire rapport à bientôt!
    Je suis désolé, mais votre code ne fonctionne pas. Je suppose que lorsque vous avez écrit style="position:relative vous signifiait position:absolute, mais d'essayer les deux méthodes et je reçois toujours le même effet. Dans l'absolue, il se trouve juste dans le coin supérieur gauche de la fenêtre d'affichage du navigateur...
    si vous le pouvez, prenez le gravatarsidebar classe position relative. De cette manière, il devient le cadre de référence pour le positionnement de ses enfants. C'est pourquoi, actuellement, il va vers le haut à gauche du navigateur, c'est la référence est le corps, non dans la barre latérale du conteneur.
    Ah, merci! Je me demandais ce qui n'allait pas. Tout fonctionne bien maintenant 🙂

    OriginalL'auteur Tesserex