Discussion :

[the5et]

Bonjour, ou bonsoir,

je rédige ce message car je suis bloqué au niveau du CSS de 2 balises DIV qui s'adpate à la taille de l'écran de l'utilisateur. Pour expliquer mon problème j'ai réalisé rapidement un brouillon:




Pour le petit 1 : j'aimerai pouvoir le coller en bas de l'écran de l'utilisation sans qu'il puissent descend avec la roulette de sa souris et qui garde les 50px entre lui et la forme qui est juste au dessus de lui, ce que je n'arrive pas à faire actuellement.

Pour le petit 2 : j'aimerai que le DIV (qui sera le footer) soit situer à 50px du bas de l'écran de l'utilisateur car actuellement il se déplace en fonction du contenu et laisse 8px de vide entre le début de l'écran et le début du DIV et c'est pareil pour la fin du DIV.

Je vous remercie d'avance pour vos futurs réponses

[black-hawk-down]

Salut,

Il faut que tu utilises les propriétés de positionnement si j'ai bien compris ta demande.

Le prochain coup poste ton HTML/CSS qu'on voit où tu en es.

[the5et]

Voila le code que j'utilise pour mes DIV.

Le "tchat" correspond a la forme 1, le "login" correspond à la forme qui est au dessus de la forme 1 et le "footer" correspond, bin, au footer

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
.login {
	position: absolute;
	top : 0px;
	margin-top : 0px;
	float : none;
	margin-left: 30px;
	z-index: 4;
	height: 16%;
	width: 400px;
	background-color: #00cfcf;
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-bottomleft: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	left: 8px;
	color::black;
 
}
 
.tchat {
	margin-left:30px;
	position:absolute;
	bottom : 0px;
	margin-bottom : 0px;
	float : none; 
	z-index:4;
	height:82%;
	width:400px;
	background-color:#00cfcf;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px; 
}
 
 
.footer {
	background-color: #616161;
	z-index:3;
	width:100%;
	margin-top:30px;
	left:0;
	margin-left : 0px;
	margin-right : 0px;
	right:0;
	height:50px;
 
}

[adiGuba]

Salut,

Premièrement pour éviter les espaces au bord de la fenêtre, il ne faut pas oublier d'enlever les margin/padding des éléments html/body :

Code :

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

1
2
3
html, body {
    margin: 0; padding: 0;
}

Pour le petit 1 : j'aimerai pouvoir le coller en bas de l'écran de l'utilisation sans qu'il puissent descend avec la roulette de sa souris et qui garde les 50px entre lui et la forme qui est juste au dessus de lui, ce que je n'arrive pas à faire actuellement.

Pour qu'ils ne scrollent il suffit de mettre ces éléments en fixed au lieu d'absolute.
(ou bien de fixer la taille du body et d'être sûr qu'il ne dépassera pas celui de ne fenêtre)


Pour les 50px d'écart tu as deux solutions.
D'abord je te conseillerais de positionner les éléments uniquement avec top/left/right/bottom sans margin si possible.
Le bloc login serait positionné comme cela :

Code :

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

1
2
3
4
5
6
.login {
	position: fixed;
	top : 0; left : 30px;
	height: 16%;
	width: 400px;
}

La solution la plus simple consiste à utiliser calc() pour positionner le second panneau :

Code :

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

1
2
3
4
5
	position:fixed;
    top: calc(16% + 50px);
    bottom : 0;
    left:30px;
}

Toutefois calc() n'est pas supporté par certains vieux navigateurs.
Mais on peut faire la même chose avec un margin-top :

Code :

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

1
2
3
4
5
6
7
.tchat {
	position: fixed;
    top: 16%;
    bottom: 0;
    left: 30px;
    margin-top: 50px;
}

Pour le petit 2 : j'aimerai que le DIV (qui sera le footer) soit situer à 50px du bas de l'écran de l'utilisateur car actuellement il se déplace en fonction du contenu et laisse 8px de vide entre le début de l'écran et le début du DIV et c'est pareil pour la fin du DIV.

Les 8px de vide sont dû aux margin/padding du html/body (cf ma première remarque).

Pour le reste il suffit de le positionner adéquatement en fixed :

Code :

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

1
2
3
4
5
6
.footer {
    position: absolute;
    left: 0; right: 0;
    bottom: 50px;
    height: 50px;
}

Exemple : http://jsfiddle.net/adiGuba/43sLL7wx/embedded/result/ (le double-scroll est dû à jsfiddle, il n'y en a pas dans un page "normale")
Code : http://jsfiddle.net/adiGuba/43sLL7wx/


a++

[the5et]

Merci pour ta réponse complète

Je vais essayé ça tout de suite. Si ta solution fonctionne, je passe le statut de la discussion en "Résolu"

[black-hawk-down]

Pour le reste il suffit de le positionner adéquatement en fixed :

Code :

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

1
2
3
4
5
6
.footer {
    position: absolute;
    left: 0; right: 0;
    bottom: 50px;
    height: 50px;
}

Exemple : http://jsfiddle.net/adiGuba/43sLL7wx/embedded/result/ (le double-scroll est dû à jsfiddle, il n'y en a pas dans un page "normale")
Code : http://jsfiddle.net/adiGuba/43sLL7wx/


a++

Attention, tu indiques, à juste titre de positionner l'élément en fixed, mais dans ton code, tu le mets en absolute !

[adiGuba]

Attention, tu indiques, à juste titre de positionner l'élément en fixed, mais dans ton code, tu le mets en absolute !

Oui en effet il faut bien mettre "position: fixed" !


a++