Problème au niveau repeat-y

**Tubasa** · 24/06/2011, 10h17

Bonjour,

Ce qui ont suivis mes post précédents savent que je suis en train de faire un design pour un site à mon entreprise, là ou je suis en stage. Je rencontre, pour la première fois que je code, énormément de bug.
Et là, j'avouerais que je suis coincé...

Voici mon soucis. J'ai une page avec :
DIV BANNIERE
DIV MENU HORIZONTAL
DIV CONTENEUR
-> DIV MENU ( 1, 2 et 3 )
-> DIV CONTENU
DIV FOOTER

les -> c'est les div contenues dans la div conteneur.

Enfin bref,
Mon soucis est que pour ma div conteneur, j'ai une background-image en repeat-y.
Cependant, celui-ci ne fait pas de repeat. Je suis dans l'obligation de mettre une valeur dans height ou min-height... J'ai essayer de mettre : height : 100%; mais ça ne marche pas.
Moi ce que je veux c'est que mon background-image se repeat jusqu'en bas de page.

Pouvez vous m'aider à trouver mon problème ?
Voici mon code :

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
56
57
58
59
60
61
62
63
64
65
 
<!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" xml:lang="fr-fr" lang="fr-fr" dir="ltr" > 
 
	<head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />	
 
		<title>Portail Version 1</title>
 
		<link type="text/css" href="css/archimed/theme.css" rel="stylesheet" />
 
		<!--[if lte IE 6]>
			<link type="text/css" href="css/archimed/theme-ie.css" rel="stylesheet" />	
			<script type='text/javascript' src="js/ie.js"></script>
		<![endif]-->
 
 
		<script type='text/javascript' src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
		<script type='text/javascript' src="js/main.js"></script>
	</head>
	<body>
 
		<div id="banniere"> </div> <!-- banniere du haut -->
 
		<div id="menu"> <!-- menu horizontal -->
			<div class="menu-text-center">
				PRESENTATION&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ACTUALITES&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FONCTIONNALITES
			</div>
		</div><!-- fin menu horizontal -->
 
 
 
		<div id="contenu"> 	
 
			<div id="zone-menu"></div>
 
			<!-- rectangle du milieu de page -->
 
			<div class="page-div-shadow">
						<h3>Bienvenue</h3>
						<hr />
						<p>
									<h1 align=center style="color:#5F8CA3;">Faites votre choix dans la barre de menu</h1>
						</p>
 
 
						<br /><br />
 
			</div>
 
		</div>
		<div style="clear : both; position : relative;"><br /><br /></div>
		<!-- et on finit la page par le footer -->
		<div id="div-footer"> 
			<div class="footer">
				Copyright 2012&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				Mentions Legales&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				Contactez nous&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				Plan du site
			</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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
 
body{
	background-color : #888888;
	font-size : 12px;
	font-family : verdana, times new roman;
}
 
a{
	color : black;
}
 
a:hover{
	color : black;
}
 
 
/* ------------------------------ BANNIERE ---------------------------------- */
 
#banniere{
	background-image : url("../../images/template/banniere.png");
	background-repeat: no-repeat ;
	width : 956px;
	height : 107px;
	margin : 0px auto;
}
 
 
/* ------------------------ MENU HORIZONTAL ----------------------------- */
 
#menu{
	background-image : url("../../images/template/menu.png");
	background-repeat: no-repeat ;
	width : 960px;
	height : 38px;
	margin : auto;
	text-align : center;
}
 
#menu a{
	color : white;
}
 
#menu a:hover{
	color : white;
}
 
 
.menu-text-center{
	padding-top : 6px;
	width: 960px;
	color : white;
}
 
 
/* ------------------------ DIV DU CONTENU TOTAL ---------------------------- */
 
#contenu{
	background-image : url("../../images/template/contenu.png");
	background-repeat:  repeat-y;
	width : 954px;
	padding-top: 10px;
	margin : auto;
}
 
 
/* --------------------------------------- MENU  ---------------------------------------- */
 
.sousmenu{
	display : block;
	width: 282px;
	position:relative;
	float : left;
	left: 0;
	float:left;
	clear: both;
	margin-top:19px;
	z-index:0;
}
 
.liens{
	float: left;
	width: 0px;
	height : 210px;
	border: 0;
	background-color : #F4F2F3;
	margin-top:7px;
	padding:5px;
	overflow:hidden;
	margin-left:1px;
	font-size : 13px;
}
 
.liens p{
	margin: 0;
	width: 230px;
	overflow:hidden;
	font-size : 11px;
}
 
.onglet{
	float:left;
	width:40px;
	margin-left: -10px;
	height:239px;
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius: 0px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 0px;
}
 
.onglet p  {
	text-align : center;
	font-size: 12px;
	margin-top : 30px;
	-moz-transform: rotate(90deg);	
	-webkit-transform: rotate(90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);	
}
 
