18041 sujets

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

2 fieldsets par ligne (comme un tableau)

Pages :
Dernière édition 11h54 le 15 septembre

Voici mon problème

j'ai réussi mais uniquement dans IE
ça me saoul

en fait dans FF, les fieldset ne se mettent pas dans les div class="floatleft", et avec des p class="floatleft" c'est pareil mais ça ne fonctionne ni dans IE ni FF

.floatleft
{
	width: 100% ;
	height: auto;
	border: solid 1px #000 ;
	text-align: left ;
	margin: 10px 0px;
	padding:0px;
}




form.css fieldset
{
	width: 340px;
	float: left ;
	margin: 0;
	padding: 0;
	border: none;	
}


		<div id="content">
		<form name="sondage" method="post" action="" class="css">
			<div class="floatleft">
				<fieldset>
					<legend>PERSONNE DECLARANTE</legend>
					<label for="nom">Nom :</label>
					<input type="text" name="nom" id="nom" />
					<br />
					<label for="prenom">Prénom :</label>
					<input type="text" name="prenom" id="prenom" />
					<br />
					<label for="fonction">Fonction :</label>
					<input type="text" name="fonction" id="fonction" />
					<br />
					<label for="centre">Centre d'affectation :</label>
					<input type="text" name="centre" id="centre" />
					<br />
					<label for="telephone">Téléphone :</label>
					<input type="text" name="telephone" id="telephone" />
				</fieldset>
				<fieldset>
					<legend>EVENEMENT	</legend>
					<label for="date">Date :</label>
					<input type="text" name="date" id="date" />
					<br />
					<label for="heure">Heure :</label>
					<input type="text" name="heure" id="heure" />
					<br />
					<label for="lieu">Lieu:</label>
					<input type="text" name="lieu" id="lieu" />
				</fieldset>
			</div>
			<div class="floatleft">
				<fieldset>
					<legend>INFORMATIQUE</legend>
					<label for="materiel">Matériel :</label>
					<input type="checkbox" name="materiel" id="materiel" />
					<br />
					<label for="logiciels">Logiciels :</label>
					<input type="checkbox" name="logiciels" id="logiciels" />
					<br />
					<label for="connexion">Connexion :</label>
					<input type="checkbox" name="connexion" id="connexion" />
					<br />
					<label for="formation">Formation :</label>
					<input type="checkbox" name="formation" id="formation" />
					<br />
					<label for="telephone">Téléphone :</label>
					<input type="checkbox" name="telephone" id="telephone" />
					<br />
					<label for="autres">Autres :</label>
					<input type="checkbox" name="autres" id="autres" />
				</fieldset>
				<fieldset>
					<legend>MATERIEL</legend>
					<label for="pannes">Pannes :</label>
					<input type="checkbox" name="pannes" id="pannes" />
					<br />
					<label for="maintenance">Maintenance :</label>
					<input type="checkbox" name="maintenance" id="maintenance" />
					<br />
					<label for="approvisionnement">Approvisionnement:</label>
					<input type="checkbox" name="approvisionnement" id="approvisionnement" />
					<br />
					<label for="pret">Prêt :</label>
					<input type="checkbox" name="pret" id="pret" />
					<br />
					<label for="notice">Notice :</label>
					<input type="checkbox" name="notice" id="notice" />
					<br />
					<label for="formation2">Formation :</label>
					<input type="checkbox" name="formation2" id="formation2" />
					<br />
					<label for="autres2">Autres :</label>
					<input type="checkbox" name="autres2" id="autres2" />
				</fieldset>
			</div>
		</form>
		</div>


voici l'affichage dans IE (celui que je souhaite obtenir):
upload/8488-IE.png


et voici sous firefox...ce que je ne veux pas du tout...:
upload/8488-FF.png
Modifié par r4z (15 Sep 2006 - 12:03)
en fait pas vraiment parce qu'avec les plusieurs float que j'ai, ça déconne dans IE mais pas dans mozilla Smiley decu
mon html:

<body>
<form name="sondage" method="post" action="" class="css">
	<div id="contenu">
		<div id="contenu1"></div>
	  <div id="contenu2">
			<p id="colonne1">
				<fieldset>
					<legend>PERSONNE DECLARANTE</legend>
					<label for="nom">Nom :</label>
					<input type="text" name="nom" id="nom" />
					<br />
					<label for="prenom">Prénom :</label>
					<input type="text" name="prenom" id="prenom" />
					<br />
					<label for="fonction">Fonction :</label>
					<input type="text" name="fonction" id="fonction" />
					<br />
					<label for="centre">Centre d'affectation :</label>
					<input type="text" name="centre" id="centre" />
					<br />
					<label for="telephone">Téléphone :</label>
					<input type="text" name="telephone" id="telephone" />
				</fieldset>
			</p>
			<p id="colonne2">
				<fieldset>
					<legend>EVENEMENT</legend>
					<label for="nom">Username:</label>
					<input type="text" name="nom" id="nom" />
					<br />
					<label for="prenom">Prénom:</label>
					<input type="text" name="prenom" id="prenom" />
					<br />
					<label for="addresse">Adresse:</label>
					<input type="text" name="adresse" id="adresse" />
				</fieldset>
			</p>
		</div>
		<div id="contenu2">	
			<div id="menu">
				<ul>
					<li id="menu1"><a id="menu1" title="Accueil" accesskey="1" href="#"></a></li>
				</ul>			
			</div>
		</div>
		<div id="contenu3"></div>
	</div>
</form>
</body>


et mon nouveau CSS. Parfait dans mozilla...complètement décallé dans IE:
/* BODY */
body
{
	margin: 0px 0 ;
	padding: 0 ;
	text-align: left ;
	background: #A9D4FF ;
}
/* BODY */


/* CORPS*/
div#contenu
{
	width: 708px ;
	margin: 0 auto ;
	text-align: left ;
}
/* CORPS*/

/* ENTETE */
div#contenu1
{
	height: 98px;
	margin: 0 auto ;
	background: url(images/haut.png) no-repeat left top;
}
/* ENTETE */

/*MILIEU*/
div#contenu2
{
	height:400px
	margin: 0 auto ;
	padding: 2px 10px 2px 10px;/* top right bottom left */
	overflow:hidden;
	background: url(images/milieu.png) repeat-y;
}
p#colonne1
{
	float: left;
	clear:left;
	width: 49%;
	padding: 2px 2px 2px 2px;/* top right bottom left */
}
p#colonne2
{
	float: right;
	clear:right;
	width: 49%;
	padding: 2px 2px 2px 2px;/* top right bottom left */
}
div#menu{
	float:right;
}
/*MILIEU*/

/* BAS DE PAGE*/
div#contenu3
{
	height: 10px;
	margin: 0 auto ;
	background: url(images/bas.png) no-repeat left top;

}
/* BAS DE PAGE*/



/* BOUTON SUIVANT */
ul, li {
	list-style-type: none;
	margin:0;
	padding:0;
}
ul {
	margin: 0px 0 ;
	padding: 0 ;
	background: transparent url(images/suivant.png) top left no-repeat;
	height: 15px;
	width: 60px;
	text-align: center;
}
li {float: left;}

li#menu1 a {
	display: block;
	height: 15px;
	width: 60px;
}

li a:hover {
	background: transparent url(images/suivant.png) top left no-repeat;
}

a#menu1:hover {
	background-position: 0% -15px;
}
/* BOUTON SUIVANT */


form.css fieldset
{
	padding: 1em;
	border:none;

}
form.css label
{
	display: inline;
	float: left;
	width: 140px;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color:#09C;
} 
form.css legend
{
	margin: 0;
	text-align: left;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color:#09C;
	font-weight:bold;
}

form.css input
{
	font-weight:bold;
	font-size: 10px;
	color:#FC0;
	background-color:#FFF;
  	border: 1px solid #FC0;
	text-align:left;
}


i need help svp j'ai passé toute l'après midi dessus Smiley decu

