IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Superpositionnement d'image et retour à la ligne


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Candidat au Club
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2007
    Messages : 3
    Par défaut Superpositionnement d'image et retour à la ligne
    Bonjour à tous,

    Je suis en pleine création d'un site. Cependant ne possèdant que les bases du langage html, je n'arrive pas à résoudre mon problème.
    Je cherche donc à superpositionner deux images en donnant a celle du dessus des coordonnées par rapport au bord gauche de la page et au haut de la page.
    Pour l'instant je possède ce code:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <html>
    <head>
    <style type="text/css">
    .imagedessous { 
      position : absolute;
      z-index : 1; 
    }
                                       
    .imagedessus { 
      position : absolute; 
      z-index : 2; 
    }
    </style>
    <body>
    <img src="img1.jpg" class="imagedessous" title="mon_image1">
    <img src="img2.jpg" class="imagedessus" title="mon_image2">
    </body>
    </html>
    Mes images sont donc bien supersposés, cependant je ne sais pas où insérer les balises top et left pour pouvoir positionner la deuxieme image.

    Ensuite au survol de la deuxieme image j'aimerais qu'un texte apparaisse sur plusieurs lignes. J'ai trouvé un tuto sur le site expliquant comment faire pour la balise alt et cela marche pour ie. Cependant je travaille toujours avec mozilla et j'aimerais savoir si les retours à la ligne dans un title était possible.

    Merci d'avance

  2. #2
    Membre Expert Avatar de Madfrix
    Profil pro
    Inscrit en
    Juin 2007
    Messages
    2 326
    Détails du profil
    Informations personnelles :
    Localisation : France, Gironde (Aquitaine)

    Informations forums :
    Inscription : Juin 2007
    Messages : 2 326
    Par défaut
    Salut, essaies avec ça :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    .imagedessus { 
    position : absolute; 
    top:Xpx;
    left:Ypx;
    z-index : 2; 
    }
    avec X et Y des nombres

    tu peux aussi définir les grandeurs de tes images avec width et height.

    A+

    PS :

  3. #3
    Candidat au Club
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2007
    Messages : 3
    Par défaut
    Merci Madfrix, ta méthode a parfaitement marcher :p

    Me manque plus qu'à trouver comment revenir à la ligne :s

    Je trouve l'info sur aucune forum, y'a peut être pas de possibilité pour mozilla :s.

  4. #4
    Membre Expert Avatar de Madfrix
    Profil pro
    Inscrit en
    Juin 2007
    Messages
    2 326
    Détails du profil
    Informations personnelles :
    Localisation : France, Gironde (Aquitaine)

    Informations forums :
    Inscription : Juin 2007
    Messages : 2 326
    Par défaut
    Personnellement, si je voulais faire apparaître un texte au dessus d'une image, je m'orienterais vers des div invisibles qui s'afficheraient lorsque la souris survolerait l'image.

    Ex :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
     
    <DIV id="IMG1">Le commentaire ici sur ton image</DIV>
     
    <img src="..." onMouseover="document.getElementById('IMG1').style.visibility = 'visible';" onMouseout="document.getElementById('IMG1').style.visibility = 'hidden';">
     
    /* et ton code CSS : */
     
    #IMG1{
    position:absolute;
    top:...
    left:...
    visibility:hidden;
    }

    Avec ce bout de code tu ne devrais plus avoir de problème

    A+

  5. #5
    Membre Expert Avatar de Madfrix
    Profil pro
    Inscrit en
    Juin 2007
    Messages
    2 326
    Détails du profil
    Informations personnelles :
    Localisation : France, Gironde (Aquitaine)

    Informations forums :
    Inscription : Juin 2007
    Messages : 2 326
    Par défaut
    Précision : tu peux mettre ton image dans ton div tu gagneras en visibilité et en lignes de code. Avantage : une seule définition de coordonnées pour l'image et le div

  6. #6
    Candidat au Club
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2007
    Messages : 3
    Par défaut
    Merci beaucoup ca marche nickel.

Discussions similaires

  1. Retour à la ligne non prévu sur des images.
    Par roni44 dans le forum Langage
    Réponses: 2
    Dernier message: 05/02/2015, 08h47
  2. Images retour à la ligne puis images
    Par proximacent dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 07/11/2011, 20h33
  3. inserer une image sans retour à la ligne
    Par fafoula dans le forum Balisage (X)HTML et validation W3C
    Réponses: 9
    Dernier message: 30/07/2008, 11h11
  4. [MFC] Retour à la ligne dans un CEdit
    Par Kant dans le forum MFC
    Réponses: 7
    Dernier message: 18/02/2004, 08h58
  5. Conserver les retours à la ligne
    Par arwen dans le forum ASP
    Réponses: 2
    Dernier message: 04/12/2003, 12h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo