18041 sujets

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

Apparition et disparition de div

Bonjour,

J'essaye de créer une page dynamique.
Grossomodo j'ai des div de même taille qui sont positionnés en block verticalement, lorsque on clique sur une div, celle ci doit s'étendre, j'utilise donc une apparition/disparition d'une div secondaire en changeant avec une fonction javascript le style.display (none, ou inline).
Le problème est qu'apparement le style de la div secondaire se charge avec un display:'none', et que lors de l'apparition display:'inline', les positions, background, marge et autre ne s'adapte pas.

Pouvez vous m'apporter vos lumières? Smiley smile
Modifié par Lerustre (26 May 2011 - 10:22)
Bonjour,
Pas sûr de bien capter, mais un div en display:inline ... ça craint, non?
Merci de nous donner un peu de source en pâture pour qu'on puisse se faire les dents...
ok voila le code : en espérant qu'il soit plus clair Smiley sweatdrop !

Html :
<div><a class="title_list">Liste des entreprises</a></div>
<div id="liste_entreprise"><div class="ligne_entreprise"><span><button class="button_detail" onclick="va_et_vient('ident1')">Detail</button>maprod</span></div><div class="detail_entreprise" style="display: none;" id="ident1"><form action="" method="post">
        <p><label for="adresse">Adresse:</label>
       <input name="adresse" id="adresse" value="rue de la moy" size="100" type="text">
		</p><p><label for="cp">Code postal:</label>
        <input name="cp" id="adresse" value="" size="5" type="text">
		</p><p><label for="ville">Ville:</label>
        <input name="ville" id="ville" value="" size="50" type="text">
		</p><p><label for="phone">Telephone:</label>
        <input name="phone" id="phone" value="" size="12" type="text">
		</p><p><label for="fax">Fax:</label>
        <input name="fax" id="fax" value="" size="12" type="text">
		</p><p><label for="mail">mail:</label>
        <input name="mail" id="mail" value="" size="25" type="text">
		</p><p><label for="commentaire">Commentaire:</label>
        <input name="commentaire" id="commentaire" value="" size="25" type="text">
		</p></form></div><div class="ligne_entreprise"><span><button class="button_detail" onclick="va_et_vient('ident2')">Detail</button>entreprise alpha </span></div><div class="detail_entreprise" style="display: none;" id="ident2"><form action="" method="post">
        <p><label for="adresse">Adresse:</label>
       <input name="adresse" id="adresse" value="Villef" size="100" type="text">
		</p><p><label for="cp">Code postal:</label>
        <input name="cp" id="adresse" value="" size="5" type="text">
		</p><p><label for="ville">Ville:</label>
        <input name="ville" id="ville" value="" size="50" type="text">
		</p><p><label for="phone">Telephone:</label>
        <input name="phone" id="phone" value="" size="12" type="text">
		</p><p><label for="fax">Fax:</label>
        <input name="fax" id="fax" value="" size="12" type="text">
		</p><p><label for="mail">mail:</label>
        <input name="mail" id="mail" value="" size="25" type="text">
		</p><p><label for="commentaire">Commentaire:</label>
        <input name="commentaire" id="commentaire" value="" size="25" type="text">
		</p></form></div> </div>


css
ligne_entreprise {
    background: none repeat scroll 0 0 #3300CC;
    height: 50px;
    margin: 5px 0;
    width: 100%;
}
.button_detail {
    height: 50px;
    margin: 0 15px 0 5px;
}
#liste_entreprise span, a:visited {
    color: #000000;
    font-size: 18px;
    font-variant: small-caps;
}
#liste_entreprise form {
    width: 800px;
}
.detail_entreprise {
    border: medium none #3300CC;
    display: none;
    height: 200px;
    margin: 50px 0 10px;
    padding: 30px 0 0 20px;
}


et le script

function va_et_vient(div) 
{
if(document.getElementById(div).style.display == 'none')
{
document.getElementById(div).style.display = 'inline';
;
}
else
{
document.getElementById(div).style.display = 'none';
}
}
</script>
Bonjour,

