Discussion :

[bogsy15]

Bonjour tout le monde,

j'ai une div "conteneur" qui contient la plupart de mes autres div. J'arrive à déplacer ce conteneur à 5px du bord du haut

Code :

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

top:5px;

mais cela ne fonctionne pas pour le bord du bas.

Voici le code 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
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
body
{
	background-color:#EEEEEE;
}
 
/* Le conteneur */
 
#conteneur
{
	position:absolute;
	width:972px;
	background-color: #EEEEEE;
	left:50%;
	margin-left: -486px;
	top:5px;
	bottom:10px;
}
 
/* L'en-tête */
 
#en_tete
{
	width:972px;
	height:100px;
	background-image:url(Images/essai.jpg);
	background-repeat:no-repeat;
}
 
/* Le menu */
 
#barre_menu
{
}
dl, dt, dd, ul, li 
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#menu 
{
	position:absolute;
}
#menu dl 
{
	float: left;
	width: 162px;
}
#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background: #CCFFCC;
	border: 1px solid black;
}
#menu dd 
{
	border: 1px solid black;
}
#menu li 
{
	text-align: center;
	font-weight:bold;
	background: #EEEEEE;
}
#menu li a, #menu dt a 
{
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
}
#menu li a:hover, #menu dt a:hover 
{
	background: #CCFFCC;
}
a 
{
	text-decoration: none;
	color: black;
	color: #222;
}
 
/* Le corps de la page */
 
#corps
{
	color:#000000;
	background-color:#CCCCFF;
	padding-top:15px;
	padding-left:7px;
	padding-right:7px;
	padding-bottom:7px;
}
 
/* Le pied de page */
 
#pied_de_page
{
	text-align:center;
	color:#000000;
	height:22px;
	background-image:url(Images/footer_972.jpg);
	bottom:50px;
}

Quelq'un peut-il m'aider ?
Merci

[Strix]

Salut.

A mon avis c'est tout simplement un conflit entre top et bottom.
Ton conteneur va bouger suivant l'un ou l'autre mais pas les 2 en même temps !
C'est comme ça que je le vois.

[bogsy15]

oui mais il doit bient être possible de pouvoir mettre une marge en haut et en bas. Il me semble que j'ai deja vu cela.

[BnA]

TOP et BOTTOM (ainsi que LEFT et RIGHT) définissent le décalage entre le bord de la marge extérieure de l'élément PARENT et le bord de ton bloc.

Si tu veux une marge, utilise MARGIN-TOP et MARGIN-BOTTOM (e.a.).

[Candygirl]

mais cela ne fonctionne pas pour le bord du bas.

Avec quel navigateur as-tu testé ? IE6 n'est pas capable de déterminer la hauteur lors de la spécification du top et du bottom. Par contre cela ne devrait pas poser de problème sur les autres navigateurs.

Maintenant je ne sais pas à quel contexte du destine ce montage, afin de déterminer si il est vraiment viable. En centrant ton conteneur à l'aide des marges négatives, tu t'exposes à voir disparaître irrémédiablement une partie de ton contenu lorsque la taille de la fenêtre est inférieure à tes 972px (= pour tous les utilisateurs en 800x600). De même si ton contenu dépasse la hauteur de la fenêtre ta mise en page risque d'en souffrir.

[BnA]

En même temps, maintenant le 800*600 est désuet/obsolète/minoritaire (barrez les mentions inutiles).

Bon, je sais qu'il faut prendre en compte le maximum de personnes, mais ça fait un bail que j'ai plus fait de site pour 800*600.

Mais c'est également vrai que c'est un autre débat!

[Candygirl]

En même temps, maintenant le 800*600 est désuet/obsolète/minoritaire (barrez les mentions inutiles).

Je barre obsolète et désuet. Le 800x600 est un fait, certes minoritaire, chez un certain nombre de personnes, que cela soit parce qu'il ont une vieille machine ou une mauvais vue et préfèrent donc adopter une basse résolution sur un grand écran. De même ceratins ont beau avoir du 1024x768, l'espace allouée au site peut être réduite à cause de l'affichage d'une barre latérale, par exemple.

Bon, je sais qu'il faut prendre en compte le maximum de personnes, mais ça fait un bail que j'ai plus fait de site pour 800*600

Qu'entends-tu par "ne plus faire de site pour 800x600" ? Si le site est consultable mais requière l'utilisation de la scrollbare, ce n'est pas pratique, mais le site reste utilisable.

Là, avec le centrage en absolu avec le margin négatif, la partie gauche du contenu disparaît et n'est pas accessible avec la scrollbare. Pour peu que le menu soit à gauche, c'est tout le site qui est inutilisable. C'est quand même dommage de se priver d'une partie des visiteurs quand on peut faire autrement...

[BnA]

Oui, quand je dis que je ne fais plus de site pour 800*600 depuis assez longtemps, je veux dire que je prends 960px en largeur (et donc pour minimum 1024), mais ça va de soi que le site reste consultable quelque soit la résolution utilisée.

Ce qui pose problème dans le cas de bogsy15, c'est la méthode utilisée pour le centrage.

Si je peux me permettre (je me permets), je ferais ceci:

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
 
body {
  margin : 0px; 
  padding : 0px;
  text-align: center;
  background-color: #EEEEEE;
}
 
#conteneur {
  margin: 10px auto;
  width : 960px;      /* pour 1024 */
  text-align : left; 
  background-color: #EEEEEE;
  position:relative;    /*facultatif */
}

Et dans ce cas-ci, si je ne me trompe pas, le site reste consultable en 800*600 avec les scrollbar...

[bogsy15]

En fait c'est une application interne à un laboratoire d'analyses médicales. Tous les postes sont au minimum en 1024. Mais à la fin du mois d'Août je devrais aller déployer cette application sur les autres laboratoires associés, et la je ne sais pas quelles résolutions ils utilisent.
Donc je devrais mieux mettre une largeur de 960px; au cas ou la résolution soit en 800*600.

Si je met un bottom:5px au conteneur, la partie haute de l'application reste inaccessible (la scrollbar non dispo).

Donc si ce n'est pas possible, je pense que je vais rester avec un écart en haut et aucun en bas.

Sinon je peut mettre un margin-bottom à ma div pied-de-page et mettre la meme couleur de font entre le body et le conteneur.