28173 sujets

CSS et mise en forme, CSS3

Faire 2 colonnes de taille identique en CSS[Résolu]

Bonjour,

Je débute totalement en CSS.

J'ai un formulaire que je veux positionner sur 2 colonnes de largeur identique. J'ai donc fait ceci :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
div.table { display:table; border-collapse:collapse; }
div.tr { display:table-row; }
div.td { display:table-cell; border:thin ; padding:5px; vertical-align:top;}
div.td_right { display:table-cell; border:thin ; padding:5px; vertical-align:top; text-align:right; width:30%}/*** Met le texte cadré à droite ***/
</style>
<body>
<div class="table">
	<div class="tr">
		<div class="td">
			<div class="table">
				<fieldset id="formulaire">
				<legend class="titre_cadre">Saisie</legend>
					<div class="tr">
						<div class="td_right" title="Veuillez saisir le N° de Sécurité Sociale">
							<b>*N° :</b>
						</div>
						<div class="td">
							....
						</div>
					</div>
					<div class="tr">
						<div class="td_right" title="Veuillez saisir une date de début de validité">
							Valide du :
						</div>
						<div class="td">
							....
						</div>
					</div>
					<div class="tr">
						<div class="td_right" title="Veuillez saisir une date de fin de validité">
							Au :
						</div>
						<div class="td">
							....
						</div>
					</div>
				</fieldset>
				<fieldset id="formulaire">
				<legend class="titre_cadre">Centre de Sécurité Sociale</legend>
					<div class="tr">
						<div class="td_right" title="Veuillez choisir un type de tiers dans la liste pour le centre de Sécurité Sociale">
							<b>*Type de tiers :</b>
						</div>
						<div class="td">
							...
						</div>
					</div>
					<div class="tr">
						<div class="td_right" title="Veuillez choisir un tiers dans la liste">
							<b>*Centre :</b>
						</div>
						<div class="td">
							...
							</select>
						</div>
					</div>
				</fieldset>
			</div>
		</div>
		<div class="td">
			<div class="table">
				<fieldset id="formulaire">
				<legend class="titre_cadre">Informations Complémentaires</legend>
					<div class="tr">
						<div class="td_right" title="Veuillez saisir le N° de code AMELI">
							Code AMELI :
						</div>
						<div class="td">
							...
						</div>
					</div>
					<div class="tr">
						<div class="td_right" title="Adresse privée pour ce majeur ?">
							Liaison NOEMIE :
						</div>
						<div class="td">
							...		
						</div>
					</div>
				</fieldset>
			</div>
		</div>		
	</div>
</div>
</body>


Comment faire pour que chaque colonne utilise 50 % de la largeur du formulaire.

Merci d'avance
Modifié par lodan (03 Nov 2006 - 11:45)
Bonjour.

Même en matière de formulaire il est interessant de rester sémantique.



<form name="formulaire">

	<fieldset>
		<legend>Saisie</legend>
		<dl>
			<dt>*N° :</dt>
				<dd><input type="text" name="numero" value ="..."/></dd>
			<dt>Valide du :</dt>
				<dd><input type="text" name="" value ="..."/></dd>
			<dt>Au</dt>
				<dd><input type="text" name="" value ="..."/></dd>
		</dl>
	</fieldset>

	<fieldset>
		<legend>Informations Complémentaires</legend>
		<dl>
			<dt>Code AMELI :</dt>
				<dd><input type="text" name="" value ="..."/></dd>
			<dt>Liaison NOEMIE</dt>
				<dd><input type="text" name="" value ="..."/></dd>
			<dt> </dt>
				<dd><input type="text" name="" value ="..."/></dd>
		</dl>

	</fieldset>

	<fieldset>
		<legend>Centre de Sécurité Sociale</legend>
		<dl>
			<dt>*Type de tiers : </dt>
				<dd><input type="text" name="" value ="..."/></dd>
			<dt> </dt>
				<dd><input type="text" name="" value ="..."/></dd>
			<dt>*Centre</dt>
				<dd><input type="text" name="" value ="..."/></dd>
		</dl>
	</fieldset>
	