Est-ce quelque chose comme ceci que tu cherches à faire?
Il reste des erreurs dans le script. Ainsi, une même ID ne peut pas se répéter dans la page!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>
      divs dynamiques
    </title>
    <style type="text/css">
/*<![CDATA[*/
    ligne_entreprise {
        background: none repeat scroll 0 0 #3300CC;
        height: 50px;
        margin: 5px 0;
        width: 100%;
    }
    .button_detail {
        height: 50px;
        margin: 0 15px 0 5px;
    }
    #liste_entreprise span, a:visited {
        color: #000000;
        font-size: 18px;
        font-variant: small-caps;
    }
    #liste_entreprise form {
        width: 800px;
    }
    .detail_entreprise {
        border: medium solid #3300CC;
        margin: 0 0 0 80px;
        padding: 10px;
        background: #E6EFF7;
        color: #3300CC;
        width: 720px;
        font: normal 14px arial,verdana,helvetica,sans-serif;
    }

    /*]]>*/
    </style>
    <script type="text/javascript">
	//<![CDATA[
        function va_et_vient(div)  {
			var d = document.getElementById(div).style;
			(d.display=='none') ? d.display='block' : d.display='none';
        }
    //]]>
    </script>
  </head>
  <body>
    <div><a class="title_list">Liste des entreprises</a></div>
    <div id="liste_entreprise">
      <div class="ligne_entreprise">
        <button class="button_detail" onclick=
        "va_et_vient('ident1')">Détail</button><span>maprod</span>
      </div>
      <div class="detail_entreprise c1" id="ident1" style="display:none">
        <form action="" method="post">
          <p>
            <label for="adresse">Adresse:</label> 
			<input name="adresse" id="adresse" value="rue de la moy" size="100" type="text" />
          </p>
          <p>
            <label for="cp">Code postal:</label> 
			<input name="cp" id="cp" value="" size="5" type="text" />
          </p>
          <p>
            <label for="ville">Ville:</label> 
			<input name="ville" id="ville" value="" size="50" type="text" />
          </p>
          <p>
            <label for="phone">Telephone:</label> 
			<input name="phone" id="phone" value="" size="12" type="text" />
          </p>
          <p>
            <label for="fax">Fax:</label> 
			<input name="fax" id="fax" value="" size="12" type="text" />
          </p>
          <p>
            <label for="mail">mail:</label> 
			<input name="mail" id="mail" value="" size="25" type="text" />
          </p>
          <p>
            <label for="commentaire">Commentaire:</label> 
			<input name="commentaire" id="commentaire" value="" size="25" type="text" />
          </p>
        </form>
      </div>
      <div class="ligne_entreprise">
        <button class="button_detail" onclick=
        "va_et_vient('ident2')">Détail</button><span>entreprise alpha</span>
      </div>
      <div class="detail_entreprise c1" id="ident2" style="display:none">
        <form action="" method="post">
          <p>
            <label for="adresse">Adresse:</label> 
			<input name="adresse" id="adresse" value="Villef" size="100" type="text" />
          </p>
          <p>
            <label for="cp">Code postal:</label> 
			<input name="cp" id="cp" value="" size="5" type="text" />
          </p>
          <p>
            <label for="ville">Ville:</label> 
			<input name="ville" id="ville" value="" size="50" type="text" />
          </p>
          <p>
            <label for="phone">Telephone:</label> 
			<input name="phone" id="phone" value="" size="12" type="text" />
          </p>
          <p>
            <label for="fax">Fax:</label> 
			<input name="fax" id="fax" value="" size="12" type="text" />
          </p>
          <p>
            <label for="mail">mail:</label> 
			<input name="mail" id="mail" value="" size="25" type="text" />
          </p>
          <p>
            <label for="commentaire">Commentaire:</label> 
			<input name="commentaire" id=
            "commentaire" value="" size="25" type="text" />
          </p>
        </form>
      </div>
    </div>
  </body>
</html>
Sujet clos
Aller à