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

Mise en page CSS Discussion :

Comment placer une photo dans le coin gauche d'un article


Sujet :

Positionnement en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé Avatar de jamdinhe
    Inscrit en
    Avril 2006
    Messages
    167
    Détails du profil
    Informations forums :
    Inscription : Avril 2006
    Messages : 167
    Par défaut Comment placer une photo dans le coin gauche d'un article
    Bonjour,

    je bloque en ce moment dans la création d'un template,

    au fait, je voudrais développer un truc en CSS ou en html pour permettre d'afficher une photo au coin supérieure gauche d'un article "text".(comme on a l'habitude de voir dans les articles des journeaux).

    Merci a ceux qui veulent aider.

    AminE

  2. #2

  3. #3
    Expert confirmé
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    Novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2006
    Messages : 4 093
    Par défaut
    Bonsoir

    En utilisant float sur l'image tout simplement ?

    Code html : 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
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr-FR">
    <head>
    <title>Tests</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
    div {
            width:500px;
    }
    img {
            float:left;
            margin:0 4px 0 0;
    }
    </style>
    </head>
     
    <body>
     
    <div>
      <img src="img1.jpg" alt="" />
      <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida elit in diam condimentum ultricies. Phasellus sit amet ante euismod erat cursus bibendum eget sodales nulla. Maecenas id justo tempor tortor tempor pharetra sed nec ligula. Vestibulum mollis, erat et sodales aliquam, lacus nunc venenatis ipsum, eu rhoncus mauris tellus vitae nulla. Integer justo tellus, tempor quis commodo vel, pretium nec nunc. Proin semper, justo sed tempor pulvinar, leo dui faucibus mauris, ut eleifend nisl lectus vel felis. Morbi vitae erat nisi, ac consectetur velit. Donec suscipit aliquet dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean in lectus velit, eu rutrum diam. In ultrices, risus eu dapibus sagittis, erat nunc cursus risus, vitae varius mi nisl sed libero. Suspendisse a dui et velit blandit ultrices ac id libero. In at leo eu felis volutpat cursus et nec tortor. Integer mattis luctus commodo. In vel lacus ut arcu iaculis sollicitudin in id orci. Ut tincidunt odio nec risus condimentum accumsan. Morbi facilisis leo commodo purus feugiat accumsan.
      </p>
      <p>
    Cras nec lorem sit amet libero posuere egestas et a justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ac turpis ut tellus sollicitudin tincidunt at nec enim. Nunc ullamcorper nisi eu magna dictum vitae egestas enim ullamcorper. Proin eleifend ornare commodo. Ut id ipsum ut nisi accumsan convallis. Quisque dignissim fermentum feugiat. Sed consequat ultrices accumsan. Quisque pulvinar rhoncus dolor in eleifend. Sed ligula nisi, consectetur eget faucibus eget, aliquet ac nisi. Integer eros augue, mattis vitae mattis eget, cursus sollicitudin erat.
      </p>
    </div>
     
    </body>
    </html>

Discussions similaires

  1. Comment Afficher une photo dans un rave
    Par GuyzoS dans le forum Débuter
    Réponses: 2
    Dernier message: 27/01/2010, 15h49
  2. comment placer une QTabBar dans QTDesigner
    Par eric_vi dans le forum Qt
    Réponses: 1
    Dernier message: 08/09/2009, 16h37
  3. Comment insérer une photo dans IFRANCE
    Par ALEX14 dans le forum IFrance
    Réponses: 3
    Dernier message: 25/03/2008, 15h17
  4. comment afficher une photo dans un état ?
    Par dj_techno dans le forum IHM
    Réponses: 7
    Dernier message: 13/11/2007, 09h13
  5. Comment effacer une photo dans un répertoire
    Par le69 dans le forum Langage
    Réponses: 2
    Dernier message: 21/04/2006, 08h48

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