Redimensionnement de la page d'accueil.

**Le Shoote** · 27/05/2017, 11h31

Bonjour,

Je ne suis qu'un modeste bidouilleur en html et css.

Je rénove, du moins j'essaie, la page d'accueil de mon site free.

Je rencontre un problème que je n'arrive pas à résoudre :

Lors d'un clic sur le bouton de réduction de la fenêtre;
Les background se réduisent normalement mais pas les conteneurs.
Ce qui fait que j'ai des bandes horizontales qui apparaissent lors d'une réduction de la page.
Pourriez-vous venir à mon aide ?

Voilà ce que cela donne :
Pièce jointe 280679

Html:

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
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
 
<html>
 
<head>
	<title>Au coin du Shoote</title>
	<div id="bandeau">
	</div>
</head>
<link rel="stylesheet" type="text/css" href="style_div.css">
<body style="width:100%; height:100%;background-color:yellow">
 
<div id="corps">
<!--
	<div id="coteg">
	<!--
	<div id="gauche" style="width:100%; height:100%; overflow:auto" >				
		<img src="vues-bordeaux.jpg" alt="Bordeaux" width=402 height=10986 />	
	</div>
 
	</div> 
 
	<div id="contenu">
 
		<a href="http://fribeyre.free.fr/dotclear/">
		<img src="bouteille-matiere.png" alt="La Matière" style="padding-top: 50px" width=219 height=57/>
		</a>
		<a href="http://fribeyre.free.fr/punbb/viewforum.php?id=3">
		<img src="bouteille-fous2foot.png" alt="Fous2Foot" width=219 height=57/>
		</a>
 
	</div>
	<div id="coted">
 
		<div id="droite" style="width:419px; height:600px; overflow-x:auto" >
		<img src="joueurs-fcgb.jpg" alt="FCGB" width=402 height=22010 />
		</div>
 
	</div>	
-->
</div>
 
	<div id="piedpage"style="background-color:red">
		<div align="center"style="width:100%:;height:100%">
			<a href="http://fribeyre.free.fr/punbb/index.php"><img src="rouge-01.png" alt="Forums" style="padding-top: 45px" width=153 height=130/></a>
			<a href="http://fribeyre.free.fr/dotclear/"><img src="rouge-02.png" alt="Blogs" width=153 height=130/></a>
			<a href="http://fribeyre.free.fr/phpwebgallery/identification.php"><img src="rouge-03.png" alt="Albums" width=153 height=130/></a>
			<a href="contact.html"><img src="rouge-04.png" alt="Contact" width=153 height=130/></a>	
			<a href="http://fribeyre.free.fr/"><img src="rouge-05.png" alt="Ancien site" width=153 height=130/></a>
		</div>
	</div>
 
</body>
 
</html>

CSS:

Code css :

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
a { /* Comment */ color: /* Comment */ Red; }
.TestClass {
	color: Black;
	text-align: left;
}
 
body {
width:100%;
width:auto;
background-color:green;
background-size:100% auto;
background-repeat:no-repeat;
}
 
div#bandeau {
	float:left;
	width:100%;
	height:auto;
	background-image:url(bandeau-haut.jpg); 
background-color:blue;
	background-size:100% auto;
	background-repeat:no-repeat;
	}
 
div#corps {
	float:left;
	width:100%;
	height:723px;
	background-image:url(corps.png);
background-color:red;
	background-size:100% auto;
	background-repeat:no-repeat;
	}
/*
div#coteg {
	float:left;
	width:22%;
	height:700px;
	margin-left: auto;
    margin-right: auto;
	}
 
div#gauche {
	float:left;
	width:22%;
	margin-top:22%;
	}
 
div#contenu {
	/*float:left;
	width: 56%;
	height: 700px;
	margin-left: auto;
    margin-right: auto;
	}
	div#coted {
	float:left;
	width:22%;
	height:700px;
	margin-left: auto;
    margin-right: auto; 
		}
 
div#hd {
	float:left;
	width:22%;
	height:100px;
	}
 
div#droite {
	float:left;
	width:22%;
	height:600px;
	}
div#bouteille1 {
	float:left;
	width:153px;
	height:130px;
	margin-left : 400px;
	margin-top : 30px;
	}
*/	
div#piedpage {
	float:left;
	width:100%;
	height:239px;
	background-image:url(bandeau-bas.png);
background-color:yellow;
	background-size:100% auto;
	background-repeat:no-repeat;
	}

**Le Shoote** · 11/06/2017, 11h17

Après moult tâtonnements, j'ai enfin réussi à résoudre le problème que me posait le redimensionnement de ma new page d'accueil.
J'ai abandonné l'idée de mettre les images en background.
Je les ai placé dans une div dans le fichier html.
De cette façon, je n'ai plus eu de désaccord entre les images et leurs conteneurs.
Ils se redimensionnent correctement d'un commun accord !
Tout va pour le mieux dans le meilleur des mondes.
J'insère les codes html et css ainsi qu'une image de la page d'accueil, des fois que cela pourrait dépanner quelqu'un.
A bientôt sans faute !
Le Shoote, fort !