</form>


De cette mannière, le formulaire sera plus facile à maintenir. Le code est lisible et réduit au mininimum.

Ensuite, voilà une proposition de feuille de style :


form[name="formulaire"] {width : 90%; margin-left:auto; margin-right:auto}

form[name="formulaire"] fieldset {width:45%;float:left;height:9em}

form[name="formulaire"] dt {
	display:block;
	float:left;
	width:45%;
	text-align:right;
	padding-right:1em;

}

form[name="formulaire"] dd {display:block}

form[name="formulaire"] dt,form[name="formulaire"] dd{margin-bottom:0.5em}

Elle est loin d'être parfaite, mais elle donne une idée... En tout cas, elle sera contrôlable de toute les mannières possibles.
Tout d'abord Merci.

La simplification me plaît beaucoup, je ne connaissai pas DL et DT, j'ai découvert aussi DD.

Bon, j'ai testé cela fonctionne, j'ai rajouté dans le CSS ceci :

body { 
background: #e6e6e8 url("http://127.0.0.1/gestelle/images/fond.gif") repeat-x top left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000000;
}

#titreForm { 
font:bold 1.1em verdana, arial, hevetica, sans-serif; 
color:#000; 
background:#e6e6e8;
padding:0.5em; }

#corpForm {	/*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
	border: 1px solid black;
	color: black;
	background: #efefef;
	margin: 0;
	padding: 1em;
}

legend.titre_cadre {font: bold 1.1em verdana, arial, hevetica, sans-serif; font-style: italic; color: #000; }


et dans le body, cela donne ceci :

<div id="titreForm">La sécurité Sociale</div>
<div id="corpForm">
<form name="formulaire">
	<fieldset>
	<legend class="titre_cadre">Saisie</legend>
	<dl>
		<dt>*N° :</dt>
				<dd><input type="text" name="numero" value ="..."/></dd>
			<dt>Valide du :</dt>
				<dd><input type="text" name="" value ="..."/></dd>
			<dt>Au</dt>
				<dd><input type="text" name="" value ="..."/></dd>
		</dl>
	</fieldset>
	<fieldset>
		<legend class="titre_cadre">Informations Complémentaires</legend>
		<dl>
			<dt>Code AMELI :</dt>
				<dd><input type="text" name="" value ="..."/></dd>
			<dt>Liaison NOEMIE</dt>
				<dd><input type="text" name="" value ="..."/></dd>
			<dt> </dt>
				<dd><input type="text" name="" value ="..."/></dd>
		</dl>
	</fieldset>
	<fieldset>
		<legend class="titre_cadre">Centre de Sécurité Sociale</legend>
		<dl>
			<dt>*Type de tiers : </dt>
				<dd><input type="text" name="" value ="..."/></dd>
			<dt> </dt>
				<dd><input type="text" name="" value ="..."/></dd>
			<dt>*Centre</dt>
				<dd><input type="text" name="" value ="..."/></dd>
		</dl>
	</fieldset>
</form>
</div>


Ai-je gardé l'esprit de ce que tu as fait ? ça c'est pour savoir si j'ai bien compris.

Ensuite la couleur d'arrière plan de corpForm n'apparaît pas, pourquoi ?
Même si le div contenant le titre est stylé par ailleur, c'est un titre. Donc, remplacer div par h1 : (ou h2, h3...)
<h1 id="titreForm">La sécurité Sociale</h1>

ça ne change rien à l'affichage, mais l'intérêt apparaît quand on affiche le formulaire sans feuille de style...

Les background qui ne passe pas (sous ie) passent sous firefox. Pour mettre les deux navigateurs d'accord, on doit écrire :
background-color : #...


Usage des classes : 
<legend class="titre_cadre">Saisie</legend>

La création d'une class "titre_cadre" se justifie si le style associé est réutilisé ailleurs dans le code html du site. Sinon, comme présenté précédemment, les sélecteurs cascadé, (#corpForm legend) permettent d'accéder aux noeuds visés. Ceci allège html, et rend la feuille de style plus lisible, aussi..

Vous semblez avoir bien compris l'usage des listes de définitions.

En passant... cette structure est valide :


<dl>
    <dt>terme</dt>
          <dd>definition 1</dd>
           <dd>définition 2</dd>

    <dt 
       ....
</dl>


... ce qui ouvre bien des horizons.
Modifié par GeorgesM (02 Nov 2006 - 17:54)
titreForm contient en réalité une image d'arrière plan, c'est pourquoi je l'avais mis en CSS et que ja n'avais pas retenu "hx".

div.titreForm { 
font:bold 1.1em verdana, arial, hevetica, sans-serif; 
color:#000; 
background:#e6e6e8 url("../images/t_titre.gif"); 
padding:0.5em; }
}


