Background effacé par un block

**clouddd** · 26/08/2011, 17h27

Bonjour,

Je debute en CSS et j'ai un probleme avec mon background.
La zone qui pose probleme est simple pourtant. En fait tout le body dispose d'un background blanc. Maintenant je voudrais faire une partie avec un contenu à gauche et à droite un menu, l'un à coté de l'autre.

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
 
<body>
   <div id="site">
       ..........
       <div id="divSansCss">
             <div id="contenu">
                 ........
             </div>
 
             <div id="menuDroit">
                   ........
             </div>
       </div>
   </div>
</body>

et le 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
 
body{
	background:teal;
	font-family:Georgia,Bitstream ,serif;
	font-size:12px;
	line-height:18px;
}
 
#site {
	background:white;
	margin-left: auto;
  	margin-right: auto;
  	width: 940px;
  	text-align: left; /* on rétablit l'alignement normal du texte */
  	clear:both;
}
 
 
#content {
	float:left;
	margin-top:10px;
	width:70%;
}
#menuDroit
{
	float:left;
	width:25%;
	padding-left:30px;
}

On devrait avoir une bande bleu (teal) à gauche, mon site avec un fond blanc et une bande bleu (teal) à droite.
Mais mon fond blanc disparait, une fois qu'il arrive à la div d'id=divSansCss , le fond bleu(teal) prend le desssus :'(
Pouvez vous m'aider svp

**FirePrawn** · 26/08/2011, 20h25

Bonsoir,

Tu as inversé les couleurs pour les background, c'est ton div qui est en white et ton body en teal là...

Invité · 26/08/2011, 21h00

Bonjour,
il faut ajouter ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
html, body{ 
	margin:0; padding:0;
	width:100%;
	height:100%;
	font-size:1em;
}
#site {
	height:100%;
	...
}

**clouddd** · 27/08/2011, 12h25

Merci pour votre aide mais ça marche tjs pas :'(

En fait le site pour faire simple, c'est trois colonnes: la première c'est juste une bande couleur teal, pour la deuxieme c'est là qu'il y a le site en luim même (bannière,menu, blabla), et la troisieme est comme la première colonne.

J'ai ajouté les heigh 100%

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
 
html,body{
	background:teal;
	font-family:Georgia,Bitstream ,serif;
	font-size:12px;
	line-height:18px;
	height:100%; /* <= ajoute */
}
 
#site {
	background:white;
	margin-left: auto;
  	margin-right: auto;
  	width: 940px;
  	text-align: left; /* on rétablit l'alignement normal du texte */
  	clear:both;
  	height:100%; /* <= ajoute */
}

J'ai gagné un peu de place blanche, mais il y a toujours une partie de la deuxieme colonne qui est teal

Je vous met le code html épuré du blabla inutile:

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
 
<body>
	<div id="site" >
 
		<p id="description_site">
			...
		</p>
 
		<a href="#" ><img src="..." alt="..." ></a>
 
		<div id="menu">
			<ul>
				<li><a href="#">Accueil</a></li>
				<li><a href="#">Actualité</a></li>
				<li><a href="#">Média</a></li>
				<li><a href="#">Photo</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>	
 
		<div class="titre">
			<p>
				...
			</p>
		</div>
 
		<div style="clear:both">
			<div id="content">
 
				<span>
					<marquee direction="leaf">... </marquee>
				</span>
 
				<img src="..."  alt="..." width="200" height="130" 
                                       style="display:inline;float:left" >
                                                ...
				</img>
			</div>
 
			<div id="menuDroit">
				<ul>
					<li><a href="#">Accueil</a></li>
					<li><a href="#">Actualité</a></li>
					<li><a href="#">Média</a></li>
					<li><a href="#">Photo</a></li>
					<li><a href="#">Contact</a></li>
				</ul>			
			</div>
		</div>				
	</div>

Il est simple, malgrés ca y deja des problemes :'(

**clouddd** · 27/08/2011, 12h39

Bon j'ai un peu triché, dans la div qui contient le content et le menuDroit, je lui ai affecté un id et lui ai mis le meme css que le #site.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
		<div id="corps">
			<div id="content">
					...	
			</div>
 
			<div id="menuDroit">
                                         ...		
			</div>
		</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
#site, #corps {
	background:white;
	margin-left: auto;
  	margin-right: auto;
  	width: 940px;
  	text-align: left; /* on rétablit l'alignement normal du texte */
  	clear:both;
  	height:100%;
}

C'est sure ca marche mais j'aimerais avoir une methode qui marche sans passer par cette petite "triche"..

Invité · 27/08/2011, 12h41

Ce qui serait malin, c'est de faire une image de ce que tu souhaites obtenir (et la montrer)

**clouddd** · 28/08/2011, 15h28

Ah je savais pas que l'on mettre des images !!
Mon site est pas en ligne encore (j'ai pas encore regarder comment ca marche tt ca).
Je veux un truc qui ressemble un peu à ca:

Bah finalement ca marche pas, je veux un site de ce genre
http://answers.uchicago.edu/page.php?id=16101

Background effacé par un block

CSS

Vue hybride

Discussions similaires

Partager

Partager