Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1876 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1284489
fafane84
Posté le 16-01-2006 à 14:03:24  profilanswer
 

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
mood
Publicité
Posté le 16-01-2006 à 14:03:24  profilanswer
 

n°1285171
fafane84
Posté le 16-01-2006 à 23:28:40  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Probleme verification existance d'un motprobleme de liste deroulante
probleme de formulaireprobleme de compatibilité IE/firefox en javascript
probleme avec php et flashligne de commande [résolu]
Problème (de body ?) sous FirefoxPetit problème avec Psexec
VHDL problème de simulationProblème de mise en page d'un site
Plus de sujets relatifs à : [résolu] Problème d'affichage avec boite flottante.

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.112 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR