18041 sujets

Questions générales et questions de débutants

Aligner un <input type="image"> sur la droite dans un

Bonjour,

Voilà la question est dans le sujet du message.

Si j'aligne mon <input type="image"> sur la droite, il me fait un retour à la ligne et sort du bloc.

Je vous donne mon code (j'ai testé sur IE 8 et Firefox 3, le comportement est identique mais cela ne vient pas des navigateurs mais de MOI et mon manque de connaissance en CSS).

Pouvez-vous me donner un petit coup de main ?

Merci d'avance 


<div style="border-style:inset;width:50%;">
				<input id="statut_appel" name="statut_appel" title="A traiter" value="0" type="radio">
				<input style="display:inline;" name="ajouter" src="images/apply-32.png" title="Ajouter" type="image"  border="0">	
		</div>
Bonjour,

Etant donné que tu donnes une valeur relative à la largeur du div et que tu ne précises pas la largeur de l'image, difficile de t'aider ...

Essaie ceci :


<div style="border-style:inset;width:50%;overflow:auto;">
	<input type="radio" id="statut_appel" style="float:left" name="statut_appel" title="A traiter" value="0">
	<input type="image" style="float:right" name="ajouter" title="Ajouter" src="images/apply-32.png">	
</div>
Bonjour,

Je vois tu as sorti les éléments du flux normal pour les coller à gauche et à droite. Cela fonctionne je te remercie.

Par contre j'aimerai comprendre pourquoi, dans mon code précédent cela ne marchait pas ?
C'est un soucis de bloc je suppose ? Un <input> est de type inline pourtant non ? je devrais donc pouvoir mettre un autre élément à sa droite sans qu'il y ai de retour à la ligne ?

Merci
yinyin76 a écrit :
Un <input> est de type inline pourtant non ?
==> OUI

Encore une fois, tu ne précises pas la largeur de l'image. Je ne rencontre pas ton problème si je place une image disposant d'assez d'espace pour se loger dans le div.

Tu mets pour le div "width:50%", mais 50% de combien? Je crois que le retour à la ligne se fait par manque de place, tout simplement.
Teste avec une image moins large pour voir!
Même en donnant une largeur et une hauteur à mon bloc div ainsi qu'à l'image, quand je veux l'aligner à droite elle me fait toujours un retour à la ligne je ne comprends vraiment pas. Pourtant il y a assez d'espace l'image ne fais que 10 px en hauteur et largeur et 300 pour le bloc.



<div style="border-style:inset;width:300px;height:300px;">
<input type="radio" id="statut_appel"  name="statut_appel" title="A traiter" value="0">
<input type="image" name="ajouter" style="width:10px;height:10px;" align="right" title="Ajouter" src="images/apply-32.png">	
</div>


Désolé si je suis chiant mais j'aimerai comprendre pour ne pas refaire les mêmes erreurs Smiley cligne
Modifié par yinyin76 (04 May 2011 - 10:57)
Bonjour,

J'ai testé le code que tu donnes en dernier lieu et je n'ai pas ce fameux retour à la ligne dont tu parles. Je précise que j'ai testé sous IE8 avec un doctype HTML 4.01 Transitional.
Si j'enlève le doctype, il y a effectivement un retour à la ligne.
A toi de tirer les conclusions ...

Cordialement
D'accord je vois merci. Par contre, cela ne fonctionne pas sous Firefox 3 Smiley decu
Tu peux m'aider la dessus s'il te plaît ?
Modifié par yinyin76 (05 May 2011 - 10:15)
Chez moi, avec doctype, ça fonctionne très bien sur IE8 et FF 3.6.17.
Sans doctype, IE affiche un retour à la ligne et FF pas.

De plus, en xhtml transitional, le validateur accepte le code ci-dessous:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>
      test
    </title>
    <style type="text/css">
/*<![CDATA[*/
    div.c2 {border-style:inset;width:300px;height:300px;}
    input.c1 {width:10px;height:10px;}
    /*]]>*/
    </style>
  </head>
  <body>
    <div class="c2">
      <input type="radio" id="statut_appel" name="statut_appel" title="A traiter" value="0" />
      <input type="image" name="ajouter" class="c1" align="right" title="Ajouter" src=
      "images/apply-32.png" />
    </div>
  </body>
</html>


Je ne situe pas très bien ton problème. Désolé ...
Modifié par lddsoft (05 May 2011 - 10:43)
Bonjour,

Mon problème venait du fait que je n'avais pas mis de DOCTYPE dans ma page. Smiley decu

Merci beaucoup de m'avoir aidé à résoudre mon problème, je retiens la leçon : toujours un DOCTYPE.

Merci beaucoup Smiley cligne
Sujet clos
Aller à