28173 sujets

CSS et mise en forme, CSS3

[Résolu]Changement de font altère la présentation

Bonjour,

J'aimerai savoir pourquoi quand je change la famille de la police, les éléments qui l'utilisent ne sont plus alignés ?

Pour vous le montrer, je vous copie le code du même fichier, l'un avec la police par défaut où tout est en ordre, l'autre avec la nouvelle police qui altère la présentation du site. Si quelqu'un arrive à voir l'erreur ça serait sympa. Merci d'avance.

D'abord le code qui marche.

<!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" xml:lang="fr" lang="fr">
  <head>
<style>
dt,dd{ 
 float:left;
 margin:0;
 padding: 0;
 width:30em;
 }

dt { 
 clear: left;
 width: 2em;
 text-align: right;
}

ul{ 
 list-style-type: none;
 padding:0px;
 }

dl{ 
width: 64em;
 }

li {
padding:0;
margin:0;
}

select,option{ 
 border:1px solid #666666;
 background-color:#fafdff;
/* ICI SE TROUVE LA LIGNE QUI FAIT PLANTER 
  Je la met en commentaire.
*/ 
/* font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
*/
 color: #666666;
 width:20em;
}

label {
  width:8em;
  display:block;
  float:left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #303188;
  margin: 0px;
  margin-top: 10px !important;
  padding-bottom: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-left: 8px;
  text-align: left;
  background-image: url(../images/grouek/p_fleche.gif);
  background-repeat: no-repeat;
  background-position: 0px 3px;
}

#choixListeFonctions {  
  clear: none;
}

#listeFonctions{ 
  float:right;                 
}

.cachezMoi{ 
  display:None;
 }


</style>
<script type="text/javascript">
/* Ceci ajoute une méthode effacer aux objets array  */
Array.prototype.retirer = function (valeur){
    position = this.avoirPosition(valeur);
    if (position != -1){
	this.splice(position,1);
    }
}
/* Ceci ajoute une méthode avoirPosition aux objets array */
Array.prototype.avoirPosition = function (valeur){
    for(i=0;i<this.length;i++){
	if (this.slice(i,i+1)[0] == valeur) {
	    return i;
	}
    }
    return -1;
}

var numeroSelect=1;
var tableau = new Array("",
			"M. le Directeur",
			"M. le Directeur de la Production",
			"M. le Directeur des Ressources Humaines",
			"M. le Directeur Comercial","M. le Directeur Informatique",
			"M. le Directeur des Achats","M. le Directeur Financier",
			"M. le Directeur Marketing et Communication",
			"M. le Directeur Technique ",
			"M. le Directeur Import/Export ");
var selectiones = new Array();

function click_choixFonction(checked){
    checked ? disabled="" : disabled ="disabled";
    activer_selectionFonction(disabled);
    activer_choixFonctionsDefaut(disabled);
}

function activer_selectionFonction (disabled){
    document.getElementById("selectionFonction").disabled=disabled;
}

function activer_choixFonctionsDefaut(disabled){
    document.getElementById("boiteChoixFonctionsDefaut").disabled=disabled;
    checked = document.getElementById('boiteChoixFonctionsDefaut').checked && document.getElementById('boiteChoixFonction').checked ;
    activerGroupeSelect(checked);
}

function activerGroupeSelect(checked){
    checked ? activerGroupeSelectAux(""):activerGroupeSelectAux("disabled");
}

function activerGroupeSelectAux(disabled){
    for(i=0;i<numeroSelect;i++){
	select = document.getElementById("select"+i);
	select.disabled=disabled;
    }
}

function activer(id,checked){
    document.getElementById(id).disabled= checked ? "":"disabled";
}

function ajouterFonction(valeurSelection){    
    
    tableau.retirer(valeurSelection);
    var i = 0;
    li     = document.createElement('li');
    label  = document.createElement('label');
    select = document.createElement('select');
    for (i=0;i<tableau.length;i++){
	option = document.createElement('option');
	option.value=tableau[i];
	option.innerHTML=tableau[i];
	select.appendChild(option);
    }
    select.appendChild(option);
    select.onchange=ajouterFonctionDynamique;
    select.id="select"+numeroSelect;
    label.innerHTML="&agrave; d&eacute;faut ";
    li.appendChild(label);
    li.appendChild(select);
    document.getElementById('ulListeFonctions').appendChild(li);
    selectPrecedent = document.getElementById('select'+(numeroSelect-1));
    selectPrecedent.onchange=null;
    numeroSelect+=1;
}


