Aligner cadre et image sur la même ligne

Fermé
Signaler
Messages postés
3
Date d'inscription
dimanche 9 janvier 2011
Statut
Membre
Dernière intervention
12 janvier 2011
-
 4sphyxie -
Bonjour,

Voilà, je souhaite aligner ce cadre où se trouve une citation à l'intérieur à gauche et l'image animée à droite. J'arrive à les mettre l'un à côté de l'autre, mais pas à les espacer, enfin coller l'image à droite quoi.

C'est pour une signature dans un forum.

Pouvez vous me donner directement le bon lien ? Parce que je suis un peu nulle en CSS, HTML et compagnie...

Merci d'avance !

Voici le code d'origine :

<div style="color: #364449; border: 1px solid #D0D9DD; width: 360px; text-ALIGN: justify; -moz-border-RADIUS: 8px; padding-LEFT: 15px; credit-site-css: mycandids.tk; padding-RIGHT: 20px; padding-TOP: 20px; padding-BOTTOM: 20px; text-align:center; font-size: 11px;">
« Je m'en fous des filles que tu connais et puis je m'en fous aussi de ce que tu penses de moi. Je suis pas gourde au point de pas savoir à quoi je ressemble. Je suis pas gourde non plus au point d'attendre de qui que ce soit pour savoir à ma place ce que je suis capable de faire. On verra bien en fin de parcours où j'en serais et moi ça me fera bien marrer tous les gens qui m'ont prise pour une conne parce que je vais leur montrer. Mais bon je suis pas gourde non plus au point d'imaginer que je suis la seule qui parle comme ça. »</div></center></blockquote>
</div></center><img src="http://img384.imageshack.us/img384/3060/serena.gif" width="150px">



7 réponses

Messages postés
32
Date d'inscription
mardi 4 janvier 2011
Statut
Membre
Dernière intervention
10 janvier 2011
6
Bonsoir,

http://creer-un-site.fr

Insère ton image dans ton div et appliques lui une classe css ;)
J'ai utilisé les float, et du coup j'arrive juste à mettre l'image à côté du cadre, mais pas à déplacer l'image contre le rebord de droite..
Messages postés
32
Date d'inscription
mardi 4 janvier 2011
Statut
Membre
Dernière intervention
10 janvier 2011
6
.img { margin-left:-5px; }
réduire la marge extérieur de l'image ou alors
réduire la marge intérieur du cadre (ce qui je pense ne constitue pas une bonne solution puis ce que celle ci mettra ton texte au même niveau mais au cas ou :)
.div { padding-left:0px;}
Messages postés
3
Date d'inscription
dimanche 9 janvier 2011
Statut
Membre
Dernière intervention
12 janvier 2011

Non ce n'est pas une question de taille, il y a suffisamment de place..
Messages postés
43
Date d'inscription
vendredi 7 janvier 2011
Statut
Membre
Dernière intervention
30 janvier 2011
8
salut
<style type="text/css">
#corps {
   position:absolute;
   width:600px;
}
#photo {
	position:absolute;
	width:150px;
	height:96px;
	right: 0px;
	top: 20px;
	background-    image:url("http://img384.imageshack.us/img384/3060/serena.gif");
}

</style>
</head> 
 
    <body>
	<div id="corps">	
		<div style="color: #364449; border: 1px solid #D0D9DD; width: 360px; text-ALIGN: justify; -moz-border-RADIUS: 8px; padding-LEFT: 15px; credit-site-css: mycandids.tk; padding-RIGHT: 20px; padding-TOP: 20px; padding-BOTTOM: 20px; text-align:center; font-size: 11px;">
« Je m'en fous des filles que tu connais et puis je m'en fous aussi de ce que tu penses de moi. Je suis pas gourde au point de pas savoir à quoi je ressemble. Je suis pas gourde non plus au point d'attendre de qui que ce soit pour savoir à ma place ce que je suis capable de faire. On verra bien en fin de parcours où j'en 
  serais et moi ça me fera bien marrer tous les gens qui m'ont prise pour une conne parce que je vais leur montrer. Mais bon je suis pas gourde non plus au point d'imaginer que je suis la seule qui parle comme ça. »
  </div>	
<div id="photo"></div>
</div>
 </body> 


j'ai rajouté deux div, dont un avec ton image en background. l'autre est un div général qui englobe les deux autres.
A toi d'ajuster le width du div "corps" à ta préférence.
Tel que décrit, l'image est à présent à droite du texte.
A cette heure-ci, j'ai trouvé que ça.. ;)
ciaoo
Messages postés
3
Date d'inscription
dimanche 9 janvier 2011
Statut
Membre
Dernière intervention
12 janvier 2011

Ton code a l'air parfait mais... L'image n'apparait pas ...
Messages postés
43
Date d'inscription
vendredi 7 janvier 2011
Statut
Membre
Dernière intervention
30 janvier 2011
8
background-image:url("http://img384.imageshack.us/img384/3060/serena.gif");


sur la même ligne. je viens de tester et ça fonctionne. c'était juste la coupure automatique en fin de ligne.
ciaoo
Ca ne marche toujours pas ! J'obtiens ça avec ton code, et en supprimant l'espace : [url]http://img684.imageshack.us/img684/1311/sanstitregdk.png[/url] ... :(
Je rectifie. J'ai essayé ton code avec Notepad, et en effet, il fonctionne très bien (Merci !)

Mais sur le forum où je voudrais le mettre comme signature, l'image ne s'affiche pas... Tu saurais d'où viens le problème ?
Personne ? S'il vous plait ..