Problème de float et fond d'écran [Résolu]

kyuub · 10/02/2011, 10h54

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 :

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
#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 :

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
<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 :

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
<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.

ornitho13 · 10/02/2011, 13h01

Salut,

rajoutes un background-repeat.

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
 
#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)

kyuub · 10/02/2011, 14h08

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.

ornitho13 · 10/02/2011, 14h37

peux tu fournir les images s'il te plait ?

kyuub · 10/02/2011, 14h39

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 =).

kyuub · 10/02/2011, 14h45

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.

ornitho13 · 10/02/2011, 15h00

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)

kyuub · 10/02/2011, 15h11

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.

kyuub · 10/02/2011, 17h29

J'imagine que les essais n sont pas concluant ^^

ornitho13 · 10/02/2011, 17h53

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?

ornitho13 · 10/02/2011, 18h03

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

Voici le CSS à appliquer :

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
 
#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.

Candygirl · 10/02/2011, 18h25

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,...)

kyuub · 11/02/2011, 08h58

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!

10/02/2011, 18h25	#12
Candygirl Modératrice Inscription : juillet 2006 Messages : 1 529 Détails du profil Informations personnelles : Sexe : Âge : 40 Localisation : Suisse Informations forums : Inscription : juillet 2006 Messages : 1 529 Points : 1 869 Points : 1 869	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,...) __________________ Les bons réflexes: avant de poser une question: règles \| faq \| tutoriels \| recherche clarté, politesse, vocabulaire et orthographe soignés = efficacité remercier ceux qui ont pris le temps d'aider et si c'est le cas
	10

11/02/2011, 08h58	#13
kyuub Invité de passage Inscription : octobre 2010 Messages : 9 Détails du profil Informations forums : Inscription : octobre 2010 Messages : 9 Points : 1 Points : 1	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!
	00

10/02/2011, 14h08	#3
kyuub Invité de passage Inscription : octobre 2010 Messages : 9 Détails du profil Informations forums : Inscription : octobre 2010 Messages : 9 Points : 1 Points : 1	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.
	00

10/02/2011, 14h37	#4
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	peux tu fournir les images s'il te plait ?
	00

10/02/2011, 14h39	#5
kyuub Invité de passage Inscription : octobre 2010 Messages : 9 Détails du profil Informations forums : Inscription : octobre 2010 Messages : 9 Points : 1 Points : 1	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 =).
	00

10/02/2011, 14h45	#6
kyuub Invité de passage Inscription : octobre 2010 Messages : 9 Détails du profil Informations forums : Inscription : octobre 2010 Messages : 9 Points : 1 Points : 1	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.
	00

10/02/2011, 15h00	#7
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	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)
	00

10/02/2011, 17h29	#9
kyuub Invité de passage Inscription : octobre 2010 Messages : 9 Détails du profil Informations forums : Inscription : octobre 2010 Messages : 9 Points : 1 Points : 1	J'imagine que les essais n sont pas concluant ^^
	00

10/02/2011, 17h53	#10
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	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?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email