Je travail sous firefox, pour être compatible avec IE, je fais comme ceci :

div.corpForm {	/*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
	background-image: url("../images/fond_form.gif");
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: top left;
	background-color : #efefef;
	font-weight: bold; /*** Pour améliorer la lisibilité des titres ***/
	text-align: left;
	border: 1px solid black;
	color: black;
	margin: 0;
	padding: 1em;
}


Pour autant je n'ai rien qui s'affiche. Que peut-il se passer à ce niveau ?

La class "titre_cadre" est utilisé sur tout les <legend>, donc c'est intéressant dans ce cas là de le garder.
corpForm est l'identificateur du div.
L'adressage css doit se faire avec #

div#corpForm {	/*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
.
.
}


ou plus simplement
#corpForm {...}


Bien entendu, id si le noeud n'est présent qu'une fois, class dans les autres cas.
Bonjour,

Je me permets une intervention rageuse...

Ceci :
<dl>

			<dt>Code AMELI :</dt>

				<dd><input type="text" name="" value ="..."/></dd>

			<dt>Liaison NOEMIE</dt>

				<dd><input type="text" name="" value ="..."/></dd>

			<dt> </dt>

				<dd><input type="text" name="" value ="..."/></dd>

		</dl>


Est un non sens du point de vue sémantique et surtout totalement improvisé par rapport à la specification Html pour les formulaire.

Un contrôle de formulaire doit être identifié par un label lié par la relation for=id :


 <label for="nom">Nom</label>
 <input type="text" id="nom" name="nom" />


C'est propre, simple et facile.

Jean-pierre
Je veux bien, je ne m'y connais pas assez, je débute et c'est mon premier site que je crée.

C'est un Intranet avec beaucoup de formulaire de saisie, donc je veux faire pour le mieux.

Mais alors du coup, le css ne fonctionne pas du tout
j'ai change comme cela :

form[name="formulaire"] label {
	display:block;
	float:left;
	width:20%;
	text-align:right;
	padding-right:1em;
}
form[name="formulaire"] input {display:block}
form[name="formulaire"] label,form[name="formulaire"] input{margin-bottom:0.5em}


ça doit pas être cela.

Merci jpv de semer le doute
Je n'y arrive pas non plus. C'est cette balise label qui est retord. C'est à cause d'elle que tout le monde utilise des tables pour les formulaires.
De plus, ça serait dommage de mettre des <br /> partout...

Pour l'instant, je n'arrive pas du tout à la faire obeir... ni width, ni float, ni rien.

Et puis, moi, ça me satisfait, dt et dd :

terme (dt): ce qu'on demande
définition (dd): ce qui est saisit. La saisie définit le terme.

a écrit :
Est un non sens du point de vue sémantique

Pour que ce soit un non-sens, il faudrait que ça en soit dépourvu.
Modifié par GeorgesM (02 Nov 2006 - 18:58)
J'ai fait ça 

form[name="formulaire"] label {
	display:block;
	float:left;
	width:20%;
	text-align:right;
	padding-right:1em;
}
form[name="formulaire"] label,form[name="formulaire"] input{margin-bottom:0.5em}

et ça à l'air de fonctionner
Salut