j'aimerais juste pouvoir étaler un formulaire avec par exemple 4 ou 6 fieldlist répartis sur 2 colonnes, mais je ne vois pas comment pour que ça fonctionnen sous IE. J'ai essayé (dans mon CSS) de mettre des span et div à la place des p (p#colonne1 et p#colonne2) mais c'est encore pire, car IE n'affiche même plus l'image de fond du div parents...

merci d'avance
Salut,

margin: 0 auto ;
qu'est ce que c'est que ça ? 0 quoi auto pour quoi ?
background, c'est soit background-color, soit background-image, en principe.
En tout cas, ou tu mets margin ou padding : 0px tout court ou 0px 0px 0px 0px (T R B L) ou margin-top : 0px;
Peut-être Mozilla s'y retrouve mais pas IE apparemment.
Le css de microsoft :
http://msdn.microsoft.com/workshop/author/css/reference/css_ref_attributes_entry.asp?frame=true
Modifié par Deny (13 Sep 2006 - 13:38)
Administrateur
Deny a écrit :
Salut,
Vous êtes flemmards ou vous avez peur que le chargement soit trop long à toujours mettre un petit morceau de la prog.

Hello,

Non, non, aucun rapport avec la flemme, mais l'utilisation des propriétés raccourcies a un double avantage : celui de raccourcir le code et d'éviter de lourdes répétitions.
A force on s'y fait vite et cela devient instinctif et pratique : on évite les multiples lignes de margin-top, margin-bottom, padding-right, etc. qui complexifient la lecture.

Deny a écrit :
margin: 0 auto ;
qu'est ce que c'est que ça ? 0 quoi auto pour quoi

Se référer aux spécifications très rigoureuses sur ce sujet (ou à un certain livre CSS que je ne citerai pas Smiley cligne )

margin: 0 auto ; et la réduction de margin: 0 auto 0 auto;
Les 4 valeurs se lisent toujours dans le sens des aiguilles d'une montre en commençant par le haut, donc cela équivaut à :
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

W3C a écrit :
La propriété raccourcie 'margin' sert à spécifier de manière groupée les propriétés 'margin-top', 'margin-right', 'margin-bottom' et 'margin-left' dans la feuille de style.

Quand il n'y a qu'une seule valeur spécifiée, celle-ci s'applique à tous les côtés. S'il y en a deux, alors la première valeur s'applique pour la marge du haut et celle du bas, et la seconde pour la marge droite et celle de gauche. Avec trois valeurs, la marge du haut reçoit la première valeur, les marges gauche et droite la deuxième et la marge du bas la troisième. Pour quatre valeurs, celles-ci s'appliquent respectivement aux marges du haut, de droite, du bas et de gauche.


Deny a écrit :
background, c'est soit background-color, soit background-image, en principe.
Non pas du tout.
background est une propriété raccourcie définie par les spécifications et qui englobe les propriétés background-color, background-image, background-repeat, background-attachmnent et background-position. Il est possible de ne renseigner que l'une ou l'autre de ces propriétés.

W3C a écrit :
La propriété 'background' est une propriété raccourcie qui sert à regrouper les propriétés individuelles 'background-color', 'background-image', 'background-repeat', 'background-attachment' et 'background-position' dans la feuille de style.

La propriété 'background' distribue d'abord à toutes les propriétés individuelles d'arrière-plan à leur valeur initiale, puis leur applique les valeurs explicites de la déclaration.

Modifié par Raphael (13 Sep 2006 - 13:45)
Mea culpa.
J'ai corrigé ça, une partie, comme tu postais ton message.
Je ne savais pas pour le background, le auto partiel non plus d'ailleurs (oublié ?)
Modifié par Deny (13 Sep 2006 - 13:46)
en effet j'ai lu quelques docs, et j'ai vu qu'on pouvais considérablement réduire le nombre de lignes des éléments de styles donc je me suis dis pourquoi ne pas utiliser ça.

Par contre j'ai réussi à mettre 2 fieldset d'un meme formulaire dans 2 colonnes distinctes (à l'aide de span):

span#colonne1
{
	float: left;
	clear:left;
	width: 49%;
	padding: 2px;
}
span#colonne2
{
	float: right;
	clear:right;
	width: 49%;
	padding: 2px 2px 2px 2px;/* top right bottom left */
}


par contre il est assez difficile de caler le texte des labels bien en face des champs du formulaire, surtout les checkbox. Pour les champs textes normaux (input text), j'ai un peu cherché et j'ai bidouillé le style label :

form.css label
{
	display: inline;
	text-align: right;
	float: left;
	width: 150px;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color:#09C;
	vertical-align:bottom;
	line-height:1.5em;
}


mais ça ne change rien pour le reste (checkbox etc...qui par ailleurs ne prennent pas non plus les couleurs et autres bordures de la même manière que les input texte )
Modifié par r4z (13 Sep 2006 - 14:08)
C'est juste le bouton de retour à l'accueil que tu veux aligner ?
Et aligner sur quoi ?
Tes p de colonne1 et 2 sont bien où tu veux qu'elles soient ?
ce sont des span, et oui j'ai enfin réussi a les faire apparaître en colonne et ce sous momo et sous IE.

Mon soucis d'aligement ce sont les labels qui sont en face des inputs du formulaire...j'essaie de les mettre bien à la même hauteur, là c'est à peut prêt bon avec mes paramètres de hauteur de ligne j'ai réussi à les ajuster à peut prêt.

merci en tout cas

un autre souci en fait c'est ça:

div#contenu2
{
	height:400px;
	margin: 0px;
	padding: 2px 10px;
	overflow:hidden;
	background: url(images/milieu.png) repeat-y;
}


si je ne spécifie pas une hauteur de 400px à mon contenu, alors le fond n'apparaît plus....serait-ce à cause des floats de mes span?
Modifié par r4z (13 Sep 2006 - 14:48)
Oui, à cause du float: left.
Essaie d'ajouter des border à tes éléments pour bien voir où ils sont et ce qu'ils couvrent comme place.
Et puis tu peux les positionner de différentes façons, en float left ou right, dans des div, en position absolute et ou relative; et tu as aussi le z-index, modifiable, pour mettre au-dessus ou en dessous de tes input.
Deny a écrit :
Oui, à cause du float: left.
Essaie d'ajouter des border à tes éléments pour bien voir où ils sont et ce qu'ils couvrent comme place.
Et puis tu peux les positionner de différentes façons, en float left ou right, dans des div, en position absolute et ou relative; et tu as aussi le z-index, modifiable, pour mettre au-dessus ou en dessous de tes input.


je me doutais que ça venait des float, mais ya qu'avec ça que j'ai réussi a faire 2 colonnes.

sinon j'ai essayé de mettre mes 2 float (le right et le left) dans un div pour chaque ligne comme dans un tableau mais ça réagit pas du tout comme un tableau c la misère. Donc je ne sais pas trop quoi faire...
finalement j'ai trouvé une solution ça à l'air de fonctionner:

j'ai rajouté un conteneur dans mon contenu du milieu:

div#conteneur
{
	display: table;
	display: table-cell;
	height: 100% 
}


je vais tester un peu plus
erratum...dans IE c'est cool, mais dans FF ça part complètement en vrille lol

edit: en enlevant le "display: table-cell;" ça passe dans IE et FF Smiley smile par contre en grossissant la police du navigateur ça déconne...

edit: en fait ça déconne toujours dans FF je remet les sources de mon CSS:


/* BODY */
body
{
	margin: 0px auto;
	padding: 0px;
	text-align: left ;
	background: #A9D4FF ;
}
/* BODY */


/* CORPS*/
div#contenu
{
	width: 708px ;
	margin: 0px auto;
	text-align: left ;
}
/* CORPS*/

/* ENTETE */
div#contenu1
{
	height: 98px;
	margin: 0px;
	background: url(images/haut.png) no-repeat left top;
}
/* ENTETE */

/*MILIEU*/
div#contenu2
{
	margin: 0px;
	padding: 2px 10px;
	overflow:hidden;
	background: url(images/milieu.png) repeat-y;
}

div#conteneur
{
	display: table;
	height: 100%;
	padding: 10px;
}
span#colonne1
{
	float: left;
	clear:left;
	width: 49%;
	padding: 2px;
	display: table-cell;
	height: 100%;
}
span#colonne2
{
	float: right;
	clear:right;
	width: 49%;
	padding: 2px;
	display: table-cell;
	height: 100%;
}

div#conteneurbas
{
	height:15px;
	margin: 0 auto ;
	padding: 0px;
	overflow:hidden;
}
div#menu{
	float:right;
}
/*MILIEU*/

/* BAS DE PAGE*/
div#contenu3
{
	clear:both;
	height: 10px;
	margin: 0px ;
	background: url(images/bas.png) no-repeat left top;

}
/* BAS DE PAGE*/



/* BOUTON SUIVANT */
ul, li {
	list-style-type: none;
	margin:0px;
	padding:0px;
	height::15px;
}
ul {
	margin: 0px;
	padding: 0px;
	background: transparent url(images/suivant.png) top left no-repeat;
	height: 15px;
	width: 60px;
	text-align: center;
}
li {float: left;}

li#menu1 a {
	display: block;
	height: 15px;
	width: 60px;
}