html :

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
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
 
<html>
 
<link rel="stylesheet" type="text/css" href="style_div.css">
 
<head>
	<title>Au coin du Shoote</title>
	<div id="bandeau">
	<img src="ressources/bandeau-haut.png" alt="Bannière" width=1900 height=207/>
	</div>
</head>
 
<body>
 
<div id="corps">
	<div id="centre">
	<img src="ressources/corps.png" alt="conteneur" width=1910 height=700/>
	</div>
	<div id="bouteille1">
		<a href="http://fribeyre.free.fr/dotclear/">
		<img src="ressources/bouteille-matiere.png" alt="La Matière" width=100% height=100%/>
		</a>
	</div>
	<div id="bouteille2">
		<a href="http://fribeyre.free.fr/punbb/viewforum.php?id=3">
		<img src="ressources/bouteille-fous2foot.png" alt="Fous2Foot" width=100% height=100%/>
		</a>
	</div>
 
	<div id="gauche">				
		<img src="ressources/vues-bordeaux.jpg" alt="Bordeaux" width=396 height=10986 />	
	</div>
	<div id="droite">				
		<img src="ressources/joueurs-fcgb.jpg" alt="FCGB" width=420 height=23111 />
	</div>
</div>
 
	<div id="piedpage">
		<div id="tonneaux">
			<img src="ressources/bandeau-bas.png" alt="Pied de page" />
		</div>	
			<div id="bouteilles" alt="Menu" >
				<a href="http://fribeyre.free.fr/punbb/index.php"><img src="ressources/rouge-01.png" alt="Forums" width=19% height=19%/></a>
				<a href="http://fribeyre.free.fr/dotclear/"><img src="ressources/rouge-02.png" alt="Blogs" width=19% height=19%/></a>
				<a href="http://fribeyre.free.fr/phpwebgallery/identification.php"><img src="ressources/rouge-03.png" alt="Albums" width=19% height=19%/></a>
				<a href="ressources/contacts.php"><img src="ressources/rouge-04.png" alt="Contact" width=19% height=19%/></a>	
				<a href="http://fribeyre.free.fr/old.html"><img src="ressources/rouge-05.png" alt="Ancien site" width=19% height=19%/></a>
			</div>			
	</div>
 
</body>
 
</html>

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
107
108
109
110
111
a { /* Comment */ color: /* Comment */ Red; }
.TestClass {
	color: Black;
	text-align: left;
}
img {
	max-width: 100%;
	height: auto;
}
image {
	max-width: 100%;
	height: auto;
}
 
body {
position:absolute;
	margin: 0px;
	margin-left:0px;
	margin-top:0px;
	padding-top:0px;
	width:100%;
	height:auto;
	background-image:url(ressources/nuit-05.jpg);
}
 
div#bandeau {
	position:relative;
	float:left;
	width:100%;
	height:auto;
	background-image:url(ressources/nuit-05.jpg);
	}
 
div#corps {
	position:relative;
	float:left;
	margin:0;
	margin-left:0px;
	margin-top:0px;
	padding-top:0px;
	width:100%;
	height:100%;
	}			
div#gauche {
	position:absolute;
	float:left;
	overflow:auto;
	width:21.5%;
	height:85.8%;
	margin-top: 5%;
	background-image:url(ressources/nuit-05.jpg);
	background-size:100M auto;
	background-repeat:no-repeat;
	}
div#droite {
	position:absolute;
	float:left;
	overflow:auto;
	width:21.6%;
	height:85.8%;
	margin-top: 5%;
	margin-left:78.4%;
	background-image:url(ressources/nuit-05.jpg);
 
	}
div#bouteille1 {
	position: absolute;
	float:left;
	width: 10%;
	height:10%;
    top:1%;
    left:46%;	
			}		
div#bouteille2 {
	position: absolute;
	float:left;
	width: 10%;
	height: 10%;
  	top:91%;
    left:46%;	
			}
div#tonneaux {
	position:relative;
	float:left;
	width: 100%;
	height:100%;
	background-image:url(ressources/nuit-05.jpg);
			}
div#centre {
	position:relative;
	float:left;
	width: 100%;
	height:100%;
	background-image:url(ressources/nuit-05.jpg);
	}
div#bouteilles {
	position: absolute;
	float:left;
	width: 39%;
	height:65%;
 	margin-top:2.2%;
	margin-left: 31%;
			}
 
div#piedpage {
	position:relative;
	float:left;
	width:100%;
	height:auto;
	background-image:url(ressources/nuit-05.jpg);
	}

Hardcopy de la nouvelle page d'accueil redimensionné :
Nom : accueil.png
Affichages : 215
Taille : 494,7 Ko

Redimensionnement de la page d'accueil.

Dimensionnement en CSS

Partager

Partager