function ajouterFonctionDynamique(event){    
    valeurSelection = this.value;
    tableau.retirer(valeurSelection);
    var i = 0;
    li     = document.createElement('li');
    label  = document.createElement('label');
    select = document.createElement('select');
    for (i=0;i<tableau.length;i++){
	option = document.createElement('option');
	option.value=tableau[i];
	option.innerHTML=tableau[i];
	select.appendChild(option);
    }
    select.appendChild(option);
    select.onchange=ajouterFonctionDynamique;
    select.id="select"+numeroSelect;
    label.innerHTML="&agrave; d&eacute;faut ";
    li.appendChild(label);
    li.appendChild(select);
    document.getElementById('ulListeFonctions').appendChild(li);
    selectPrecedent = document.getElementById('select'+(numeroSelect-1));
    selectPrecedent.onchange=null;
    numeroSelect+=1;
}

function valider(){
    valeurFonction = document.getElementById('selectionFonction').value;
    valeurSaisie   = document.getElementById('destinataire').value;
    if  (!(valeurFonction != "f0" || valeurSaisie)) {
      0;
    }
    
}

</script>

  </head>
  <body> Personnalisez vos &eacute;tiquettes :
  <form methode="GET">
      <dl>
        <dt id="choixFonction">
          <input type="checkbox" onclick="click_choixFonction(this.checked)" id="boiteChoixFonction"/>
          <label class="cachezMoi">choix de la fonction</label>
        </dt>
        <dd id="fonction">
          <label>Choix fonction</label>
          <select disabled="disabled" id="selectionFonction">
            <option value="f1">M. le Directeur</option>
            <option value="f2">M. le Directeur de la Production</option>
            <option value="f3">M. le Directeur des Ressources Humaines</option>
            <option value="f4">M. le Directeur Comercial</option>
            <option value="f5">M. le Directeur Informatique</option>
            <option value="f6">M. le Directeur des Achats</option>
            <option value="f7">M. le Directeur Financier</option>
            <option value="f8">M. le Directeur Marketing et Communication</option>
            <option value="f9">M. le Directeur Technique </option>
            <option value="f10">M. le Directeur Import/Export </option>
          </select>
        </dd>
        <dt id="choixListeFonctions">
          <input type="checkbox" disabled="disabled" onclick="activerGroupeSelect(this.checked)" id="boiteChoixFonctionsDefaut"/>
          <label class="cachezMoi" >choix de la fonction par défaut</label>
        </dt>
        <dd id="listeFonctions">
	<fieldset>
          <ul id="ulListeFonctions">
            <li>
              <label>&agrave; d&eacute;faut </label>
          <select disabled="disabled" id="select0" onchange="ajouterFonction(this.value);">
            <option value=""></option>
            <option value="M. le Directeur">M. le Directeur</option>
            <option value="M. le Directeur de la Production">M. le Directeur de la Production</option>
            <option value="M. le Directeur des Ressources Humaines">M. le Directeur des Ressources Humaines</option>
            <option value="M. le Directeur Comercial">M. le Directeur Comercial</option>
            <option value="M. le Directeur Informatique">M. le Directeur Informatique</option>
            <option value="M. le Directeur des Achats">M. le Directeur des Achats</option>
            <option value="M. le Directeur Financier">M. le Directeur Financier</option>
            <option value="M. le Directeur Marketing et Communication">M. le Directeur Marketing et Communication</option>
            <option value="M. le Directeur Technique">M. le Directeur Technique </option>
            <option value="M. le Directeur Import/Export">M. le Directeur Import/Export </option>
          </select>
            </li>
          </ul>
	</fieldset>
        </dd>


	<dt id="choixSaisieDestinataire">
	  <label class="cachezMoi"> choix saisie du destinataire  </label>
	  <input type="checkbox" onclick="activer('destinataire',this.checked)"/>
	</dt>
	<dd id="saisieDestinataire">
	  <label> Saisie manuelle </label>
	  <input disabled="disabled" type="text" id="destinataire"/>
	</dd>
      </dl>
      &nbsp;<br />&nbsp;<br />           &nbsp;<br />&nbsp;<br />     
      <input type="submit" value="valider" id="boutonValider"/>
  </form>
