Placement d'un tableau non fixe.

Version imprimable

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:

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:

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.

http://nsa20.casimages.com/img/2010/...5418634593.gif

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 ! :)

Salut,

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

Code:

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:

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é

28/12/2010, 23h15
Vict0

Merci beaucoup, ça fonctionne parfaitement !
29/12/2010, 15h16
Vict0

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 :calim2:

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

T'as testé sous IE chez toi ?
30/12/2010, 13h04
Vict0

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. :) :ccool: