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

Question

fafane84

16 Jan 2006 à 22:01

Salut à tous Smiley coucou

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="shortcut icon" type="images/x-icon" href="favicon.ico" />
</head>
<body>
<div id="conteneur">
 <div id="header">
   <h1>Mon joli site DivX Tutos aux normes</h1>
 </div>
 <ul id="menuH">
   <li id="lien1"><a href="lien.html"><span>lien 1</span></a></li>
   <li id="lien2"><a href="lien.html"><span>lien 2</span></a></li>
   <li id="lien3"><a href="lien.html"><span>lien 3</span></a></li>
 </ul>
 <div id="menuV">
  <span><strong>Flottant Gauche</strong></span><br />
  <span>Menu Vertical</span>
  <ul>
   <li><a href="lien.html">lien 1</a></li>
   <li><a href="lien.html">lien 2</a></li>
   <li><a href="lien.html">lien 3</a></li>
   <li><a href="lien.html">lien 4</a></li>
   <li><a href="lien.html">lien 5</a></li>
   <li><a href="lien.html">lien 6</a></li>
   <li><a href="lien.html">lien 7</a></li>
   <li><a href="lien.html">lien 8</a></li>
   <li><a href="lien.html">lien 9</a></li>
   <li><a href="lien.html">lien 10</a></li>
   <li><a href="lien.html">lien 11</a></li>
   <li><a href="lien.html">lien 12</a></li>
  </ul>
 </div>
 <div id="menuV2">
  <span><strong>Flottant Droit</strong></span><br />
  <span>Menu Vertical</span>
  <ul>
   <li><a href="lien.html">lien 1</a></li>
   <li><a href="lien.html">lien 2</a></li>
   <li><a href="lien.html">lien 3</a></li>
  </ul>
  <span>Menu Vertical</span>
  <ul>
   <li><a href="lien.html">lien 1</a></li>
   <li><a href="lien.html">lien 2</a></li>
   <li><a href="lien.html">lien 3</a></li>
   <li><a href="lien.html">lien 4</a></li>
   <li><a href="lien.html">lien 5</a></li>
   <li><a href="lien.html">lien 6</a></li>
  </ul>
 </div>
 <div id="contenu">
   <strong>Contenu</strong>
   <div class="formulaire">
     <h2>Préférences utilisateurs</h2>
     <form action="user_prefs.php" method="post" class="clear">
       <p class="champs">
         <label class="float" for="user_nom">Nom </label>
         <span><input type="text" size="30" name="user_nom" id="user_prenom" maxlength="255" value="nom"  /></span>
       </p>
       <p class="champs">
         <label class="float" for="user_prenom">Prénom </label>
         <span><input type="text" size="30" name="user_prenom" id="user_nom" maxlength="255" value="prénom"  /></span>
       </p>
       <p class="champs">
         <label class="float">texte de gauche</label>
         <span>texte dans la boite gauche beaucoup plus long que le texte de gauche.<br />
         Et là pas de problèmes !!!<br />
         Et bla bla bla, et bla bla bla ...</span>
       </p>
       <p class="champs">
         <label class="float">texte dans la boite flottante à gauche beaucoup plus long que le texte de droite.
         Comme vous pouvez le constater, çà déborde !!!</label>
         <span>texte de droite</span>
       </p>
       <p class="champs">
         <label class="float">Site Web </label>
         <span><input type='text' name='url' id='url' size='30' maxlength='100' value='http://localhost/mon_beau_site/' /> </span>
       <p class="champs">
         <label class="float"> </label>
         <span><input class="submit" type="submit" value="enregistrer" /></span>
       </p>
     </form>
   </div>
   <hr class="spacer" />
 </div>
 <div id="footer">Footer</div>
</div>
</body>
</html>

Et le code CSS :

* {
 margin: 0;
 padding: 0;
}
img {
 border: 0 none;
}
a {
 text-decoration: none;
}
a:hover {
 text-decoration: underline;
}
.spacer {
 clear: both;
 visibility: hidden;
}
/* Header */
#header {
 background : rgb(208,220,232) url(img/logo.gif) no-repeat center top;
 color: black;
 text-align: center;
 height: 100px;
 line-height: 100px;
}
#header h1 {
 display: none;
}
/* Page et Contenu */
#conteneur {
 background-color: gray;
 color: black;
 text-align:center;
}
#contenu {
 position: relative;
 background-color: green;
 color: black;
 margin: 0 140px 0 140px;
 padding: 0 10px;
 text-align:left;
}
/* Footer */
#footer {
 clear: both;
 background-color: yellow;
 color: black;
 text-align: center;
}
/* Menu horizontal */
#menuH {
 text-align:left;
 background-color: gray;
 color: black;
 height: 30px;
 line-height: 30px;
 width: 278px;
 margin: 0 auto;
}
#menuH li {
 float: left;
 margin: 8px 2px 0 2px;
 list-style-type: none;
}
#menuH li span {
 display: none;
}
#lien1 a, #lien2 a, #lien3 a {
 display: block;
}
#lien1 a {
 background : url(img/rss.jpg) no-repeat center center;
}
#lien2 a {
 background : url(img/google.jpg) no-repeat center center;
}
#lien3 a {
 background : url(img/firefox.jpg) no-repeat center center;
}
#menuH a {
 width: 88px;
 height: 15px;
 display: block;
}
#menuH a:hover {
 text-decoration: none;
}
/* Menus verticaux */
#menuV {
 float: left;
}
#menuV2 {
 float: right;
}
#menuV, #menuV2 {
 background-color: red;
 color: black;
 width: 140px;
 text-align: center;
}
#menuV ul, #menuV2 ul {
 text-align: left;
 margin: 0 10px;
}
#menuV li, #menuV2 li {
 display: list-item;
 list-style-position: inside;
 list-style-type: square;
}
/* formulaires */
.formulaire {
 margin: 0 0 1em 0;
	padding : 1em;
	border: solid 1px #98aab1;
	background-color : rgb(234,237,244);
}
.formulaire h2 {
 padding: 1em;
	border: solid 1px #98aab1;
	background-color :rgb(192,207,225);
	text-align:center;
}
p.champs {
/*clear:left;*/
	margin : 0.4em 0 0 0;
	padding : 1em;
	border: solid 1px #98aab1;
	height:1%; /* correction pour IE */
	background-color : white;
}
label.float {
/*	position : relative;*/
	float : left;
	width : 35%;
	background-color : cyan;
}
p.champs span {
 display: block;
 margin-left: 35%;
 padding: 0 1%;
 background-color : gray;
}

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 Smiley fache

J'ai essayé de mettre un clear:left dans le CSS sur la class "champs", pas mieux Smiley fache

Je tourne en rond deuis 2 jours et je suis à cours de solutions.

Pourriez-vous m'aider ?

Merci d'avance pour vos conseils.

@+ fafane84
Modifié par fafane84 (16 Jan 2006 - 23:18)

Laurent Denis

16 Jan 2006 à 22:14

Bonjour,

Ajouter overflow:auto (ou hidden, au choix) à p.champs pour le forcer à s'étendre en hauteur à ses descendants flottants (voir FAQ du forum)

Attention: ce sera incompatible avec le hack height:1% pour IE Windows dans IE5.0 Win : le contenu de p.champs sera écrasé. Pour éviter ce genre de mésaventure, toujours placer ces hacks en commentaires conditionnels (voir FAQ du forum), ce qui permettra d'écrire pour IE Win, dans la CSS en commentaires conditionnels :


p.champs {
height: 1%;
overflow: visible;
}

fafane84

16 Jan 2006 à 23:17

Merci beaucoup Smiley clapclap

Voici les modification que j'ai apporté à ma feuille de style :

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.*/

Les modifications que tu m'avais indiquées ont générées le bug de 3px qui provoque un décalage juste après le menu flottant de gauche, mais çà aussi c'est corrigé.

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

Encore merci !!!

@+ fafane84.
Modifié par fafane84 (16 Jan 2006 - 23:20)

Sujet clos