</body>
</html>


Puis, le code qui ne marche pas.

<!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" xml:lang="fr" lang="fr">
  <head>
<style>
dt,dd{ 
 float:left;
 margin:0;
 padding: 0;
 width:30em;
 }

dt { 
 clear: left;
 width: 2em;
 text-align: right;
}

ul{ 
 list-style-type: none;
 padding:0px;
 }

dl{ 
width: 64em;
 }

li {
padding:0;
margin:0;
}

select,option{ 
 border:1px solid #666666;
 background-color:#fafdff;
/* ICI SE TROUVE LA LIGNE QUI FAIT PLANTER */ 
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #666666;
 width:20em;
}

label {
  width:8em;
  display:block;
  float:left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #303188;
  margin: 0px;
  margin-top: 10px !important;
  padding-bottom: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-left: 8px;
  text-align: left;
  background-image: url(../images/grouek/p_fleche.gif);
  background-repeat: no-repeat;
  background-position: 0px 3px;
}

#choixListeFonctions {  
  clear: none;
}

#listeFonctions{ 
  float:right;                 
}

.cachezMoi{ 
  display:None;
 }


</style>
<script type="text/javascript">
/* Ceci ajoute une méthode effacer aux objets array  */
Array.prototype.retirer = function (valeur){
    position = this.avoirPosition(valeur);
    if (position != -1){
	this.splice(position,1);
    }
}
/* Ceci ajoute une méthode avoirPosition aux objets array */
Array.prototype.avoirPosition = function (valeur){
    for(i=0;i<this.length;i++){
	if (this.slice(i,i+1)[0] == valeur) {
	    return i;
	}
    }
    return -1;
}

var numeroSelect=1;
var tableau = new Array("",
			"M. le Directeur",
			"M. le Directeur de la Production",
			"M. le Directeur des Ressources Humaines",
			"M. le Directeur Comercial","M. le Directeur Informatique",
			"M. le Directeur des Achats","M. le Directeur Financier",
			"M. le Directeur Marketing et Communication",
			"M. le Directeur Technique ",
			"M. le Directeur Import/Export ");
var selectiones = new Array();

function click_choixFonction(checked){
    checked ? disabled="" : disabled ="disabled";
    activer_selectionFonction(disabled);
    activer_choixFonctionsDefaut(disabled);
}

function activer_selectionFonction (disabled){
    document.getElementById("selectionFonction").disabled=disabled;
}

function activer_choixFonctionsDefaut(disabled){
    document.getElementById("boiteChoixFonctionsDefaut").disabled=disabled;
    checked = document.getElementById('boiteChoixFonctionsDefaut').checked && document.getElementById('boiteChoixFonction').checked ;
    activerGroupeSelect(checked);
}

function activerGroupeSelect(checked){
    checked ? activerGroupeSelectAux(""):activerGroupeSelectAux("disabled");
}

function activerGroupeSelectAux(disabled){
    for(i=0;i<numeroSelect;i++){
	select = document.getElementById("select"+i);
	select.disabled=disabled;
    }
}

function activer(id,checked){
    document.getElementById(id).disabled= checked ? "":"disabled";
}

function ajouterFonction(valeurSelection){    
    
    tableau.retirer(valeurSelection);
    var i = 0;
    li     = document.createElement('li');
    label  = document.createElement('label');
    select = document.createElement('select');
    for (i=0;i<tableau.length;i++){
	option = document.createElement('option');
	option.value=tableau[i];
	option.innerHTML=tableau[i];
	select.appendChild(option);
    }
    select.appendChild(option);
    select.onchange=ajouterFonctionDynamique;
    select.id="select"+numeroSelect;
    label.innerHTML="&agrave; d&eacute;faut ";
    li.appendChild(label);
    li.appendChild(select);
    document.getElementById('ulListeFonctions').appendChild(li);
    selectPrecedent = document.getElementById('select'+(numeroSelect-1));
    selectPrecedent.onchange=null;
    numeroSelect+=1;
}


function ajouterFonctionDynamique(event){    
    valeurSelection = this.value;
    tableau.retirer(valeurSelection);
    var i = 0;
    li     = document.createElement('li');
    label  = document.createElement('label');
    select = document.createElement('select');
    for (i=0;i<tableau.length;i++){
	option = document.createElement('option');
	option.value=tableau[i];
	option.innerHTML=tableau[i];
	select.appendChild(option);
    }
    select.appendChild(option);
    select.onchange=ajouterFonctionDynamique;
    select.id="select"+numeroSelect;
    label.innerHTML="&agrave; d&eacute;faut ";
    li.appendChild(label);
    li.appendChild(select);
    document.getElementById('ulListeFonctions').appendChild(li);
    selectPrecedent = document.getElementById('select'+(numeroSelect-1));
    selectPrecedent.onchange=null;
    numeroSelect+=1;
}

function valider(){
    valeurFonction = document.getElementById('selectionFonction').value;
    valeurSaisie   = document.getElementById('destinataire').value;
    if  (!(valeurFonction != "f0" || valeurSaisie)) {
      0;
    }
    
}

</script>

  </head>
  <body> Personnalisez vos &eacute;tiquettes :
  <form methode="GET">
      <dl>
        <dt id="choixFonction">
          <input type="checkbox" onclick="click_choixFonction(this.checked)" id="boiteChoixFonction"/>
          <label class="cachezMoi">choix de la fonction</label>
        </dt>
        <dd id="fonction">
          <label>Choix fonction</label>
          <select disabled="disabled" id="selectionFonction">
            <option value="f1">M. le Directeur</option>
            <option value="f2">M. le Directeur de la Production</option>
            <option value="f3">M. le Directeur des Ressources Humaines</option>
            <option value="f4">M. le Directeur Comercial</option>
            <option value="f5">M. le Directeur Informatique</option>
            <option value="f6">M. le Directeur des Achats</option>
            <option value="f7">M. le Directeur Financier</option>
            <option value="f8">M. le Directeur Marketing et Communication</option>
            <option value="f9">M. le Directeur Technique </option>
            <option value="f10">M. le Directeur Import/Export </option>
          </select>
        </dd>
        <dt id="choixListeFonctions">
          <input type="checkbox" disabled="disabled" onclick="activerGroupeSelect(this.checked)" id="boiteChoixFonctionsDefaut"/>
          <label class="cachezMoi" >choix de la fonction par défaut</label>
        </dt>
        <dd id="listeFonctions">
	<fieldset>
          <ul id="ulListeFonctions">
            <li>
              <label>&agrave; d&eacute;faut </label>
          <select disabled="disabled" id="select0" onchange="ajouterFonction(this.value);">
            <option value=""></option>
            <option value="M. le Directeur">M. le Directeur</option>
            <option value="M. le Directeur de la Production">M. le Directeur de la Production</option>
            <option value="M. le Directeur des Ressources Humaines">M. le Directeur des Ressources Humaines</option>
            <option value="M. le Directeur Comercial">M. le Directeur Comercial</option>
            <option value="M. le Directeur Informatique">M. le Directeur Informatique</option>
            <option value="M. le Directeur des Achats">M. le Directeur des Achats</option>
            <option value="M. le Directeur Financier">M. le Directeur Financier</option>
            <option value="M. le Directeur Marketing et Communication">M. le Directeur Marketing et Communication</option>
            <option value="M. le Directeur Technique">M. le Directeur Technique </option>
            <option value="M. le Directeur Import/Export">M. le Directeur Import/Export </option>
          </select>
            </li>
          </ul>
	</fieldset>
        </dd>


	<dt id="choixSaisieDestinataire">
	  <label class="cachezMoi"> choix saisie du destinataire  </label>
	  <input type="checkbox" onclick="activer('destinataire',this.checked)"/>
	</dt>
	<dd id="saisieDestinataire">
	  <label> Saisie manuelle </label>
	  <input disabled="disabled" type="text" id="destinataire"/>
	</dd>
      </dl>
      &nbsp;<br />&nbsp;<br />           &nbsp;<br />&nbsp;<br />     
      <input type="submit" value="valider" id="boutonValider"/>
  </form>
</body>
</html>




Merci par avance à tous ceux qui participeront.
Y.Chaouche[/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par ychaouche (16 Nov 2006 - 10:16)
bien sure, voici le même document sans javascript, avec une liste statique (à droite) avec 3 éléments.

Y.chaouche


<!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" xml:lang="fr" lang="fr">
  <head>
<style>
dt,dd{ 
 float:left;
 margin:0;
 padding: 0;
 width:30em;
 }

dt { 
 clear: left;
 width: 2em;
 text-align: right;
}

ul{ 
 list-style-type: none;
 padding:0px;
 }

dl{ 
width: 64em;
 }

li {
padding:0;
margin:0;
}

select,option{ 
 border:1px solid #666666;
 background-color:#fafdff;
/* ICI SE TROUVE LA LIGNE QUI FAIT PLANTER */ 
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #666666;
 width:20em;
}

label {
  width:8em;
  display:block;
  float:left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #303188;
  margin: 0px;
  margin-top: 10px !important;
  padding-bottom: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-left: 8px;
  text-align: left;
  background-image: url(../images/grouek/p_fleche.gif);
  background-repeat: no-repeat;
  background-position: 0px 3px;
}

#choixListeFonctions {  
  clear: none;
}

#listeFonctions{ 
  float:right;                 
}

.cachezMoi{ 
  display:None;
 }


