28220 sujets

CSS et mise en forme, CSS3

Bonjour bonjour !

J'ai un petit problème de float sous IE (FF nickel)
CSS:

    #img_instrum{
                              padding: .7em;
                              display: block;
                       }

                       p.instrum{
                                  width:100%;
                                  padding: 0;
                                  margin: 0 auto;
                                  text-align: justify;
                                  }
                       p.instrum, #mp3 {  font-size: 13px;
                                  line-height: 200%;
                               }
                       #mp3 {
                             text-align: justify;
                             border: 1px dotted #FF00FF;
                             display:block;
                             width: 100px;
                             padding-left: 1em;
                             }
                       #instrum_droite{
                                     float: right;
                                     margin: 0;
                                     text-align: center;
                                     border: 1px dotted red;
                                     }
                      div.spacer {clear: both;}  


HTML

<div id="corps_instrum">

                     <div id="instrum_droite">
                      <img id=\"img_instrum\" src="sax.gif"/>
                      <span id="mp3"> <?php if(empty($mp3)){ echo "Il n'y a pas d'extrait audio pour cet instrument";} else {echo $mp3;} ?></span>
                     </div>

                      <p class="instrum">
                       <?php echo $description; ?>
                      </p>

                      <div class="spacer">&nbsp;</div>

</div>

Je pense que vous l'aurez compris, j'aimerais que le paragraphe commence à la même hauteur que la photo...
En espérant que vous pourrez m'aider
Modifié par p_tite_jo (14 Nov 2005 - 12:46)
Bonjour,

le problème vient de la largeur de ton paragraphe, tu lui as donné une largeur de 100%, et c'est ce qu'il fait.
Si tu enlèves cette largeur, il n'occupera plus toute la largeur mais automatiquement tout l'espace disponible, ce qui n'est pas tout à fait la même chose. Donc dans :
 p.instrum{
                                  width:100%;
                                  padding: 0;
                                  margin: 0 auto;
                                  text-align: justify;
                                  }

enlève
width:100%

Modifié par energizer (01 Nov 2005 - 19:07)