Les listes de définition ne me paraissent pas particulièrement indiquées non plus ... pourquoi ne pas utiliser une structure plus neutre au niveau sémantique, dans la mesure où on n'a besoin que d'un conteneur pour positionner correctement les champs et leurs labels ?

Par exemple : 
<p><label for="input1">Label 1</label><input id="input1" type="text" name="input1" value="" /></p>
Avec en feuille de style :

p {
   clear: both;
}
label {
   float: left;
   }
input {
   margin-left: 50%;
   }
Sopo a écrit :
Salut

Les listes de définition ne me paraissent pas particulièrement indiquées non plus ... pourquoi ne pas utiliser une structure plus neutre au niveau sémantique, dans la mesure où on n'a besoin que d'un conteneur pour positionner correctement les champs et leurs labels ?

Par exemple : 
<p><label for="input1">Label 1</label><input id="input1" type="text" name="input1" value="" /></p>
Avec en feuille de style :

p {
   clear: both;
}
label {
   float: left;
   }
input {
   margin-left: 50%;
   }



ça rejoint le coup de gueule de JPV.

Je suis d'accord pour opter pour cette méthode :

<p><label for="input1">Label 1</label><input id="input1" type="text" name="input1" value="" /></p>


Maintenant quel est le meilleur CSS, celui-ci :

p {

   clear: both;

}

label {

   float: left;

   }

input {

   margin-left: 50%;

   }


ou celui-ci 

form[name="formulaire"] label {

	display:block;

	float:left;

	width:20%;

	text-align:right;

	padding-right:1em;

}

form[name="formulaire"] label,form[name="formulaire"] input{margin-bottom:0.5em}


La est la question résiduelle
ça c'est facile Smiley smile

Le meilleur, c'est celui qui donne le résultat escompté Smiley langue

Par contre, tu peux supprimer le display: block dans ta CSS, il est automatiquement appliqué quand tu utilises float.

Je ne saisis pas bien ce que veux dire form[ name="formulaire"], mais j'imagine que c'est seulement l'id ou la classe du formulaire.

A toi de jouer un peu sur les propriétés et de comparer les deux méthodes. Personnellement, je trouve que ma méthode est logique ... mais évidemment, c'est la mienne Smiley lol
bonjour,

Je ne saisis pas bien ce que veux dire form[ name="formulaire"]


Cette syntaxe correspond aux sélecteurs d'attribut : W3C - Spécification CSS2 - 5.8 Les sélecteurs d'attribut.

Les sélecteurs d'id (#) et de classe (.) n'en étant qu'une interprétation raccourcie (#truc évitant simplement d'écrire quelquechose comme div[id=truc])

Au sujet des listes de définitions :

Je répète que dans le cas d'un formulaire les listes de définition sont inutiles et innapropriées, comme à chaque fois d'ailleurs que la spécification html apporte des éléments qui sont fait pour ça.

Enfin pour résoudre le passage à la ligne des enchainements de label en float left et des contrôles, le retour chariot <br /> est également tout à fait indiqué car c'est très exactement sa fonction...

Exemple simplissime :


<html>
<head>
<title>Untitled</title>
<style type="text/css">
	label{
  	float:left;
    width:8em;
    padding-right:0.3em;
    text-align:right;
  }
</style>	
</head>
<body>
<form>
	<fieldset>
  	<legend>identité</legend>
    <label for="nom">Nom</label><input type="text" id="nom" name="nom" /><br />
    <label for="prenom">Prenom</label><input type="text" id="prenom" name="prenom" /><br />
  </fieldset>
</form>
</body>
</html>


Qui suffit très largement...

Jean-pierre
bonjour,

a écrit :
<br /> c'est mieux que <p>...</p> ?


Ni mieux, ni moins bien, c'est comme tu veux... Smiley smile

Jean-pierre
jpv a écrit :
Bonjour,

Un petit [résolu] serait du plus bel effet...

Jean-pierre


J'aimme beaucoup les effets, mais je clique où pour mettre résolu ?
Sujet clos
Aller à