.paragraphe {
	text-align : center;
	font-size: 12px;
	margin-top : 30px;
	-moz-transform: rotate(90deg);	
	-webkit-transform: rotate(90deg); 
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
 
 
.menu1 .onglet {
	background-color : #5F8CA3;
	border : solid 1px #e6e5e5;
	border-left : 0px;
	-webkit-box-shadow: inset -10px 0px 10px #3f687d;
	-moz-box-shadow: inset -10px 0px 10px #3f687d;
	box-shadow: inset -10px 0px 10px #3f687d;
}
 
.menu2 .onglet {
	background-color : #C44C51;
	border : solid 1px #e6e5e5;
	border-left : 0px;
	-webkit-box-shadow: inset -10px 0px 10px #a5383d;
	-moz-box-shadow: inset -10px 0px 10px #a5383d;
	box-shadow: inset -10px 0px 10px #a5383d;
}
 
.menu3 .onglet {
	background-color : #B0CC99;
	border : solid 1px #e6e5e5;
	border-left : 0px;
	-webkit-box-shadow: inset -10px 0px 10px #9eb68a;
	-moz-box-shadow: inset -10px 0px 10px #9eb68a;
	box-shadow: inset -10px 0px 10px #9eb68a;
}
 
.menu1 .ouvert {
	background-color : #A2B5BF;
	-webkit-box-shadow: inset -10px 0px 10px #8f9ea6;
	-moz-box-shadow: inset -10px 0px 10px #8f9ea6;
	box-shadow: inset -10px 0px 10px #8f9ea6;
}
 
.menu2 .ouvert {
	background-color : #FFB6B8;
	-webkit-box-shadow: inset -10px 0px 10px #df9496;
	-moz-box-shadow: inset -10px 0px 10px #df9496;
	box-shadow: inset -10px 0px 10px #df9496;
}
 
.menu3 .ouvert {
	background-color : #B7CA79;
	-webkit-box-shadow: inset -10px 0px 10px #a9ba70;
	-moz-box-shadow: inset -10px 0px 10px #a9ba70;
	box-shadow: inset -10px 0px 10px #a9ba70;
}
 
.icone-f-o{
	display: block; 
	margin: 0 auto; 
	margin-top : 20px;
}
 
.nobr{
white-space:nowrap;
}
 
 
/* ------------------------ DIV DU CONTENU MILIEU ---------------------------- */
 
.page-div-shadow {
	width : 850px;
	border : 1px solid #bababb;
	margin-left : 55px;
	margin-top: 10px;
	border-radius: 10px; /* BORD ARRONDIS */
	-moz-box-shadow: 10px 10px 10px #AAAAAA;
	-webkit-box-shadow: 10px 10px 10px #AAAAAA; 
	/* px 1 = + revient � droite, - revient � gauche 4
	   px 2 = + revient en bas, - revient en haut
	   pc 3 = sens diagonal de gauche � droit*/
	box-shadow: 0px 5px 5px #AAAAAA; 
	clear: right;
	position : absolute;
	z-index : 0;
}
 
.page-div-shadow p
{
	margin-left: 30px;
	width : 790px;
	font-family : "Verdana", Times New Roman;
	font-size : 11px;
}
 
.page-div-shadow hr {
	color : #5F8CA3;
	background-color : #5F8CA3;
	height: 1px;
	border: 0px;
	width : 790px;
	margin-top: -15px;
	margin-left: 30px;
}
 
.page-div-shadow h3 {	
	margin-left : 30px;
	color : #5F8CA3;
	font-family : Times New Roman;
	font-size : 22px;
}
 
 
/* ------------------------ DIV FOOTER ---------------------------- */
 
#div-footer {
	background-image : url("../../images/template/footer.png");
	background-repeat: no-repeat ;
	width : 952px;
	height : 51px;
	margin : auto;
	text-align : center;
}
 
.footer {
	padding-top : 13px;
	width: 960px;
}

jQuery pour l'affichage du menu :

