Problème de float et fond d'écran

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

Problème de float et fond d'écran

CSS

Vue hybride

Discussions similaires

Partager

Partager