Nouveau sur le forum ? Voici votre case départ pour bien débuter.

Liens contextuels :

Forum Alsacréations : CSS et Standards Web · CSS et mise en forme · [Résolu]Label sur plusieurs lignes
Rechercher dans le sujet :
Auteur
Nambew
# 11 Mar 2008 - 21:30:32
Citer
3 Posts
 Salut,

J'ai cherché sur google et aussi sur Alsacréation. J'ai une série de radio button à gauche et leur label est situé à droite. Il arrive parfois que le label est trop long et se retrouve sur plusieurs lignes. Le retour à la ligne est aligné avec le radio button. J'aimerais savoir s'il est possible de l'aligner avec le texte. Je joins une image avec en haut l'affichage actuel et en bas ce que j'aimerais avoir. Je me demandais si ce genre de chose est possible avec label.

Merci

upload/16046-exemple.jpg
Modifié par Nambew (12 Mar 2008 - 21:33)
^
Benjamin D.C.
# 11 Mar 2008 - 21:59:28
Citer
Modérateur
2225 Posts
 Une piste:
HTML



<form action="">

	<p>

		<label>

			<input type="radio" value="foo" name="bar" />

			Lorem ipsum dolor sit amet.

		</label>

	</p>

</form>





CSS



label {display:block; position:relative; padding-left:25px}

input {position:absolute; left:0}

This is the way, step inside.
http://deaxon.com 
^
knarf
# 11 Mar 2008 - 22:25:50
Citer
764 Posts
 Bonjour nanbew et bienvenue,

Sauf erreur de ma part le label est là pour annoncer l'élément qui lui est couplé (label explicite).

Dans l'exemple donné même si je n'ai pas le code je suppose que celui-ci est après le bouton radio dans le flux, ce qui n'est pas le mieux.

Une solution si le rendu graphique doit absolument être conservé est d'éventuellement passer par un flottant à droite ce qui remets le label en première position dans le flux.
Modifié par knarf (11 Mar 2008 - 22:27)
http://www.web-pour-tous.org 
^
Nambew
# 11 Mar 2008 - 23:17:48
Citer
3 Posts
 Désolé d'avoir oublié le code. J'ai utilisé la solution proposée par Benjamin et ça fonctionne bien sous Firefox. Un léger problème de marge sous IE par contre. J'ai utilisé le hack !important pour corriger.

Merci pour la solution



#putois_quiz label

{

	display:block; 

	position:relative; 

	padding-left:50px;

}



.putois_radio

{

	position:absolute;

	left:0;

	margin-left:25px !important;

	margin-left:-25px;

}






<form method="post">

        <label><input class="putois_radio" type="radio" name="answer" value="1" id="answer1"> <!-- ANSWER1 --></label><br>

        <label><input class="putois_radio" type="radio" name="answer" value="2" id="answer2"> <!-- ANSWER2 --></label><br>

        <label><input class="putois_radio" type="radio" name="answer" value="3" id="answer3"> <!-- ANSWER3 --></label><br>

        <label><input class="putois_radio" type="radio" name="answer" value="4" id="answer4"> <!-- ANSWER4 --></label><br>

        <input type="submit" name="send" value="Confirmer">

    </form>


^
Prévenir un modérateur
Répondre au sujet
Aller à

référencesLes références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles - Location vacances France - Location vacances Europe

Nikozen : Hébergement - Réalisation : Alsacreations.fr

Powered by Phedio v3.7.9 © dew
Contacter l'administrateur - 6.8 ms - Charte