Placement d'un tableau non fixe.

**Vict0** · 28/12/2010, 15h08

Bonjour,

Je me suis lancé dans un design extensible pour mon dernier projet.
Malheureusement, je rencontre quelques problèmes dans le placement d'éléments du site.

J'ai un tableau qui contient un formulaire :

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
<!DOCTYPE html> 
<html lang="fr"> 
    <head> 
        <title>Expose ta mode - <?php echo $title; ?></title> 
        <link rel="stylesheet" media="screen" type="text/css" title="Design" href="../design/design.css" /> 
    </head> 
    <body> 
        <header> 
            <!-- Formlaire de connexion --> 
            <table> 
                <form> 
                    <tr> 
                        <td style="font-size:12px;">Pseudo :</td> 
                        <td colspan="2"><input type="text" name="pseudo" class="ChampConnexion" /></td> 
                    </tr> 
                    <tr> 
                        <td style="font-size:12px;">Mot de passe</td> 
                        <td colspan="2"><input type="password" name="MotDePasse" class="ChampConnexion" /></td> 
                    </tr> 
                    <tr> 
                        <td style="font-size:12px;">Rester connecter</td> 
                        <td><input type="checkbox" name="ResterConnecter" /></td> 
                        <td rowspan="2" align="right"><input type="submit" class="BoutonConnexion" value="" /></td> 
                    </tr> 
                    <tr> 
                        <td colspan="2" style="font-size:10px;" ><a href="" class="MotDePasseOublie">J'ai oublié mon mot de passe.</a></td> 
                    </tr> 
                </form> 
            </table> 
            <!-- Formlaire de connexion --> 
 
        </header> 
 
        <nav> 
        </nav> 
 
        <div id="contenu"> 
        </div> 
    </body> 
</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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
body{ 
    margin:0; 
    padding:0; 
    font-family:Arial; 
    background:url('images/fond-banniere.png') repeat-x;     
} 
 
header{ 
    display:block; 
    background:url('images/banniere.png') no-repeat; 
    height:150px; 
    width:1024px; 
} 
 
header table{ 
    width:370px; 
    background-color:black; 
    color:#808080; 
    border:none; 
} 
 
header table form{ 
    text-align:center; 
} 
 
.ChampConnexion{ 
    background:url('images/champ.png') no-repeat; 
    border:none; 
    width:239px; 
    height:16px; 
    padding:4px; 
    margin-top:10px; 
} 
 
.BoutonConnexion{ 
    background:url('images/connexion.png') no-repeat; 
    border:none; 
    width:118px; 
    height:27px; 
} 
 
.MotDePasseOublie{ 
    text-decoration:none; 
    color:#808080; 
} 
 
nav{ 
    display:block; 
    background:url('images/menu.png') no-repeat; 
    width:1047x; 
    height:96px; 
}

J'ai pris l'exemple du SDZ pour vous montrer le comportement que j'attends de mon tableau.

Je voudrais que celui-ci soit mobile lorsque l'on redimensionne la page, mais qu'une fois qu'il est ancrée dans un cadre de 1024px, il se fige dans la page pour ne pas superposer la bannière.

Cependant, je n'arrive pas à le faire en CSS.

Au passage, si vous avez des remarques ou des suppositions à faire çà propos de mon bout de script, je vous invite à le faire !

**ornitho13** · 28/12/2010, 21h01

Salut,

alors en fait il va falloir modifier un tout petit peu ta structure html:
(j'ai repris tout ton code)

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
39
40
41
42
43
44
45
46
 
<!DOCTYPE html> 
<html lang="fr"> 
    <head> 
        <title>Expose ta mode - </title> 
        <link rel="stylesheet" media="screen" type="text/css" title="Design" href="../design/design.css" /> 
    </head> 
    <body> 
    	<div id="wrapper">
	        <header> 
 
	        </header> 
 
	        <nav> 
	        </nav> 
 
	        <div id="contenu"> 
	        </div>
	        <div class="formulaire">
	            <!-- Formlaire de connexion --> 
	        	<table> 
	                <form> 
	                    <tr> 
	                        <td style="font-size:12px;">Pseudo :</td> 
	                        <td colspan="2"><input type="text" name="pseudo" class="ChampConnexion" /></td> 
	                    </tr> 
	                    <tr> 
	                        <td style="font-size:12px;">Mot de passe</td> 
	                        <td colspan="2"><input type="password" name="MotDePasse" class="ChampConnexion" /></td> 
	                    </tr> 
	                    <tr> 
	                        <td style="font-size:12px;">Rester connecter</td> 
	                        <td><input type="checkbox" name="ResterConnecter" /></td> 
	                        <td rowspan="2" align="right"><input type="submit" class="BoutonConnexion" value="" /></td> 
	                    </tr> 
	                    <tr> 
	                        <td colspan="2" style="font-size:10px;" ><a href="" class="MotDePasseOublie">J'ai oublié mon mot de passe.</a></td> 
	                    </tr> 
	                </form> 
	            </table> 
	            <!-- Formlaire de connexion --> 
        </div>
        </div> 
 
    </body> 
</html>

et voici le css à appliquer :

Code css :

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
54
55
56
57
58
59
60
61
62
63
64
 
body{ 
    margin:0; 
    padding:0; 
    font-family:Arial; 
    background:url('images/fond-banniere.png') repeat-x;     
} 
 
header{ 
    display:block; 
    background:url('images/banniere.png') no-repeat; 
    height:150px; 
    width:1024px; 
} 
 
.formulaire table{ 
    width:370px; 
    background-color:black; 
    color:#808080; 
    border:none; 
} 
 
header table form{ 
    text-align:center; 
} 
 
.ChampConnexion{ 
    background:url('images/champ.png') no-repeat; 
    border:none; 
    width:239px; 
    height:16px; 
    padding:4px; 
    margin-top:10px; 
} 
 
.BoutonConnexion{ 
    background:url('images/connexion.png') no-repeat; 
    border:none; 
    width:118px; 
    height:27px; 
} 
 
.MotDePasseOublie{ 
    text-decoration:none; 
    color:#808080; 
} 
 
nav{ 
    display:block; 
    background:url('images/menu.png') no-repeat; 
    width:1047x; 
    height:96px; 
}
#wrapper{
	position:relative;
	margin:0px auto;
	min-width:1024px;
	border:2px solid #ddd;
}
.formulaire{
	position:absolute;
	top:50px;
	right:0px;
}

j'ai testé et cela fonctionne, il faut utiliser la propriété min-width afin d'obtenir l'effet escompté

**Vict0** · 28/12/2010, 23h15

Merci beaucoup, ça fonctionne parfaitement !

**Vict0** · 29/12/2010, 15h16

Salut,

J'ai réglé un soucis qui empêchait la lecture de mon site avec IE. Et là, je vois que l'astuce ne fonctionne pas sous IE8

La scrollbar s'affiche bien en bas, mais le bloc ne se fige pas !

T'as testé sous IE chez toi ?

**Vict0** · 30/12/2010, 13h04

Salut.

Pour résoudre ce problème, je suis partit sur l'hypothèse que IE ne gère pas bien la propriété min-width.

En cherchant sur Google, je suis tombé là dessus : http://www.eklesia.net/spip.php?article115

width:expression(document.body.clientWidth < 1024 ? "1024px" : "auto" );

Problème résolu.

Placement d'un tableau non fixe.

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager