[résolu] Positionner un <input/> à droite d'un <p></p&

J'ai essayé pour voir et ca a pas l'air simple en effet

mais je me demande si c pas normal. A ce que j'ai lu sur ce site y aurait une difference en les balise en ligne et en bloc.

pour voir j'ai remplacé tes balises <p> par des <span>

et la j'ai pu placer tes boutons a droite du texte. en mettant plutot le code suivant

<ul>
<li>
<form method="POST">
<input title="Cliquer pour supprimer" class="supp" src="indicator.gif" type="submit" name="supp_chap" value=" "/>
<span title="Double-cliquer pour éditer..." class="editable"  id="384">Chapitre 1</span>
<input type="hidden" name="id_supp_chap" value="384" />

( j'ai mis le span dedans car un float:right se place par rapport a son predecesseur si j'ai bien compris )

et

input.supp {
background-image:url(../image/hautbas.gif);
border:1;
width:16px;
height:16px;
cursor:pointer;
top:0px;
[b]float:right;[/b]
} 

mais c peut etre faisable avec les <p> qd même ...
au fait ça affiche qqchose un title dans une balise <p>? j'ai jamais essayé
Modifié par CPascal (19 Apr 2007 - 22:30)

Bonsoir ...

J'aurais tout d'abord une question pour toi :
Pourquoi inclus-tu des <p> à l'intérieur de tes éléments de liste ?
Par définition, ceux-ci sont déjà des éléments de type block, tu n'as donc pas besoin de rajouter un paragraphe...

La solution que je te propose est la suivante :
- Place d'abord ton input dans ton élément de liste;
- Puis place ton texte dans un conteneur de type inline (span);
- Fait flotter ton image à droite;
- Puis fait flotter ton texte à gauche.

Il est important que l'input apparaissent en première position dans le code HTML.


En gros, le morceau de code qui t'intéresse ressemblera à ça :

XHTML :
 <ul>
    <li><input type="submit" /> <span>Introduction</span></li>
 </ul>


CSS :
  li input {
    float:right;
  }

  li span {
    float:left;
  }

Modifié par Cygnus (19 Apr 2007 - 23:46)

D'autre part, je te recommande deux lectures très intéressantes :
- Gérer la taille du texte avec les « em »
- La structure des balises : bloc et en-ligne

Bonne continuation
Modifié par Cygnus (19 Apr 2007 - 23:38)

Euh, et pourquoi ne pas utiliser les label ?

<label for="sup_champ1">Le nom de mon chapitre<input name="sup_champ1" title="Cliquer pour supprimer" class="supp" src="indicator.gif" type="submit" id="sup_champ1" /></label>

En faisant ainsi, tu as tout sur la même ligne il me semble ?

(de plus tu rendras ton formulaire un peu plus accessible (utilisation des label))
Modifié par Super_baloo8 (20 Apr 2007 - 01:13)

Super_baloo8 a écrit :
Euh, et pourquoi ne pas utiliser les label ?

Effectivement, on peut utiliser des <label>.
Par contre, l'utilisation de labels implicites est déconseillée : voir la FAQ à ce sujet.


Le code donnerait donc plutôt ceci :

XHTML :
<ul>
    <li><input type="submit" name="supp1" /><label for="supp1">Le nom de mon chapitre</label></li>
</ul>


CSS :
li label {
  float:left;
}
  
li input {
  float:right;
}

Cygnus a écrit :

Effectivement, on peut utiliser des <label>.
Par contre, l'utilisation de labels implicites est déconseillée : voir la FAQ à ce sujet.


[...]

Merci pour le lien, ca faisait un moment que je n'étais pas repasser par la Faq, qui entre temps à bien changer !

Heureusement que je vois ça maintenant, car je suis en train de refaire complètement un site, et j'avais déjà commencer à en faire des implicites ... oops

Je peux aller faire dodo maintenant, je suis moins bête qu'hier (zut, on est déjà demain lol)

Ah merci à tous ! C'est super d'avoir autant de réponse !

Alors je vous explique pourquoi j'ai utilisé des <p> à la place des <span>, c'est tout simplement parce que j'ai ajouté une touche d'Ajax ds mon code, pour qu'on puisse éditer à la volée en double cliquant sur le chapitre pr le modifier, et il s'est avéré que si j'utilisais des <span>... et bien ca déconnait, j'ai donc testé avec des <p> et là miracle, mon bouzin s'est mis à tourner sans soucis.

Je vais tenter avec des labels et je reviens par ici

C'est bon ! J'ai reussi, en revanche il ne faut pas mettre de float:left sur le label sinon ca part en sucette.

Bon maintenant ca déconne mais là je crois que ca vient du coté d'AJAX...

Merci à tous en tout ca !

Sinon une derniere petite question, comment faire pr mettre un texte dans un input genre "Ajouter ici blabla" et qu'il disparaisse lorsque l'on clique ds l'input ?
Modifié par Howard (20 Apr 2007 - 14:20)

Ben en moi j'indiquerais tous betement une valeur par defaut value="Ajouter ici blabla" dans un champ texte.

maintenant faut effacer a la main c vrai. sinon une fonction javascript sur onclick qui fait document.getElementById('monid').value=""
Modifié par CPascal (20 Apr 2007 - 14:29)

Ca se fait par javascript, ceci permet de le faire fonctionner :

<form id="recherche_moteur" method="post" action="/recherche/">

<p><label for="recherche">Votre <span>Recherche</span></label></p>
			
			<p><img src="/css/images/puce_moteur.gif" alt="Recherche">

<input id="recherche" name="recherche" value="Vos mots clés" [b]onfocus="document.forms['recherche_moteur'].recherche.value='';" onblur="if (document.forms['recherche_moteur'].recherche.value == '') document.forms['recherche_moteur'].recherche.value='Vos mots clés';"[/b] type="text">

<input class="bouton" id="envoyer" value="O.K." type="submit"></p>

</form>

Par contre, si l'utilisateur quitte le champs (focus) et reviens, ca lui affiche le champs de départ. Donc pour éditer c'est un peu compliqué.
Modifié par Super_baloo8 (20 Apr 2007 - 14:28)

Génial, c'est exactement ce que je cherchais ! Merci encore

Voila un screen pour vous montrer le résultat final de mon menu:

http://www.hebergement-images.com/05/1177079541_plop.gif
Modifié par Howard (20 Apr 2007 - 16:43)

Ahhhh !!! IE !

http://www.hebergement-images.com/05/1177089724_Sans-titre-2.gif

Lorsque j'ai 4 chapitres je n'ai pas ce probleme... mais en dessous c'est le bas qui déconne... j'ai pourtant mettre un margin-bottom:-3px;... mais ce n'est pas valide...

Avec tous mes sites j'ai du mettre des margin négatif à cause de IE... comment faites vous pour vous en sortir avec ce *$ù=*ù^ de navigateur ???
Modifié par Howard (20 Apr 2007 - 19:35)