li a:hover {
	background: transparent url(images/suivant.png) top left no-repeat;
}

a#menu1:hover {
	background-position: 0% -15px;
}
/* BOUTON SUIVANT */


form.css fieldset
{
	padding: 0px;
	border: none;
}
form.css label
{
	display: inline;
	text-align: right;
	float: left;
	width: 150px;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color:#09C;
	vertical-align:bottom;
	line-height:1.5em;
} 
form.css legend
{
	margin-bottom: 10px;
	text-align: left;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color:#09C;
	font-weight:bold;
}

form.css input
{
	font-weight:bold;
	font-size: 12px;
	color:#666;
	background-color:#FFF;
  	border: 1px solid #CCC;
	text-align:left;
}


dans le HTML ça fait comme ça:

<body>
<form name="sondage" method="post" action="" class="css">
	<div id="contenu">
		<div id="contenu1"></div>
		<div id="contenu2">
			<div id="conteneur">	
				<span id="colonne1">
					<fieldset>
						<legend>FORM1</legend>
						tous mes labels et inputs qui vont avec
					</fieldset>
				</span>
				<span id="colonne2">
					<fieldset>
						<legend>FORM2</legend>
						tous mes labels et inputs qui vont avec
					</fieldset>
				</span>
			</div>
			<div id="conteneur">	
				<span id="colonne1">
					<fieldset>
						<legend>FORM3</legend>
						tous mes labels et checkbox qui vont avec
					</fieldset>
				</span>
				<span id="colonne2">
					<fieldset>
						<legend>FORM4</legend>
						tous mes labels et checkbox qui vont avec
					</fieldset>
				</span>
			</div>
			<div id="conteneurbas">	
				<div id="menu">
					<ul>
						<li id="menu1"><a id="menu1" title="Accueil" accesskey="1" href="#"></a></li>
					</ul>			
				</div>
			</div>
		</div>
		<div id="contenu3"></div>
	</div>
