28221 sujets

CSS et mise en forme, CSS3

Bonsoir,

Je souhaiterais insérer une image dans le cadre arrondi ce que j'arrive à faire mais je voudrais que mon texte qui suit l'entoure c'est à dire qu'il se positionne au niveau de l'image en haut.

Mon site est : http://dubcl.free.fr et mon code :

Le HTML

<blockquote class="rounded">
     <p><img src="background/chow1.gif" height="121" width="99"/>accumsan magna urna et odio. Morbi ullamcorper, augue quis bibendum vestibulum, purus nisl tincidunt magna, sed aliquam tellus neque vitae ipsum. Nam luctus tincidunt mi. In hac habitasse platea dictumst.</p>		 
     <p class="quotee">&#8212; CSS, &#8220;XHTML&#8221;</p>
     </blockquote>


Le Css


.rounded:before {
  background: transparent url(top-right.png) scroll no-repeat top right;
  margin-bottom: -20px;
  height: 30px;
  display: block;
  border: none;
  content: url(top-left.png);
  padding: 0;
}


.rounded:after {
  display: block;
  line-height: 0.1;
  font-size: 1px;
  content:  url(bottom-left.png);
  margin: 0 0 -1px 0;
  height: 30px;
  background: white;
  background: transparent url(bottom-right.png) scroll no-repeat bottom right ;
  padding: 0;
}

 .rounded * {
    padding-left: 16px;
    padding-right: 16px;
    
    }

  .rounded {
    margin: 1em;
    padding: 0;
  }
	
	blockquote {
   background: #f2f2f2;
   color: white;
   margin-right: -1px;
}

blockquote p{
   color: black;
}

p.quotee {

    text-align: right;
    margin: -1px 0;;
    font-weight: bold;
    color: #4d00ff;
    }


Modifié le 07 Nov 2004 - 18:36
Tu peux essayer ceci :
Le code HTML

<img class="tonimagequiflotteagauche" "src="background/chow1.gif" height="121" width="99"/>


Le code CSS

img.tonimagequiflotteagauche {
   float: left; 
   padding: 0px 0px 0px 0px; /* pour ajuster le contour de l'image */
}
Je viens de modifier :

J'ai fais cela car sinon probleme d'affichage !!


.rounded img.flotteagauche {
   float: left; 
   /* pour ajuster le contour de l'image */
}