Code javascript :

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
function AddMenuItem(id,libelle)
	{	
		var container = $("#zone-menu")[0];
 
		var div = document.createElement("div");
		div.setAttribute("id","menu_"+id);
			if(id == 0)
			{
				div.setAttribute("class","sousmenu menu1");
			}
			else if ( id == 1)
			{
				div.setAttribute("class","sousmenu menu2");		
			}
			else if ( id == 2)
			{
				div.setAttribute("class","sousmenu menu3");		
			}
 
		var divOnglet = document.createElement("div"); //On créer une div pour les onglets
		divOnglet.setAttribute("id","onglet_"+id);
		divOnglet.setAttribute("class","onglet");
 
		var divLiens = document.createElement("div"); //On créer une div pour les Liens
		divLiens.setAttribute("id","divlien_"+id);
		divLiens.setAttribute("class","liens");
 
		var pLiens = document.createElement("p"); //On créer une balise paragraphe pour les liens
		pLiens.setAttribute("id","lien_"+id);
 
		divLiens.appendChild(pLiens); 
		div.appendChild(divLiens);	
 
 
		var pOnglet = document.createElement("p"); //On créer une balise paragraphe pour la div onglet
		pOnglet.setAttribute("class","nobr");
		pOnglet.innerHTML += "&nbsp;"+libelle;		
 
		var img = document.createElement("img");
		img.src = "images/template/fermer.png";
		img.alt = "icone F/O";
		img.setAttribute("id","icone_"+id);
		img.setAttribute("class", "icone-f-o");	
 
		divOnglet.appendChild(img);	
		divOnglet.appendChild(pOnglet);				
		div.appendChild(divOnglet);
		container.appendChild(div);
	}
 
	function AddMenuLien(id_menu_item, id_lien,fct, adresse,titre)
	{
		var container = $("#"+"lien_"+id_menu_item)[0]; // Retourne le div liens
 
		var lien = document.createElement("a");
		lien.href = adresse;
 
		var img = document.createElement("img");
		img.src = "images/template/icone.png";
		img.alt = "icone";
		container.appendChild(img);
		lien.innerHTML = titre;
 
		container.appendChild(lien);
		container.appendChild(document.createElement("br"));
	}
 
 
	function getGauche(){
			var left = $("#zone-menu").offset().left; // Le classe wrapper c'est la classe ou tu veux l'alignement gauche!
			$(".sousmenu").css('left', left+'px');
	}
 
	$(document).ready(function () { 
 
 
			AddMenuItem("0","MON COMPTE");
			AddMenuLien("0","id_lien","","#","ACCUEIL");
			AddMenuLien("0","id_lien","","#", "Votre mot de passe");
			AddMenuLien("0","id_lien","","#", "Vous n'avez pas de messages");
			AddMenuLien("0","id_lien","","#", "Votre planning hebdomadaire");
			AddMenuLien("0","id_lien","","#", "Votre planning semestriel");
			AddMenuLien("0","id_lien","","#", "Aux ressources documentaires");
 
 
 
			AddMenuItem("1","VOTRE FORMATION");
			AddMenuLien("1","id_lien","","#","Votre passeport formation");
			AddMenuLien("1","id_lien","","#","Votre plan individuel de formation");
			AddMenuLien("1","id_lien","","#","Vos formations réalisées");
			AddMenuLien("1","id_lien","","#","Votre droit individuel à la formation");
 
			AddMenuItem("2","CARNET DE BORD");
			AddMenuLien("2","id_lien","","#","Liste de vos parcours de formation en ligne");
			AddMenuLien("2","id_lien","","#","Liste des invitations en attente de votre réponse");
			AddMenuLien("2","id_lien","","quizz_realises.htm","Liste de vos quiz réalisés");
			AddMenuLien("2","id_lien","","#","Liste des sessions en préparation");
 
			$(".onglet").click(function() { // Un onglet est cliquï¿½
						var OngletItem = $(this);
						var id_onglet = OngletItem.attr('id').substr(7);
 
						var MenuItem = $("#menu_"+id_onglet);
						var LienItem = $("#divlien_"+id_onglet);
						var icone = $("#icone_"+id_onglet);
 
				if(!OngletItem.hasClass("ouvert")) { // On vï¿½rifie si l'onglet est fermï¿½
 
								OngletItem.addClass("ouvert"); // On précise qu'on ouvre l'onglet, une classe permet de chercher l'image dans le CSS et donc du cache
								LienItem.css({'border':'1px solid black', 'border-left':'0'}).animate({'width':'230px'}); // On ouvre les liens en question
								icone.attr("src", "./images/template/ouvert.png");
								MenuItem.css("z-index", 2);
 
					} else { // Si l'onglet est fermï¿½
 
								OngletItem.removeClass("ouvert"); // On prï¿½cise qu'on ferme l'onglet
								LienItem.animate({'width':'0px'},function () { // On ferme les liens
									LienItem.css('border', 'none'); // On enleve les bordures pour l'esthï¿½tique
									MenuItem.css("z-index", 0);
								 });
								 icone.attr("src", "./images/template/fermer.png");
					}								
 
			});
	});

Si vous voulez voir de vos propres yeux : http://tubasa.fr/BETA3/

Merci d'avance !

Tubasa

**12monkeys** · 24/06/2011, 11h00

Bonjour

Ajoute un overflow:hidden sur #contenu.

Une explication ici : http://css.developpez.com/faq/?page=...ment_flottants

**Tubasa** · 24/06/2011, 15h30

C'était une idée.

Mais il y avait aussi une autre solution :
Faire deux div, une pour la droite et une pour la gauche. enlever les propriété de position. Et ensuite de mettre mettre ma balise de clear:both. Et hop.

Youhou ! MErci !

Problème au niveau repeat-y

CSS

Vue hybride

Discussions similaires

Partager

Partager