[résolu] Problème d'affichage avec boite flottante.

Problème d'affichage avec boite flottante. [résolu] - HTML/CSS - Programmation

Marsh Posté le 16-01-2006 à 14:03:24    

Salut à tous  :hello:  
 
J'essaye désespéremment de faire un formulaire sans tableaux, mais je rencontre un problème d'affichage que je n'arrive pas à résoudre.
 
Voir la page test concernée >>ici<<.
 
La boite flottante gauche de mon formulaire, s'affiche correctement quand la longueur du texte est moin grande ou de taille équivalente au contenu de droite.
Mais si le texte est plus long, alors catastrophe, çà déborde !!!
 
Voici le code XHTML :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  2. "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  4. <head>
  5. <title></title>
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  7. <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
  8. <link rel="stylesheet" type="text/css" media="print" href="print.css" />
  9. <link rel="shortcut icon" type="images/x-icon" href="favicon.ico" />
  10. </head>
  11. <body>
  12. <div id="conteneur">
  13.   <div id="header">
  14.     <h1>Mon joli site DivX Tutos aux normes</h1>
  15.   </div>
  16.   <ul id="menuH">
  17.     <li id="lien1"><a href="lien.html"><span>lien 1</span></a></li>
  18.     <li id="lien2"><a href="lien.html"><span>lien 2</span></a></li>
  19.     <li id="lien3"><a href="lien.html"><span>lien 3</span></a></li>
  20.   </ul>
  21.   <div id="menuV">
  22.    <span><strong>Flottant Gauche</strong></span><br />
  23.    <span>Menu Vertical</span>
  24.    <ul>
  25.     <li><a href="lien.html">lien 1</a></li>
  26.     <li><a href="lien.html">lien 2</a></li>
  27.     <li><a href="lien.html">lien 3</a></li>
  28.     <li><a href="lien.html">lien 4</a></li>
  29.     <li><a href="lien.html">lien 5</a></li>
  30.     <li><a href="lien.html">lien 6</a></li>
  31.     <li><a href="lien.html">lien 7</a></li>
  32.     <li><a href="lien.html">lien 8</a></li>
  33.     <li><a href="lien.html">lien 9</a></li>
  34.     <li><a href="lien.html">lien 10</a></li>
  35.     <li><a href="lien.html">lien 11</a></li>
  36.     <li><a href="lien.html">lien 12</a></li>
  37.    </ul>
  38.   </div>
  39.   <div id="menuV2">
  40.    <span><strong>Flottant Droit</strong></span><br />
  41.    <span>Menu Vertical</span>
  42.    <ul>
  43.     <li><a href="lien.html">lien 1</a></li>
  44.     <li><a href="lien.html">lien 2</a></li>
  45.     <li><a href="lien.html">lien 3</a></li>
  46.    </ul>
  47.    <span>Menu Vertical</span>
  48.    <ul>
  49.     <li><a href="lien.html">lien 1</a></li>
  50.     <li><a href="lien.html">lien 2</a></li>
  51.     <li><a href="lien.html">lien 3</a></li>
  52.     <li><a href="lien.html">lien 4</a></li>
  53.     <li><a href="lien.html">lien 5</a></li>
  54.     <li><a href="lien.html">lien 6</a></li>
  55.    </ul>
  56.   </div>
  57.   <div id="contenu">
  58.     <strong>Contenu</strong>
  59.     <div class="formulaire">
  60.       <h2>Pr&eacute;f&eacute;rences utilisateurs</h2>
  61.       <form action="user_prefs.php" method="post" class="clear">
  62.         <p class="champs">
  63.           <label class="float" for="user_nom">Nom&nbsp;</label>
  64.           <span><input type="text" size="30" name="user_nom" id="user_prenom" maxlength="255" value="nom"  /></span>
  65.         </p>
  66.         <p class="champs">
  67.           <label class="float" for="user_prenom">Pr&eacute;nom&nbsp;</label>
  68.           <span><input type="text" size="30" name="user_prenom" id="user_nom" maxlength="255" value="pr&eacute;nom"  /></span>
  69.         </p>
  70.         <p class="champs">
  71.           <label class="float">texte de gauche</label>
  72.           <span>texte dans la boite gauche beaucoup plus long que le texte de gauche.<br />
  73.           Et l&agrave; pas de probl&egrave;mes !!!<br />
  74.           Et bla bla bla, et bla bla bla ...</span>
  75.         </p>
  76.         <p class="champs">
  77.           <label class="float">texte dans la boite flottante &agrave; gauche beaucoup plus long que le texte de droite.
  78.           Comme vous pouvez le constater, &ccedil;&agrave; d&eacute;borde !!!</label>
  79.           <span>texte de droite</span>
  80.         </p>
  81.         <p class="champs">
  82.           <label class="float">Site Web&nbsp;</label>
  83.           <span><input type='text' name='url' id='url' size='30' maxlength='100' value='http://localhost/mon_beau_site/' />&nbsp;</span>
  84.         <p class="champs">
  85.           <label class="float">&nbsp;</label>
  86.           <span><input class="submit" type="submit" value="enregistrer" /></span>
  87.         </p>
  88.       </form>
  89.     </div>
  90.     <hr class="spacer" />
  91.   </div>
  92.   <div id="footer">Footer</div>
  93. </div>
  94. </body>
  95. </html>


Et le code CSS :