</style>

  </head>
  <body> Personnalisez vos &eacute;tiquettes :
  <form methode="GET">
      <dl>
        <dt id="choixFonction">
          <input type="checkbox"  id="boiteChoixFonction"/>
          <label class="cachezMoi">choix de la fonction</label>
        </dt>
        <dd id="fonction">
          <label>Choix fonction</label>
          <select  id="selectionFonction">
            <option value="f1">M. le Directeur</option>
            <option value="f2">M. le Directeur de la Production</option>
            <option value="f3">M. le Directeur des Ressources Humaines</option>
            <option value="f4">M. le Directeur Comercial</option>
            <option value="f5">M. le Directeur Informatique</option>
            <option value="f6">M. le Directeur des Achats</option>
            <option value="f7">M. le Directeur Financier</option>
            <option value="f8">M. le Directeur Marketing et Communication</option>
            <option value="f9">M. le Directeur Technique </option>
            <option value="f10">M. le Directeur Import/Export </option>
          </select>
        </dd>
        <dt id="choixListeFonctions">
          <input type="checkbox"   id="boiteChoixFonctionsDefaut"/>
          <label class="cachezMoi" >choix de la fonction par défaut</label>
        </dt>
        <dd id="listeFonctions">
	<fieldset>
          <ul id="ulListeFonctions">
            <li>
              <label>&agrave; d&eacute;faut </label>
          <select id="select0" onchange="ajouterFonction(this.value);">
            <option value=""></option>
            <option value="M. le Directeur">M. le Directeur</option>
            <option value="M. le Directeur de la Production">M. le Directeur de la Production</option>
            <option value="M. le Directeur des Ressources Humaines">M. le Directeur des Ressources Humaines</option>
            <option value="M. le Directeur Comercial">M. le Directeur Comercial</option>
            <option value="M. le Directeur Informatique">M. le Directeur Informatique</option>
            <option value="M. le Directeur des Achats">M. le Directeur des Achats</option>
            <option value="M. le Directeur Financier">M. le Directeur Financier</option>
            <option value="M. le Directeur Marketing et Communication">M. le Directeur Marketing et Communication</option>
            <option value="M. le Directeur Technique">M. le Directeur Technique </option>
            <option value="M. le Directeur Import/Export">M. le Directeur Import/Export </option>
          </select>
            </li>

            <li>
              <label>&agrave; d&eacute;faut </label>
          <select id="select0" onchange="ajouterFonction(this.value);">
            <option value=""></option>
            <option value="M. le Directeur">M. le Directeur</option>
            <option value="M. le Directeur de la Production">M. le Directeur de la Production</option>
            <option value="M. le Directeur des Ressources Humaines">M. le Directeur des Ressources Humaines</option>
            <option value="M. le Directeur Comercial">M. le Directeur Comercial</option>
            <option value="M. le Directeur Informatique">M. le Directeur Informatique</option>
            <option value="M. le Directeur des Achats">M. le Directeur des Achats</option>
            <option value="M. le Directeur Financier">M. le Directeur Financier</option>
            <option value="M. le Directeur Marketing et Communication">M. le Directeur Marketing et Communication</option>
            <option value="M. le Directeur Technique">M. le Directeur Technique </option>
            <option value="M. le Directeur Import/Export">M. le Directeur Import/Export </option>
          </select>
            </li>

            <li>
              <label>&agrave; d&eacute;faut </label>
          <select id="select0" onchange="ajouterFonction(this.value);">
            <option value=""></option>
            <option value="M. le Directeur">M. le Directeur</option>
            <option value="M. le Directeur de la Production">M. le Directeur de la Production</option>
            <option value="M. le Directeur des Ressources Humaines">M. le Directeur des Ressources Humaines</option>
            <option value="M. le Directeur Comercial">M. le Directeur Comercial</option>
            <option value="M. le Directeur Informatique">M. le Directeur Informatique</option>
            <option value="M. le Directeur des Achats">M. le Directeur des Achats</option>
            <option value="M. le Directeur Financier">M. le Directeur Financier</option>
            <option value="M. le Directeur Marketing et Communication">M. le Directeur Marketing et Communication</option>
            <option value="M. le Directeur Technique">M. le Directeur Technique </option>
            <option value="M. le Directeur Import/Export">M. le Directeur Import/Export </option>
          </select>
            </li>
          </ul>
	</fieldset>
        </dd>


	<dt id="choixSaisieDestinataire">
	  <label class="cachezMoi"> choix saisie du destinataire  </label>
	  <input type="checkbox" />
	</dt>
	<dd id="saisieDestinataire">
	  <label> Saisie manuelle </label>
	  <input  type="text" id="destinataire"/>
	</dd>
      </dl>
      &nbsp;<br />&nbsp;<br />           &nbsp;<br />&nbsp;<br />     
      <input type="submit" value="valider" id="boutonValider"/>
  </form>
</body>
</html>
Ouch. Chez moi (Firefox 2.0 Win), c'est moche dans tous les cas Smiley ohwell

Quelle est la disposition que tu veux obtenir ?
Peut être un début de piste :
lorsque je rajoute une bordure à mes LI, le "bug" ne se reproduit plus (la mise en page reste intacte même avec la nouvelle police).

A quoi est-ce que ça peut être lié ?

Y.Chaouche
Re. J'ai fait un truc qui ne fonctionne pas trop mal : 
<!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" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
		fieldset {
			border: 0;
			overflow: auto;
			width: 45%;
			}
		#fieldDroite {
			float: right;
		}
		fieldset p {
			clear: both;
			text-align: right;
		}
		p label {
			float: left;
			margin-left: 20px;
			}
		input, select {
			width: 50%;
			}
		input.check {
			float: left;
			width: auto;
			}
		p#submit {
			clear: both;
			}
		p#submit input {
			width: auto;
			}
		</style>
	<!--[if lte IE 6]>
	<style type="text/css">
		fieldset {
			overflow: visible;
			height: 1%;
			}
	</style>
	<![endif]-->
	</head>
	<body>
		<h1>Personnalisez vos étiquettes :</h1>
		<form action="..." method="post">
			<fieldset id="fieldDroite">
				<p><input type="checkbox" name="..." class="check" /><label for="defaut1">A défaut : </label> <select name="..." id="defaut1"><option value="1">Directeur</option></select></p>
				<p><label for="defaut2">A défaut : </label> <select name="..." id="defaut2"><option value="1">Directeur</option></select></p>
				<p><label for="defaut3">A défaut : </label> <select name="..." id="defaut3"><option value="1">Directeur</option></select></p>
			</fieldset>
			<fieldset id="fieldGauche">
				<p><input type="checkbox" name="..." class="check" /><label for="fonction">Choix de la fonction : </label> <select name="..." id="fonction"><option value="1">Directeur</option></select></p>
				<p><input type="checkbox" name="..." class="check" /><label for="saisie">Saisie manuelle : </label> <input type="text" id="saisie" name="..." /></p>
			</fieldset>
			<p id="submit"><input type="submit" /></p>
		</form>
	</body>
</html>
*Le formulaire est une dl.
*Les dt correspondent aux checkbox, et les dd aux inputs/select
*Chaque élément à un Label.

Le menu de sélection à droite est composé de plusieurs select.
Voici la hierarchie de la dd qui les contient :
<dl>
... ici le select de gauche (le plus haut)
<dt> checkbox du fieldset de selections </dt>
<dd>
<ul>
<li>
<select 1> </select 1>
</li>
<li>
<select 2> </select 2>
</li>
...
</ul>
</dd>
.... ici le input de gauche, celui du bas.
</dl>


Il suffit que soit la marge soit le padding ne soit pas nul et j'obtiens bien le résultat désiré même avec la nouvelle police. Si je les mets tous les deux 0 il y a un décalage au niveau des selects ainsi que leur labels.

Comment expliquer cela ?

Y.Chaouche
ok sopo c'est pas mal. Merci bcp. Mais pour être pleinement satisfait, j'aimerai garder la sémantique détaillée dans mon précédent post. Le développeur qui lira dérière moi devra voir une logique dans les éléments html, il pourra ensuite faire ce qu'il veut avec les css pour changer le positionnement de chaque boite. Mais en regardant le code HTML il devra comprendre quels éléments vont avec quels éléments.

Le formulaire est une liste de choix, qui a une certaine logique (case à cocher qui active un champ). Donc j'ai pensé à un dl > dt - dd. J'aimerais gardé ces éléments là si possible.

Y.Chaouche
ça doit pouvoir s'adapter en passant les <dt> en float: left; et les <dd> en float: right;, et les paragraphes par les <dl>.

Sinon, on peut discuter sur la sémantique Smiley smile mais les <select> sont automatiquement des listes Smiley ohwell Et une liste de définition, ce n'est pas non plus une "simple" liste Smiley cligne
Merci Sopo.

Alors, sémantiquement voilà comment je vois la chose :
une seule dl. Une dl est composée de plusieurs couples dt dd. DT pour le terme et DD pour la définition. Ici, il y a trois couples dt-dd dans une dl.

<dl>
<dt> check box "choix de la fonction"</dt>
<dd> select "choix de la fonction" (un seule select)</dd>

<dt>check box "choix des fonctions à défaut"</dt>
<dd> liste(ul) des selects à défauts (plusieurs selects)</dd>

<dt>check box "saisie manuelle"</dt>
<dd>input "saisie manuelle"</dd>
</dl>

J'ai enlevé tous les labels et les détails sur les ul et li pour le deuxiemme couple <dt> <dd> pour garder un code lisible.

Dans le code que tu me propose, les éléments sont mis ensemble dans un même filedset par exemple, ce qui ne correspond pas à la sémantique de l'application. Graphiquement ça fait à peu prés ce que je veux mais il manque encore des choses à régler : espaces trop important entre les éléments, le checkbox à gauche fait décaler le premier select du groupe de trois select vers la droite, alors qu'il devrait être alligné avec les autres select de son groupe... Mais je suis sure qu'avec quelque retouches ton code s'en sortira sans problèmes.

Néanmoins comme je l'ai dit dans le précédent post, avec mon code je suis finalement arrivé à faire ce que je voulais en mettant un margin (ou un padding) non nul aux li qui contiennent les select est leur label. Ce que je ne comprends toujours pas c'est pourquoi avec des valeurs nuls pour les deux tout fout le camp ! est-ce un bug dans firefox ou bien un bug dans le code ? et si oui lequel ?

Y.Chaouche
Sujet clos
Aller à