20px au début ok mais 20px à la fin ?

**{F-I}** · 30/03/2007, 10h14

Salutations,

J'aimerais bien savoir comment on code pour en arriver à là :

Avoir une mage vide de 20 px entre "la fin de bordure" et "la fin de fenêtre"...

Je m'explique, en codant margin-top: 20px;, ça nous permet d'avoir une marge vide en haut du bordure, la marge se situe entre "début de la fenetre" et "début du bordure", facile...

Là, je veux avoir le même résultat mais pour la fin de la page...

Je ne sais pas quoi faire, sachant qu'il faut prendre en compte s'il y a pleins textes, ou bien qu'il n'y a seulement deux lignes de texte, la fin de bordure doit toujours afficher 20px avant de la fin de la fenetre...

Vous comprendez de ce que je veux dire ?

Amicalement

**Bisûnûrs** · 30/03/2007, 10h35

margin-bottom ?

**{F-I}** · 30/03/2007, 12h15

J'avais essayé sans succès...

Voici la page en question et voici la CSS en question

J'ai mis à votre disposition les deux fichiers afin de vous faciliter la recherche d'une solution pour moi

Merci d'avance

**Bisûnûrs** · 30/03/2007, 12h22

J'ai pas capté ...

Tu veux que ton cadre prenne toute la fenêtre c'est ça ?

**{F-I}** · 30/03/2007, 18h20

Oui, j'aimerais bien que le "bordure" du "cadre" se finisse à 20 px avant la fin de la fenêtre

**Macintoc** · 02/04/2007, 15h19

Si y a une solution, je suis preneur.
J'ai pas trouvé d'autres méthode que de faire (basiquement) :

Code :

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

element.style.height=element.parentNode.innerHeight-element.style.marginTop*2

en JS. J'ai laissé tomber cette méthode étant donné qu'on peut arriver très facilement a des calculs ridicules lorsqu'il faut prendre en compte tous les sous-éléments (ainsi que leur marge s'il y en a) intervenant dans la hauteur de l'élément parent.

**blueice** · 02/04/2007, 16h13

Code css :

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

1
2
 
bottom:20px;

**Macintoc** · 02/04/2007, 16h59

J'ai pas l'impression que ce soit prit en compte si on ne définie pas une hauteur

[edit]Peut-être parlé trop vite, moi

[/edit]

[edit]J'ai pas l'impression que ce soit prit en compte si on est en relative

Et je penses pas avoir parler trop vite, cette fois-ci

[/edit]

**blueice** · 02/04/2007, 17h35

Au fait tu souhaites avoir un cadre avec une hauteur de 100% et qui se finisse à 20px du bas, si je pige bien.

Voici la solution :
http://www.456bereastreet.com/archiv...v2_fullheight/

**Macintoc** · 03/04/2007, 10h59

Bottom fonctionne correctement. Faut juste être en position absolute pour le cadre extérieur, mais finalement, ça gène pas étant donnée que la position de ce cadre n'est pas censé bouger

**{F-I}** · 07/04/2007, 08h36

Salut,

Me revoici, j'étais privé d'internet...

Bref, blueice, je te remercie pour lien mais je ne comprends pas comment faire ^^"

Macintoc, tu veux dire que je dois mettre position: absolute dans #cadre ? (je n'ai pas réussi non plus)

**Candygirl** · 07/04/2007, 16h48

Hello,

je ne suis pas sûre d'avoir bien compris le comportement que tu souhaites au cas où le texte dépasse la hauteur de la fenêtre...

Est ce que cet exemple correspondrait à ce que tu souhaites ?

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>cadre 20px</title>
<style type="text/css">
 
* {margin:0;padding:0;}
 
html,body {height:100%;}
 
#main {
        min-height:100%;
        margin:0 20px;
        border:1px solid black;
        border-width:0 1px;
}
 
* html #main {height:100%;} /* min-height pour IE6 */
 
#borderbot {
        background-color:#FFF;
        margin: -21px 20px 0;
        height:20px;
        border-top:1px solid #000;
}
 
#bordertop {
        background-color:#FFF;
        position:relative;
        margin:0 20px -21px;
        height:20px;
        border-bottom:1px solid #000;
}
 
</style>
</head>
 
<body>
  <div id="bordertop"></div>
  <div id="main"></div>
  <div id="borderbot"></div>
</body>
</html>

Ou alors ça ? (il faudrait compenser avec du js pour faire fonctionner sur IE6):

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
 
* {margin:0;padding:0;}
 
html,body {height:100%;}
 
#main {
  position:absolute;
        top:20px;bottom:20px;left:20px;right:20px;
        border:1px solid black;
        overflow:auto;
}
 
 
</style>
</head>
 
<body>
<div id="main"></div>
</body>
</html>

**{F-I}** · 08/04/2007, 01h00

Merci c'est ton premier code parmi deux qui me souhaite

**Macintoc** · 10/04/2007, 15h55

En ce qui me concerne, j'ai fais :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Document sans nom</title>
		<style type="text/css">
			div.conteneur{
				position:absolute;
				top:20px;
				bottom:20px;
				left:20px;
				right:20px;
				background-color:#FF0000 /*pour qu'on voit bien les bordures*/
			}
		</style>
	</head>
	<body>
		<div class="conteneur"></div>
	</body>
</html>

20px au début ok mais 20px à la fin ?

CSS

Discussions similaires

Partager

Partager