Redimensionnement de la page d'accueil.

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

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;
	}

Redimensionnement de la page d'accueil.

Dimensionnement en CSS

Mode arborescent

Partager

Partager