Code :
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. img {
  6.   border: 0 none;
  7. }
  8. a {
  9.   text-decoration: none;
  10. }
  11. a:hover {
  12.   text-decoration: underline;
  13. }
  14. .spacer {
  15.   clear: both;
  16.   visibility: hidden;
  17. }
  18. /* Header */
  19. #header {
  20.   background : rgb(208,220,232) url(img/logo.gif) no-repeat center top;
  21.   color: black;
  22.   text-align: center;
  23.   height: 100px;
  24.   line-height: 100px;
  25. }
  26. #header h1 {
  27.   display: none;
  28. }
  29. /* Page et Contenu */
  30. #conteneur {
  31.   background-color: gray;
  32.   color: black;
  33.   text-align:center;
  34. }
  35. #contenu {
  36.   position: relative;
  37.   background-color: green;
  38.   color: black;
  39.   margin: 0 140px 0 140px;
  40.   padding: 0 10px;
  41.   text-align:left;
  42. }
  43. /* Footer */
  44. #footer {
  45.   clear: both;
  46.   background-color: yellow;
  47.   color: black;
  48.   text-align: center;
  49. }
  50. /* Menu horizontal */
  51. #menuH {
  52.   text-align:left;
  53.   background-color: gray;
  54.   color: black;
  55.   height: 30px;
  56.   line-height: 30px;
  57.   width: 278px;
  58.   margin: 0 auto;
  59. }
  60. #menuH li {
  61.   float: left;
  62.   margin: 8px 2px 0 2px;
  63.   list-style-type: none;
  64. }
  65. #menuH li span {
  66.   display: none;
  67. }
  68. #lien1 a, #lien2 a, #lien3 a {
  69.   display: block;
  70. }
  71. #lien1 a {
  72.   background : url(img/rss.jpg) no-repeat center center;
  73. }
  74. #lien2 a {
  75.   background : url(img/google.jpg) no-repeat center center;
  76. }
  77. #lien3 a {
  78.   background : url(img/firefox.jpg) no-repeat center center;
  79. }
  80. #menuH a {
  81.   width: 88px;
  82.   height: 15px;
  83.   display: block;
  84. }
  85. #menuH a:hover {
  86.   text-decoration: none;
  87. }
  88. /* Menus verticaux */
  89. #menuV {
  90.   float: left;
  91. }
  92. #menuV2 {
  93.   float: right;
  94. }
  95. #menuV, #menuV2 {
  96.   background-color: red;
  97.   color: black;
  98.   width: 140px;
  99.   text-align: center;
  100. }
  101. #menuV ul, #menuV2 ul {
  102.   text-align: left;
  103.   margin: 0 10px;
  104. }
  105. #menuV li, #menuV2 li {
  106.   display: list-item;
  107.   list-style-position: inside;
  108.   list-style-type: square;
  109. }
  110. /* formulaires */
  111. .formulaire {
  112.   margin: 0 0 1em 0;
  113. padding : 1em;
  114. border: solid 1px #98aab1;
  115. background-color : rgb(234,237,244);
  116. }
  117. .formulaire h2 {
  118.   padding: 1em;
  119. border: solid 1px #98aab1;
  120. background-color :rgb(192,207,225);
  121. text-align:center;
  122. }
  123. p.champs {
  124. /*clear:left;*/
  125. margin : 0.4em 0 0 0;
  126. padding : 1em;
  127. border: solid 1px #98aab1;
  128. height:1%; /* correction pour IE */
  129. background-color : white;
  130. }
  131. label.float {
  132. /* position : relative;*/
  133. float : left;
  134. width : 35%;
  135. background-color : cyan;
  136. }
  137. p.champs span {
  138.   display: block;
  139.   margin-left: 35%;
  140.   padding: 0 1%;
  141.   background-color : gray;
  142. }


 
J'ai essayé de mettre un <hr class="spacer /> à la fin du contenu (juste avant la fin du paragraphe <p class="champs">.....</p> cela fonctionne bien mais l'affichage du contenu est poussé sous les menus verticaux  :fou:  
 
J'ai essayé de mettre un clear:left dans le CSS sur la class "champs", pas mieux  :fou:  
 
Je tourne en rond deuis 2 jours et je suis à cours de solutions.
 
Pourriez-vous m'aider ?
 
Merci d'avance pour vos conseils.
 
 [:fafane84]


Message édité par fafane84 le 17-01-2006 à 09:18:37

---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 16-01-2006 à 14:03:24   

Reply

Marsh Posté le 16-01-2006 à 23:28:40    

Ne cherchez plus, j'ai trouvé sur le forum d'Alsacréations.
 
Voici les modifications que j'ai apportées (en gras) :

Citation :

p.champs {
 margin : 0.4em 0 0 0;
 padding : 1em;
 border: solid 1px #98aab1;
 background-color : white;
 overflow: auto;
}
/* début des corrections pour IE. */
* html p.champs {
 height:1%;
 overflow: visible;
}
* html #contenu {
  height: 1%; /*Bug de 3px après flottant */
}
/* Fin des corrections pour IE.*/


Et tout s'affiche correctement sur Firefox, Opéra et IE 6.
Demain, au boulot je testerai sur IE 5.5.
 
@+


Message édité par fafane84 le 17-01-2006 à 09:17:50

---------------
Mon Topic de Vente Hardware
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed