Comportement bizarre d'un conteneur

**Sub0** · 02/02/2008, 23h30

Salut!

Je programme un espace membre. Je n'arrive pas à obtenir un conteneur comme je veux. Je veux avoir un conteneur qui puisse être entre 2 mots (Le début...[Conteneur]...la suite).

Voici une capture du résultat avec Firefox; "...la suite" se retrouve dans le conteneur alors qu'il devrait être à la suite du conteneur, en haut à droite, au même niveau que "Le début..." :

Avec IE6, "...la suite" a carrément disparu!

Voici le code, si vous pouviez m'aider, ça serait cool :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<style type="text/css">
<!--
.espmem_form {
  background:#DDDDDD;border:2px solid black;
  position:absolute;text-align:right;
  font-family:"arial";font-size:12px;color:black;padding:10px;
}
.espmem_btn {
  background:#EEEEEE;border:1px solid black;
  font-family:"arial black";font-size:11px;color:black;margin-bottom:2px;
}
.espmem_in {
  background:#EEEEEE;border:1px solid black;
  font-family:"arial";font-size:12px;color:black;margin-bottom:1px;
  padding-left:3px;padding-right:3px;
}
-->
</style>
 
Le début...
<span class="espmem_form">
  <div>
    <form enctype="multipart/form-data" method="post" style="margin:0px;padding:0;">
      <div style="text-align:right;">
        <label for="pseudo">Pseudo &nbsp;</label>
        <input type="text" name="pseudo" id="pseudo" class="espmem_in" value="" maxlength="10" size="12"/>
      <div/>
      <div style="text-align:right;">
        <label for="mdp">Password &nbsp;</label>
        <input type="password" name="mdp" id="mdp" class="espmem_in" value="" maxlength="12" size="12"/>
      <div/>
      <div style="text-align:center;">
        <br/>
        <input type="submit" name="act" class="espmem_btn" value="CONNECTION"/>
      </div>
    </form>
  </div>
</span>...la suite

**bigboomshakala** · 03/02/2008, 00h35

hello,

testé sur IE/Opéra/FF
(sur IE, léger décalage dans l'alignement)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>
<head>
<style type="text/css">
<!--
.espmem_form {
  background:#DDDDDD;border:2px solid black;
text-align:right;
  font-family:"arial";font-size:12px;color:black;padding:10px;
}
.espmem_btn {
  background:#EEEEEE;border:1px solid black;
  font-family:"arial black";font-size:11px;color:black;margin-bottom:2px;
}
.espmem_in {
  background:#EEEEEE;border:1px solid black;
  font-family:"arial";font-size:12px;color:black;margin-bottom:1px;
  padding-left:3px;padding-right:3px;
}
-->
</style>
</head> 
<body>
<table>
<tr>
<td>
Le début...
</td>
<td>
  <div class="espmem_form">
    <form enctype="multipart/form-data" method="post" style="margin:0px;padding:0;">
      <div style="text-align:right;">
        <label for="pseudo">Pseudo &nbsp;</label>
        <input type="text" name="pseudo" id="pseudo" class="espmem_in" value="" maxlength="10" size="12"/>
        <br/>
        <nobr>
        <label for="mdp">Password &nbsp;</label>
        <input type="password" name="mdp" id="mdp" class="espmem_in" value="" maxlength="12" size="12"/>
        </nobr>
      </div>
      <br/>
      <div style="text-align:center;">
        <input type="submit" name="act" class="espmem_btn" value="CONNECTION"/>
      </div>
    </form>
  </div>
</td>
<td>
...la suite
</td>
</tr>
</table>
</body>
</html>

**Sub0** · 03/02/2008, 01h43

Merci pour cette réponse. Hélas, ce n'est pas vraiment ce que j'attendais puisque l'utilisation d'autres conteneur pour "Le début..." et "...la suite" ne sont pas possible dans ce projet. De plus, l'utilisation de tableaux ne me convient pas, je ne peux pas les utiliser. Je peux vous paraître exigent, mais ce sont des consignes qui m'ont été données.

**bigboomshakala** · 03/02/2008, 01h51

il y a moyen d'obtenir le meme visuel en utilisant des div au lieu de la table, avec des positionnements absolues je pense (donc un truc à positionner soi-même). en dehors de ça je ne vois pas comment on peut obtenir le résultat que tu attends

si quelqu'un a un truc

**Sub0** · 03/02/2008, 02h21

Envoyé par bigboomshakala

il y a moyen d'obtenir le meme visuel en utilisant des div au lieu de la table, avec des positionnements absolues je pense (donc un truc à positionner soi-même).

Ok, maintenant, si je remplace le span par un div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
Le début...
<div class="espmem_form">
  <form...
 
  </form>
</div>
...la suite

j'obtiens le même affichage avec FF qu'avec IE. Seulement, "...la suite" est dans le conteneur alors qu'elle ne devrait pas s'y trouver normalement puisque dans le code, ce texte est bien en dehors des balises du div... Si on arrivait au moins à résoudre ce "bug", je considèrerais que le problème est résolu.

**Sub0** · 03/02/2008, 02h57

C'est bon, j'ai trouvé pourquoi "...la suite" se retrouvait dans le conteneur. J'avais mal écrit mon code, j'ai mis <div/> au lieu de </div>...

quel idiot je suis des fois!

**hellspawn_ludo** · 03/02/2008, 03h04

Bonsoir Sub0,

J'ai modifié ton code et au final ça fonctionne sur IE7 et Firefox. Le problème était dû au position:absolute.

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
.espmem_form {  float:left;
                background:green;
                border:2px solid black; ; 
                /*position:absolute;*/
                text-align:right;
                font-family:"arial";font-size:12px;color:black;
                padding:10px;
}
.espmem_btn {   background:red;
                border:1px solid black;
                font-family:"arial black";font-size:11px;color:black;
                margin-bottom:2px;
}
.espmem_in {    background:gray;
                border:1px solid black;
                font-family:"arial";font-size:12px;color:black;
                margin-bottom:1px;
                padding-left:3px;padding-right:3px;
 
}
 
.texte  {float:left;}

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<p class="texte">Le début...</p>
 
<span class="espmem_form">
 
 
    <form enctype="multipart/form-data" method="post" style="margin:0px;padding:0;">
 
      <div>
        <label for="pseudo">Pseudo</label>
        <input type="text" name="pseudo" id="pseudo" class="espmem_in" value="" maxlength="10" size="12"/>
      </div>
 
      <div>
        <label for="mdp">Password &nbsp;</label>
        <input type="password" name="mdp" id="mdp" class="espmem_in" value="" maxlength="12" size="12"/>
      </div>
 
      <div style="text-align:center;">
        <br/>
        <input type="submit" name="act" class="espmem_btn" value="CONNECTION"/>
      </div>
 
 
    </form>
 
 
</span>
 
<p class="texte">...la suite</p>

Fait attention avec tes fermetures de div. Tu avais écrit <div/> au lieu de </div>

Bref, je pense que c'est ce que tu voulais.

A +.

**Sub0** · 06/02/2008, 15h00

Je réouvre le sujet parce-que j'ai besoin de centrer le conteneur dans la page, seulement, les Divs ne s'ajustent pas au contenu...

Il faut aussi que je garde les champs de saisie justifiés à droite.

Peut-être avez-vous une autre solution que les tableaux...?

**Lidya** · 06/02/2008, 18h24

Je sais pas si j'ai bien compris ce que tu veux faire mais en gros tu veux avoir des div a droite, et une au centre, avec un contenu centré ?

Si c'est le cas tu peux le faire comme cela :

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
      .both {
            display: both;
      }
      #rightBox {
            width: 200px;
            float: left;
      }
      #leftBox {
            float: left;
            text-align: justify;
      }

HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div id="rightBox">
      Contenu de droite.
</div>
<div id="leftbox">
      Contenu de gauche.
</div>
<div class="both"></div>

En espérant t'avoir aider.

**Sub0** · 06/02/2008, 19h06

Merci pour ta réponse rapide Lidya. Hélas, ce n'est pas ce que je recherche. Je vais essayer d'expliquer un peu plus mon problème. Il faut que j'arrive à obtenir un conteneur (<div>, <span>, ou <p> peu importe) :

1) centré dans la page -> La position left de ce conteneur s'ajuste alors automatiquement lorsqu'on redimensionne la largeur de la fenêtre. Un peu comme si on pouvait mettre "float:center"...

2) dont la largeur s'ajuste automatiquement au contenu.

3) Avec un contenu justifié à droite

Voici un exemple du résultat que je souhaite obtenir :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<table align="center">
  <tr>
    <td style="background:#DDDDDD;text-align:right;">
      Contenu justifié à droite <br/>
      Contenu plus long justifié à droite <br/>
    </td>
  </tr>
</table>

Le seul problème, c'est que je n'ai pas le droit d'utiliser les tableaux... Je ne peux pas définir de largeur ou position en pixel puisque le contenu change...

**Lidya** · 06/02/2008, 20h49

C'est bourrin.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<style type="text/css">
	#content {
		position: absolute;
		border: 1px solid red;
		background:#DDDDDD;text-align:right;
	}
</style>
 
<div id="content">
  		Contenu justifié à droite <br/>
 	 	Contenu plus long justifié à droite <br/>
</div>
 
<script language="javascript"> 
	content = document.getElementById("content")
	var x = content.clientWidth;
	content.style.width = x+"px";
	content.style.margin="0 auto";
	content.style.position="relative";
</script>

**Sub0** · 06/02/2008, 21h35

ok, je me doutais aussi de la solution d'utiliser Javascript et tu as raison, c'est "bourrin", cela dit, ta façon de faire est remarquable, tu t'en sors vraiment bien je trouve.

Donc pour résumé, ce n'est pas possible de le faire avec uniquement du CSS et sans utiliser les tables. C'est justement ce qui m'énerve dans les propos des développeurs qui affirment que les divs peuvent remplacer les tables... Comme je l'ai dit dans ce message, le fameux standart W3C est restrictif, il déconseille l'utilisation des tables mais ne propose pas grand chose en contre-partie. C'est aussi un peu le même problème avec les iframes, elles sont déconseillées dans le W3C mais pourtant, elles sont super pratiques (et irremplaçables ?)... C'est de l'ajax en fait.

Bref. En tous les cas, je te remercie beaucoups pour tes efforts, tu as fait tout ce qu'il était possible et c'est remarquable !

Cordialement, Sub0

**Lidya** · 07/02/2008, 08h25

Pöur moi les div ne remplacent pas les tables.

J'utilise les tableaux pour ordonner des résultats, et les div pour mettre en page, cependant, dans le rare cas ou le div ne suffirait pas, je me permet d'utiliser des tableaux, cependant, par soucis de garder une sémantique correcte, j'essaye d'éviter. le JavaScript est parfois une bonne alternative

**Candygirl** · 07/02/2008, 09h03

Tu peux faire quelque chose du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
div {float:right;position:relative;right:50%;}
p {border:1px solid black;text-align:right;position:relative;left:50%;}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div>
  <p>Contenu justifié à droite <br/>
  Contenu plus long justifié à droite <br/>
  </p>
</div>

**Lidya** · 07/02/2008, 09h37

Bonne solution, je n'y avais pas penser, merci.

**Sub0** · 08/02/2008, 02h46

Une dernière chose:

Sauriez-vous maintenant comment faire pour centrer verticalement ce conteneur de façon à ce qu'il se retrouve bien au milieu de la page quelque soit son contenu ?

**Lidya** · 08/02/2008, 10h27

C'est plus délicat, je vais y réfléchir, j'édite ce post quand j'ai une solution viable

**Sub0** · 08/02/2008, 12h16

Pour info, j'ai commencer une QR à ce sujet, mais elle n'est pas vraiment complète si le conteneur n'est pas centré verticalement...

A noter que j'ai remplacé la balise <p> par un <div> afin d'obtenir un résultat parfait avec n'importe quel contenu. Et même si tu dois ajouter des <div> suplémentaires pour obtenir l'alignement vertical, ce n'est pas un problème.

Merci de votre aide.

**Candygirl** · 08/02/2008, 15h26

Le centrage vertical est plus problématique vu le comportement par défaut différent et la contrainte de l'utilisation des % liée à un height explicitement défini sur le parent.

Le display:table et table-celle est une bonne manière d'y parvenir, mis à part le non support par IE:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
html, body {
  display:table;
  width:100%;
  height:100%;
}
 
body {
  display:table-cell;
  vertical-align:middle;
}

On peut combler pour IE, par exemple à l'aide de JS directement injecté ds le css, via un commentaire conditionnel; qqch du genre:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<!--[if IE]>
 
  <style type="text/css">
                div {
                        position:relative;
                        top:expression(document.body.clientHeight<=this.offsetHeight ? "0" : (document.body.clientHeight-this.offsetHeight)/2+"px");
                }
        </style>
<![endif]-->

Autrement si la hauteur est connue (contraignant), on peut utiliser la technique du margin négatif doublé du positionnement relatif, mais il faudra être attentif au cas critique ou l'élément est plus haut que la fenêtre (un min-height de la hauteur de l'élément sur le body suffit, il me semble, à règler le pb sauf sur IE6-).

Le plus simple à mettre en oeuvre et compatible tous nav niveau centrage vertical reste l'utilisation d'un tableau

**Sub0** · 10/02/2008, 02h57

Merci Candygirl pour ta réponse. Je vais regarder tout ça tranquillement...

Je reviens juste un moment sur l'alignement horizontal car j'ai un petit souci avec IE (encore lui!). Le code suivant, qui est pourtant très basique, me pose un petit problème avec IE6 : Apparemment, il faudrait ajouter "float=left" au 2ème conteneur pour obtenir le bon alignement des éléments. Le hic, c'est qu'avec cette modif, j'obtiens exactement le même problème mais avec Firefox cette fois... Vous me direz, je pourrais ajouter des conditions , mais je préfère d'abord vous demander si il n'existerait pas une solution plus propre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div style="position:relative;right:50%;float:right;">
  <div style="position:relative;left:50%;float:left;">

      <div style="text-align:right;">

        <div>
          <label for="pseudo">Pseudo &nbsp;</label>
          <input type="text" value="" size="12"/>
        </div>

        <div>
          <label for="mdp">Password &nbsp;</label>
          <input type="password" value="" size="12"/>
        </div>

        <div>
          <label for="email">E-mail &nbsp;</label>
          <input type="text" value="" size="12"/>
        </div>

      </div>
      <div style="text-align:center;">

        <br/><input type="submit" value="INSCRIPTION"/>
        <br/><input type="submit" value="ANNULER"/>

      </div>

  </div>
</div>

Merci de votre aide.

Comportement bizarre d'un conteneur

CSS

Discussions similaires

Partager

Partager