Problème de float et fond d'écran

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

J'ai fait le tour du forum et je n'ai rien trouvé pour corrigé mon probleme.

Voilà, pour mon site internet que je suis en train de développer, j'utilise une div "global" (contenant tout le site), une div "contenu" avec 2 parties "contenutexte"(mon texte a droite) et "contenumenu" (mon menu a gauche).

Code:

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
#global { 
    margin-left: auto; /* Permet de centrer le site */
    margin-right: auto; /* Permet de centrer le site */
    width: 900px;
    border: 5px solid white;
	text-align:left;
	padding-bottom:0px;
 
}
 
#contenu
{
}
 
#contenutexte 
{
	min-height:700px;
	text-align:center;
	float:right;
	width:80%;
	background-image:url(image/fond-contenu.jpg);
}
 
#contenumenu 
{
min-height:700px;
background-image:url(image/fond-menu.jpg);
float:left;
width:20%;
}

Et le code html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
	<div id="global">
		<div id="bandeau">
 
		</div>
		<div id="contenu">
		<!-- inclusion du menu !-->
			<?php include("menu.php"); ?>
			<div id="contenutexte">
			<p>le contenu</p>
			</div>
		</div>
		<div id="piedDePage">
		<p>pied de page</p>
		</div>
	</div> 
</body>

Et le code du menu

Code:

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
<div id="contenumenu" >
			<br /><br /><br /><br />
				<ul class="navigation">
					<li>
						<a href="index.php" title="Aller à la page d'accueil">Accueil</a>
					</li>
					<li>
						<a href="actu.php" title="Aller à la page Actualités">Actualit&eacute;</a>
					</li>
					<li class="toggleSubMenu">
						<span>Activit&eacute;s</span>
						<ul class="subMenu">
							<li>
								<a href="acti-famille.php" title="Aller à la page Famille">Famille</a>
							</li>
							<li>
								<a href="acti-adulte.php" title="Aller à la page Adulte">Adulte</a>
							</li>
							<li>
								<a href="acti-petite-enfance.php" title="Aller à la page Petite-enfance">Petite-enfance</a>
							</li>
							<li>
								<a href="acti-enfance-jeunesse.php" title="Aller à la page Enfance-jeunesse">Enfance-jeunesse</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="perm.php" title="Aller à la page permanences">Permanences</a>
					</li>
					<li class="toggleSubMenu">
						<span>L'&eacute;quipe</span>
						<ul class="subMenu">
							<li>
								<a href="equi-bene.php" title="Aller à la page équipe bénévole">B&eacute;n&eacute;voles</a>
							</li>
							<li><a href="equi-sal.php" title="Aller à la page Equipe salarié">Salari&eacute;s</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="photo.php" title="Aller à la page les photos">Les photos</a>
					</li>
					<li>
						<a href="valp.php" title="Aller à la page Vous avez la parole">Vous avez la parole</a>
					</li>
				</ul>
		</div>

Mon soucis se situe au niveau du fond d'ecran du "contenumenu". Lorque ma page s'agrandit vers le bas, ma div "contenutexte" repete le fond d'ecran mais ma div "contenumenu" ne repete pas le fond d'ecran.

L'imprim écran est en piece jointe.

Voilà, vous savez tout. Si quelqu'un a une solution pour que les 2 fonds d'ecran se répetent, ce serait l'idéal =).

Merci d'avance.

Salut,

rajoutes un background-repeat.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 #contenutexte { min-height:700px; text-align:center; float:right; width:80%; background-image:url(image/fond-contenu.jpg); background-repeat:repeat-y; } #contenumenu { min-height:700px; background-image:url(image/fond-menu.jpg); background-repeat:repeat-y; float:left; width:20%; }
la propriété background-repeat peut avoir différentes valeurs:
- repeat (répète horizontalement et verticalement)
- repeat-x (répète horizontalement)
- repeat-y (répète verticalement)
- inherit (hérite de la répétition de son parent)
- no-repeat (ne se répète pas)

10/02/2011, 14h08
kyuub

Déjà merci pour ta réponse.

En fait j'avais déjà tenter les background-repeat, mais je viens de le refaire pour etre sur et ça ne fonctionne toujous pas.

J'ai aussi essayer les "overflow: hidden;" mais toujours aucun résultat.
10/02/2011, 14h37
ornitho13

peux tu fournir les images s'il te plait ?
10/02/2011, 14h39
kyuub

Hum tu veux dire une autre image que celle que j'ai mis dans le premier message? Pourtant celle-ci montre bien que le background de ne se répete pas a gauche mais qu'il se répete à droite.

Enfin si tu veux une autre image, dis moi ce que tu veux voir =).
10/02/2011, 14h45
kyuub

Je tiens à préciser que meme si j'augmente la hauteur de mon image de fond d'ecran pour le menu, rien ne change.
En fait elle reste a la taille de mon min-height meme si j'insere une image de 4000px.
10/02/2011, 15h00
ornitho13

non je parlais des images que tu utilises dans ta CSS.
Peux tu les fournir afin de tester ton style ? (via une url en ligne par exemple)
10/02/2011, 15h11
kyuub

2 pièce(s) jointe(s)

Mon site n'a aucun hebergement pour l'instant, donc tout ce que je peux faire c'est te donner les images en piece jointe.
10/02/2011, 17h29
kyuub

J'imagine que les essais n sont pas concluant ^^
10/02/2011, 17h53
ornitho13

Salut,

alors j'ai testé et je n'ai aucun problème avec le background-repeat, cela fonctionne.

Alors de 2 chose l'une, soit le problème se situe autre part (le contenu mal formaté par exemple), soit il te manque un doctype à ton document ( cela est souvent source d'erreur).

je continue les tests

Peux être peux tu me dire sur quels navigateurs tu rencontres le problème?

Après un ultime test, j'ai réussi à reproduire ton problème.

Voici le CSS à appliquer :

Code:

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
 
#global { 
    margin-left: auto; /* Permet de centrer le site */
    margin-right: auto; /* Permet de centrer le site */
    width: 900px;
    border: 5px solid white;
	text-align:left;
	padding-bottom:0px;
 
}
 
#contenu
{
height:100%;
position:relative;
}
 
#contenutexte 
{
	min-height:700px;
	text-align:center;
	margin-left:20%;
	width:80%;
	height:100%;
	background-image:url(images/fond-contenu.jpg);
}
#contenumenu 
{
	height:100%;
	background-image:url(images/fond-menu.jpg);
	width:20%;
	position:absolute;
	bottom:0px;
	top:0px;
	left:0px;
}

J'ai enlevé les float et plutôt préféré passer par un position absolute sur ton menu de gauche.

10/02/2011, 18h25
Candygirl

Hello,

Du moment que ton site est de largeur fixe (900px) il serait plus simple de ne faire qu'une seule image de fond appliquée à ton contenu que tu forcerais à englober les enfants flottants d'une manière ou d'une autre, selon le contexte. (en mettant le pied de page avec un clear à l'intérieur, en ajoutant une propriété qui induit un nouveau contexte de formatage comme overflow:hidden,...)
11/02/2011, 08h58
kyuub

Merci

Un grand merci à vous deux!

J'avais utilisé les positions relatives et absolues dans un ancien site, mais je m'étais tellement mélangé les pinceaux que j'ai abandonné.

Donc voilà, merci, finalement ce n'est pas si compliqué.

Problème Résolu!