28173 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde,
Un problème de mise en forme sur deux colonnes me donne des soucis et
n'ai pas trouvé de solutions dans les posts existants. Smiley ohwell

Sous FF ça marche correctement, mais pas sous IE6.

Quel est le petit détail qui tue ??

Voici mon p'tit bout de code :
<html>
<head>
	<title></title>
	<style>
form #auteurdemande #auteur,
form #auteurdemande #datedemande {
	clear: left;
}

form #auteurdemande #auteur,
form #auteurdemande #departement,
form #auteurdemande #datedemande,
form #auteurdemande #telephone {
	float: left;
	width: 185px;
	border: 0px solid red;
}

form #auteurdemande #auteur input,
form #auteurdemande #departement input,
form #auteurdemande #datedemande input,
form #auteurdemande #telephone input{
	float: left;
	width: 150px;
}
	</style>
</head>

<body>
<form>

<fieldset id="auteurdemande">
	<legend>Renseignements</legend>
	
	<p id="auteur"><label>Auteur :</label><input type="text"/></p>
	<p id="departement"><label>Département :</label><input type="text"/></p>	
	<p id="datedemande"><label>Date :</label><input type="text"/></p>
	<p id="telephone"><label>Téléphone :</label><input type="text"/></p>


</fieldset>

</form>


</body>
</html>


Merci
hkriegers a écrit :
Quel est le petit détail qui tue ??

Le fait que ton code HTML ne soit pas syntaxiquement valide ?
http://validator.w3.org

À vue de nez :
- manque le Doctype Smiley biggol ;
- manque l'attribut type pour l'élément style ;

Pour l'accessibilité, ça serait bien de faire un formulaire accessible avec des labels explicites (utiliser l'attribut for sur les label).

Pour la mise en forme : tu fais flotter les paragraphes que tu restreins à une largeur de 185px, lesquels seront occupés sur 150px (ce qui en laisse maximum 35 pour le texte...) par des input également flottants.
Tout ça promet un joyeux bordel (je suis presque étonné que ça passe sous Firefox... m'est avis que si on augmente un peu la taille des caractères tout fout le camp).

Quand tu dis « mise en forme sur deux colonnes », tu veux dire les label dans la colonne de gauche et les input dans celle de droite ?

form #auteurdemande p {
	clear: both;
}
form #auteurdemande p label {
	float: left;
	width: 50%;
}
form #auteurdemande p input {
	width: 30%;
}

Ce n'est bien sûr qu'un exemple, à tester et à adapter.
Merci pour ta réponse.
Mon souci n'étant ici pas l'accèssiblité, j'ai volontairement négligé la validation.
Le Doctype, le style type ajouté, mon code minimaliste est passé avec succès au validator.

Pour la mise en forme :
La largeur des paragraphes est volontairement à 185px puis occupé sur 150px, car selon la situation, il peut y avoir ou non un bouton à la droite de l'input; donc espace de 35px réservé.

Que ce soit sous FF ou IE, je n'arrive pas à obtenir un "joyeux bordel" en variant la taille de la police. Tout reste bien sagement en place Smiley ravi

Dans mon form je veux avoir les labels au dessus de l'input qui le concerne.
Ce que j'entends par "mise en forme sur deux colonnes", c'est une ligne avec les 2 p (Auteur et Département) puis une seconde ligne avec les 2 p (Date et Téléphone).

Le voici en image :
Sous FF:
upload/11162-2L2C.jpg

Sous IE:
upload/11162-2L2CIE.jpg

Voici le code validé :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
form {
	font-size: smaller;
	font-family: Arial, Helvetica, sans-serif;
}
form #auteurdemande {
	width: 600px;
}
form #auteurdemande #auteur,
form #auteurdemande #datedemande {
	clear: left;
}

form #auteurdemande #auteur,
form #auteurdemande #departement,
form #auteurdemande #datedemande,
form #auteurdemande #telephone {
	float: left;
	width: 185px;
	border: 0px solid red;
}

form #auteurdemande #auteur input,
form #auteurdemande #departement input,
form #auteurdemande #datedemande input,
form #auteurdemande #telephone input{
	float: left;
	width: 150px;
}
</style>
</head>
<body>

<form action="">

<fieldset id="auteurdemande">
	<legend>Renseignements</legend>
	
	<p id="auteur"><label>Auteur :</label><input type="text"/></p>
	<p id="departement"><label>Département :</label><input type="text"/></p>	
	<p id="datedemande"><label>Date :</label><input type="text"/></p>
	<p id="telephone"><label>Téléphone :</label><input type="text"/></p>


</fieldset>

</form>

</body>
</html> 

Modifié par hkriegers (12 Apr 2007 - 13:27)
Le clear: left sur les input est inutile.

Pour la mise en page sur deux « colonnes », le problème vient il me semble du fait que IE a du mal à gérer correctement la propriété clear dans des séries de flottants.

Le plus simple serait d'englober les groupes de deux paragraphes dans des div. Il suffira alors d'éviter les dépassement de flottants, et ça ira bien.
Cf. Éléments flottants qui dépassent de l'élément parent.

(Sinon, on peut aussi utiliser un tableau. Smiley cligne )
a écrit :
Cf. Éléments flottants qui dépassent de l'élément parent.

je vais explorer ça.

Les tableaux ?
Non, c'est ce que je suis entrain de supprimer...
hkriegers a écrit :
Les tableaux ?
Non, c'est ce que je suis entrain de supprimer...

Disons qu'il peut être utile de saisir la nuance entre 15 tableaux imbriqués et un tableau correctement utilisé. Smiley cligne
Tout à fait Smiley cligne

Mais comme je n'ai le loisir de tout reprendre actuellement
j'ai adopté la solution "bricolus" : ajouter un br après "Département"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
form {
	font-size: smaller;
	font-family: Arial, Helvetica, sans-serif;
}
form #auteurdemande {
	width: 600px;
}
form #auteurdemande #auteur,
form #auteurdemande #datedemande {
	clear: left;
}

form #auteurdemande #auteur,
form #auteurdemande #departement,
form #auteurdemande #datedemande,
form #auteurdemande #telephone {
	float: left;
	width: 185px;
	border: 0px solid red;
}

form #auteurdemande #auteur input,
form #auteurdemande #departement input,
form #auteurdemande #datedemande input,
form #auteurdemande #telephone input{
	float: left;
	width: 150px;
}
</style>
</head>
<body>

<form action="">

<fieldset id="auteurdemande">
	<legend>Renseignements</legend>
	
	<p id="auteur"><label>Auteur :</label><input type="text"/></p>
	<p id="departement"><label>Département :</label><input type="text"/></p><br/>
	<p id="datedemande"><label>Date :</label><input type="text"/></p>
	<p id="telephone"><label>Téléphone :</label><input type="text"/></p>


</fieldset>

</form>


</body>
</html>

Modifié par hkriegers (12 Apr 2007 - 14:38)