Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème pour le positionnement d'une image

(CSS/positionnement)

    6 janvier 2006 à 22:44:38

    Bonjour,

    J'espère que le sujet n'as pas déjà été traité, car j'ai rien trouver sur ce site qui pouvais m'aider. Je voudrais positionner une image à gauche d'un texte, avec le texte qui habille l'image :
    ### abc
    ### abc
    ### abc
    abcdefg
    ijklmnop

    Ce genre la (l'alphabet pour le texte, les dièses pour l'image).
    J'avais pensé mettre mon image dans le paragraphe (<p><img /></p>) et de mettre un float sur l'image. Mais l'image sort du cadre et ca ne va pas du tout.
    C'est pour un projet que je dois rendre lundi matin, j'espère que quelqu'un pourra très vite m'aider :$.

    Mon code CSS :

    /*#############################################//
    //################ CLASS : art ################//
    //---------------------------------------------*/


    .art
    {
            background-color:transparent;
            background-image:url("docs/opt-color/silver.jpeg");
            background-repeat:repeat-x;
            border:solid 1px silver;
            border-top:groove 4px silver;
           
            width:95%;
            padding:0;
            margin:2.5%;

            position:relative;
            text-align:justify;
    }

    div.art h1
    {
            background-color:transparent;

            width:80%;
            height:30px;
            clear:both;
           
            margin:1%;
            margin-top:0;
            position:absolute;
            top:0;
            left:0;
           
            vertical-align:top;
            text-align:left;
            font-size:1.6em;
    }

    div.art h2, div.art h3
    {
            background-color:silver;

            width:50%;
            height:15px;
            clear:both;
           
            margin:0;
            margin-top:1%;
            position:absolute;
            bottom:0;
            right:0;
           
            vertical-align:top;
            text-align:right;
            font-size: 1em;
            font-weight:bold;
    }

    div.art h3
    {
            position:absolute;
            bottom:0;
            left:0;
           
            vertical-align:top;
            text-align:left;
            font-size: 0.8em;
            font-weight:bold;
    }

    div.art a, div.art a:visited
    {
            background-color:transparent;
            color:blue;
            text-decoration:underline;
    }

    div.art a:hover
    {
            background-color:black;
            color:silver;
            text-decoration:underline;
    }

    div.art p
    {
            background-color:transparent;

            width:98%;
            padding:0;
            margin:1%;
            margin-top:31px;
            margin-bottom:16px;
           
            font-size: 1em;
    }

    div.art img, div.art img:hover
    {
            background-color:transparent;
            border:none;
            float:left;
           
            padding:0;
            margin:1%;
    }

    Un article en html :

            <div class='art'>
                    <ul class='ligne'>
                            <li><a href='tools.php?mode=del_art&num_art=11'>
                            <img class='btn_del' src='docs/Images/del.jpeg' alt='Effacer' />
                            </a></li>

                            <li><a href='tools.php?mode=modif_art&num_art=11'>
                            <img class='btn_mod' src='docs/Images/mod.jpeg' alt='Modifier' />
                            </a></li>
                    </ul>
                    <h1>Titre de votre article 11</h1>
                    <p>Votre article...</p>
                    <h3>A &eacute;t&eacute; &eacute;crit le : 03/01/2006 à 17:54:42</h3>

                    <h2>
                            <a href='tools.php?mode=see_com&num_art=11'>Voir les commentaires (0)</a> -
                            <a href='tools.php?mode=add_com&num_art=11'>Poster un commentaires</a>
                    </h2>
            </div>


    Je vous remercie d'avance. Mon avenir en dépend (ou presque) :).
    • Partager sur Facebook
    • Partager sur Twitter
      7 janvier 2006 à 1:16:26

      Bonsoir,
      je n'ai pas la réponse mais sur le cours a Mateo il parle pour faire cela avec une lettre (Lettrine je crois) essaie de voir en bidouillant et mettre ton image au lieu de la lettre
      Cordialement
      • Partager sur Facebook
      • Partager sur Twitter

      Problème pour le positionnement d'une image

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur
      • Markdown