Hauteur du fond en fonction du contenu.

**JeanJean75** · 17/11/2009, 21h43

Bonsoir,

Je m'adresse à vous car je souhaiterais avoir un fond qui s'adapte en fonction de la taille du contenu de la page.

Je m'explique :

J'ai créer sous toshop un fond de 1300px sur 5px de hauteur.

en CSS, j'ai appliqué ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
	#body{
		background:url('images/repeat.png') repeat-y;
		height:100%;
		width:1300px;
		position:absolute;
		margin: auto;
		left: 50%; 
		margin-left: -650px; 
		margin-top:-8px;
	}

Le code est tout à fait fonctionnel, mais cependant, je viens de remarquer que le fond s'adaptait à la taille de la fenêtre et non du contenu. :/

Si vous savez comment faire, faites moi signe.

**12monkeys** · 17/11/2009, 23h57

Bonsoir

Il aurait été intéressant d'avoir ton code HTML aussi.

Mais le problème viens de ton height:100% : tu lui dit que ton id body doit faire 100% de la hauteur disponible...

http://css.developpez.com/faq/index....ur_pourcentage

**JeanJean75** · 18/11/2009, 00h13

Ok.

Alors pour le code HTML ->

Code :

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

1
2
3
4
5
6
7
8
 
 
<div id="body">
    <div id="silhouette">
        <div id="contenu">
        </div>    
    </div>
</div>

Pour des raisons de confidentialités, j'ai enlever tout ce qui figurait dans le contenue.

Edit : Que me propose tu comme solution ?

**12monkeys** · 18/11/2009, 00h19

Enlève simplement le height:100%.

Si tu en sa besoin il va falloir être beaucoup plus précis sur ce que tu as, ce que tu veux obtenir...

**JeanJean75** · 18/11/2009, 09h26

Si je n'applique aucun height, le repeat-y ne s'applique pas. :/

Si tu en sa besoin il va falloir être beaucoup plus précis sur ce que tu as, ce que tu veux obtenir...

??

**12monkeys** · 18/11/2009, 09h37

Je veux dire par là qu'il faut au moins mettre tout le code HTML et CSS (en enlevant tout ce qui est confidentiel bien sur... remplaces par la phrases Lorem ipsum...)

**JeanJean75** · 18/11/2009, 13h31

Ok, alors voici le code 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
 
<body>
<div id="body">
    <div id="contenu">
        <div id="haut">
            <!-- Logo du site -->
        </div>
 
        <!-- Partie gauche -->
 
            <div id="photos">
            </div>
 
        <!-- Partie droite --> 
 
            <div id="identification">
                <form>
                    <input type="text" name="Pseudo" class="pseudo" value="Pseudo" onfocus="this.value=''" />
                    <input type="password" name="Password" class="mdp" 
                    <input type="submit" class="submit" value=""  />
                </form>
            </div>
    </div>     
</div>
</body>

Et le 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
 
	body{
		background-color:#CCC;
	}
 
	#body{
		background:url('images/repeat.png') repeat-y;
		width:1300px;
		height:100%;
		position:absolute;
		margin: auto;
		left: 50%; 
		margin-left:-650px; 
		margin-top:-8px;
	}
 
	#contenu{
		position:absolute;
		height:100%;
		width:1024px;
		margin: auto;
		left: 50%; 
		margin-left: -512px;	
		margin-top:-8px;	
	}
 
	#haut{
		background:url('') no-repeat;
		height:400px;
		width:600px;
		left:300px;
		top:15px;
	}

Pour tester, j'ai créer une div dans le div#contenu intitulé #test.

ici, j'ai mis un cadre rouge qui fait 1000px; de hauteur.

J'ai donc un "ascenseur" qui apparait mais le body ne se répète pas jusqu'en bas. :/

Merci

**12monkeys** · 18/11/2009, 18h42

Cela viens de tes positions absolues, sont elles vraiment indispensables ? Tu pourrais positionner les éléments dans le flux...

Sinon tu peux rajouter overflow-y:scroll sur #body

Code :

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

1
2
3
4
5
6
7
8
9
10
	#body{
		background: red url('images/repeat.png') repeat-y;
		width:1300px;
		height:100%;
		position:absolute;
		margin: auto;
overflow-y:scroll;
		left: 50%; 
		margin-left:-650px; 
		margin-top:-8px;

**JeanJean75** · 18/11/2009, 19h12

Ca marche, mais j'ai deux soucis.

Le 1er étant que la barre est toujours activé même quand on n'en a pas besoin.

