[RESOLU] Problème d'alignement avec <label>...

Bonjour à tous,

Bon je vous explique rapidement mon problème...
J'ai un formulaire qui me permet d'enregistrer des informations dans une BDD (jusque là, c'est classique ).
Ensuite, sur une autre page, après requête de sélection, j'affiche les résultats.
Par contre, alors que mes balises <label> se positionne bien, je n'arrive pas à faire en sorte que les informations retournées soit alignées après le label lorsqu'il y a plusieurs lignes... comme sur la capture suivante :


Voici un bout du code HTML/PHP (tous les champs étant construits sur le même modèle) :

<p>
<label for="partie_rdv" class="membre_partie">Lieu de Rendez-vous : </label>
<?php echo nl2br($mesInfos["lieu_rdv"])."\n"; ?>
</p>
<p>
<label for="partie_scenario" class="membre_partie">Scénario : </label>
<?php echo nl2br($mesInfos["scenario"])."\n"; ?>
</p>
<p>
<label for="partie_a_prevoir" class="membre_partie">Recommandé de prévoir : </label>
<?php echo nl2br($mesInfos["recommandations"])."\n"; ?>
</p>

Voici le CSS :

p {
	clear: left;
	text-align: left;
}

label.membre_partie {
	float: left;
	font-weight: bold;
	text-align: left;
	width: 150px;
}

Pouvez-vous m'aider ? Me dire ce que j'ai raté ou ce qui ne va pas ?
Merci d'avance.
Cordialement.
Modifié par Eagle2000 (25 Aug 2008 - 14:39)

float a été prévu pour qu'on l'applique à une image lorsque l'on veut qu'elle soit "enrobée" par le texte. Imagine que ton label soit une image et tu comprendras l'idée : l'image se place tout à gauche ou tout à droite suivant si tu as choisi float:left ou float:right et le texte vient remplir toute la place restante dans le conteneur.

Du coup forcément, si ton texte est trop long sur une ligne ou que tu mets un <br> tu auras cet effet d'enrobage. Après si tu veux faire ce que tu décris, privilégie une mise en page en 2 colonnes dans chacun de tes paragraphes auxquels tu appliques position:relative; pour qu'ils deviennent les conteneurs référents, c'est le plus simple. Une colonne pour tes labels, une colonne pour tes textes. Il y a plusieurs solutions décrites dans les tutoriels Alsacreations.
Modifié par Karadomine (24 Aug 2008 - 20:36)

OK.
Merci pour ces informations Karadomine.
Effectivement, je vois et comprends beaucoup mieux la chose maintenant

Je vais donc essayer de refaire la mise en page.
Par contre, ça veut dire qu'il faut que je multiplie les positions afin que chaque "libellé" se retrouve bien en face de son contenu.
En fait, je vais essayer de partir comme l'indique ce tutoriel, mais autant de fois que de libellé.

A moins que ce ne soit encore une mauvaise option... ?

Modifié par Eagle2000 (24 Aug 2008 - 20:58)

Salut,

l'élément LABEL ne doit être utilisé qu'avec des champs de formulaire.

Un exemple avec STRONG :

html

<strong>Libellé 1 :</strong>
<p class="valeur"><?php echo nl2br($_POST["texte1"])."\n"; ?></p>
<strong>Libellé 2 :</strong>
<p class="valeur"><?php echo nl2br($_POST["texte2"])."\n"; ?></p>
<strong>Libellé 2 :</strong>
<p class="valeur"><?php echo nl2br($_POST["texte3"])."\n"; ?></p>

css

strong {
	float: left;
}
.valeur {
	margin: 0 0 0 210px;
	width: 300px;
}

A+

Génial.
Merci Heyoan.
A vous deux, je viens de résoudre mon problème.

Merci encore