</form>
</body>


si quelqu'un pouvais m'orienter et m'aider à épurer ça serait sympa

merci d'avance
Modifié par r4z (13 Sep 2006 - 16:36)
Alors épurons !
(Note : je n'ai pas suivi ce sujet depuis le début, la quantité de code et de questions/digressions m'ayant un peu découragé...)

	<div id="contenu">
		<div id="contenu1"></div>
		<div id="contenu2">
			<div id="conteneur">
				<span id="colonne1">
					<fieldset>
						<legend>FORM1</legend>
						tous mes labels et inputs qui vont avec
					</fieldset>
				</span>
				<span id="colonne2">
					<fieldset>
						<legend>FORM2</legend>
						tous mes labels et inputs qui vont avec
					</fieldset>
				</span>
			</div>
			<div id="conteneur">
				<span id="colonne1">
					<fieldset>
						<legend>FORM3</legend>
						tous mes labels et checkbox qui vont avec
					</fieldset>
				</span>
				<span id="colonne2">
					<fieldset>
						<legend>FORM4</legend>
						tous mes labels et checkbox qui vont avec
					</fieldset>
				</span>
			</div>
			<div id="conteneurbas">
				<div id="menu">
					<ul>
						<li id="menu1"><a id="menu1" title="Accueil" accesskey="1" href="#"></a></li>
					</ul>
				</div>
			</div>
		</div>
		<div id="contenu3"></div>
	</div>

Pour commencer, tu as pas mal de div imbriquées. Sont-elles toutes vraiment utiles ? Je te laisse voir ce que tu peux épurer (si possible) de ce côté là.

Ensuite, tu as deux div vides (identifiants "contenu1" et "contenu3"). À quoi servent-elles ? Dans l'idéal, on évite d'utiliser des éléments vides comme supports de mise en page.

Pour finir, quelque chose de plus concret : tu utilises certains identifiants deux fois ! Or, un identifiant est censé être unique !
Ici, tu as les identifiants "conteneur", "colonne1" et "colonne2" qui sont tous en double. Pour information, les identifiants identifient un élément unique, tandis que pour plusieurs éléments qui partagent une même mise en forme on utilisera des classes.
Alsacréations : Quelle est la différence entre une classe et un id ?
merci, je vais essayer de reprendre tout à 0 je crois

pour les identifiants j'avais oublié Smiley confused

sinon les id contenu1 et contenu3 servent à afficher le header et le footer (qui sont 2 images)
r4z a écrit :
sinon les id contenu1 et contenu3 servent à afficher le header et le footer (qui sont 2 images)

Si ce sont deux images décoratives, ça ne pose pas de problème.
Par contre, si ces images comportent des informations (texte en image), alors cela signifie qu'une information sera accessible à certains utilisateurs et pas à d'autre. En particulier, les utilisateurs de navigateurs texte et de lecteurs d'écran n'y auront pas accès.
c'est en interne donc pas de ce type de navigateur.

J'ai mis en classes, mais souci pour épuration, ça fait pas mal déconner...parfois dans IE, parfois dans FF, parfois les 2, mais jamais les 2 sont niquels en même temps....
voici en gros ce que j'aimerais obtenir


sachant que le nombre de fieldset n'est pas forcément 4, mais qu'ils soient toujours 2 par ligne, bien alignés en colonnes...et ça soit ça marche dans IE, soit dans FF mais pas les 2 Smiley decu upload/8488-apercu.png
Modifié par r4z (15 Sep 2006 - 11:25)
Pages :
Sujet clos
Aller à