De deux, elle est n'est pas dans l'extrémité droite de la page, mais collé au body. =/

Merci.

**12monkeys** · 18/11/2009, 19h19

Pour ton premier problème remplaces scroll par auto.

Pour le second, c'est normal overflow est déclaré sur l'id #body... A mon sens il faudrait supprimer toutes ces positions absolues et placer les éléments dans le flux...

**JeanJean75** · 18/11/2009, 20h19

Envoyé par 12monkeys

A mon sens il faudrait supprimer toutes ces positions absolues et placer les éléments dans le flux...

cela réserverais mon problème ?

**12monkeys** · 19/11/2009, 21h39

Tu veux dire si cela règlerais ton problème ? Oui.

Il n'est pas bon d'abuser des positions absolues, et dans ce cas elles n'étaient pas utiles...

Dans cet exemple tu as bien l'arrière plan rouge qui s'étend tout au long du contenu :

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
<!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" xml:lang="fr" lang="fr-FR">
<head>
<title>Tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
	body{
		background-color:blue;
	}
	#body{
		background: red;
		width:1300px;
		height:100%;
		margin: auto;
		left: 50%; 
	}
	#contenu{
		background-color:green;
		width:1024px;
		margin: auto;
	}
	#haut{
		background:yellow;
		height:400px;
		width:600px;
	}
</style>
</head>
 
<body>
 
<div id="body">
    <div id="contenu">
        <div id="haut">
            Logo du site
        </div>
 
        <!-- Partie gauche -->
 
            <div id="photos">
Photos
            </div>
 
        <!-- Partie droite --> 
 
            <div id="identification">
                <form>
                    <input type="text" name="Pseudo" class="pseudo" value="Pseudo" onfocus="this.value=''" />
                    <input type="password" name="Password" class="mdp" 
                    <input type="submit" class="submit" value=""  />
                </form>
            </div>
contenu<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>     
</div>
 
 
</body>
</html>

**JeanJean75** · 20/11/2009, 00h08

Merci de ton explication approfondie.

Je suis donc entrain de remplacer les "position:absolute;" "top et "left" inutile par des "margin-top" et "margin-left".

Cependant j'ai quelques problèmes qui apparaissent.

Dans la partie identification :
- Lorsque j'applique des "margin" aux "class" ".submit" et ".cookie" cela ne change en rien la place de ces derniers qui sont placés n'importe comment.
- Plus grave, quand j'applique un "margin-top" plus grand à n'importe quelle "classe", cela aligne à la hauteur choisi toutes les "class" présentent dans la partie la "div#identification" mise à part ".pseudo"

Le code HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
            <div id="identification">
                <span class="titrevert">C'est qui ?</span>
                <form>
                    <input type="text" name="Pseudo" class="pseudo" value="Pseudo" onfocus="this.value=''" />
                    <input type="password" name="Password" class="mdp" value="Password" onfocus="this.value=''" />
                    <img src="images/case.png" alt="" onclick="clickChk(this)" class="checkbox" />
                    <span class="cookie">Se souvenir de moi</span>
                    <input type="submit" class="submit" value=""  />
                </form>
            </div>

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
 
	#identification{
		background:url('images/identification.png') no-repeat;		
		width:300px;
		height:300px;
		margin-top:-950px;
		margin-left:682px;
		padding-left:53px;
		padding-top:30px;
	}
 
	.pseudo{
		background:none;
		background-repeat:no-repeat;
		width:150px;
		margin-top:Xpx;
		margin-left:Xpx;
		border: none;	
		font-family:Calibri;
		font-size:20px;
		color:#00c0ff;
		font-weight:bold;
		font-style:italic;
	}
 
	.mdp{
		background:none;
		border: none;
		background-repeat:no-repeat;
		width:150px;
		margin-top:Xpx;
		margin-left:Xpx;
		font-family:Calibri;
		font-size:20px;
		color:#00c0ff;
		font-weight:bold;
		font-style:italic;	
	}
 
	.checkbox{	
	}
 
	.cookie{	
		margin-top:Xpx;
		margin-left:Xpx;		
		font-family:Calibri;
		font-size:12px;
		color:#68c000;
		font-weight:bold;	
	}
 
	.submit{
		margin-top:Xpx;
		margin-left:Xpx;			
		background-image:url('images/connection.png');
		width:102px;
		height:32px;
		border:none;
		background-color:transparent;
	}

Si vous avez une solution faites moi signe, ça commence à me rendre dingue cette histoire. :/

Hauteur du fond en fonction du contenu.

Dimensionnement en CSS

Discussions similaires

Partager

Partager