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

jreaux62 · 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"..

jreaux62 · 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

jreaux62 · 28/08/2011, 15h43

-> Div et CSS : une mise en page rapide et facile

clouddd · 31/08/2011, 19h02

Cool merci ça devrait m"aider.

26/08/2011, 20h25	#2
FirePrawn Modérateur Sébastien Ingénieur réalisateur Inscription : mars 2011 Messages : 776 Détails du profil Informations personnelles : Nom : Sébastien Âge : 24 Localisation : France, Haut Rhin (Alsace) Informations professionnelles : Activité : Ingénieur réalisateur Secteur : Industrie Informations forums : Inscription : mars 2011 Messages : 776 Points : 2 335 Points : 2 335	Bonsoir, Tu as inversé les couleurs pour les background, c'est ton div qui est en white et ton body en teal là... __________________ - Avant toute chose : lire le mode d'emploi du forum et ses règles. - avant de poster - Je ne réponds pas aux questions techniques en MP.
	00

27/08/2011, 12h41	#6
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Ce qui serait malin, c'est de faire une image de ce que tu souhaites obtenir (et la montrer) __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	10

28/08/2011, 15h43	#8
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	-> Div et CSS : une mise en page rapide et facile __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

28/08/2011, 15h28	#7
clouddd Nouveau Membre du Club Inscription : juillet 2009 Messages : 177 Détails du profil Informations forums : Inscription : juillet 2009 Messages : 177 Points : 37 Points : 37	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
	00

31/08/2011, 19h02	#9
clouddd Nouveau Membre du Club Inscription : juillet 2009 Messages : 177 Détails du profil Informations forums : Inscription : juillet 2009 Messages : 177 Points : 37 Points : 37	Cool merci ça devrait m"aider.
	00

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