Problème affichage background CSS

Résolu/Fermé
Dorenas
Messages postés
8
Date d'inscription
mercredi 7 décembre 2011
Statut
Membre
Dernière intervention
11 janvier 2012
- 7 déc. 2011 à 12:26
Mihawk
Messages postés
4311
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
- 7 déc. 2011 à 14:18
Bonjour,

Je suis loin d'être un expert en CSS, et me voici aujourd'hui face à deux problèmes qui m'ont fait blanchir pas mal de cheveux.

1) le premier est le suivant: J'utilise une image de fond pour une page html ( Accueil.php ).
Je l'ai associé à son body de la façon suivante :

   <html >
      <body class="contentbg" bgcolor="#FFFFFF"> 
	 <div id="logo">
            <a href="Accueil.php"><img style="border:none" src="logo.jpg"></a>
		
	 </div>
[...]

      </body>
   </html>


Voici la partie de mon CSS que j'utilise pour afficher dans le body
.contentbg
 {
 font-family: Georgia, serif;
 background: url(content.jpg) top center no-repeat #c4c4c4;
 color: #3a3a3a;  
}


Le fait est que , quand je charge la page, je suis obligé de la rafraîchir pour voir l'image apparaître. Tout les liens qui pointent vers cette pages donnent le même résultat : fond blanc basique => F5 => Mon image est là.

A l'aide :'(

2) le deuxième problème est plus une petite question. Mon menu est de cette forme :

<div id="menu" >
	<div class="menu" id="menu1" >
		<a href="#">Menu</a>
	</div>
	<div id="sousmenu1">
		<div  class="sousmenu">
			<a href="choix1.php">Choix 1</a>
		</div>
		<div  class="sousmenu">
			<a href="choix2.php">Choix 2</a>
		</div>
		<div class="sousmenu">
			<a href="choix3.php">Choix 3</a>
		</div>
		<div  class="sousmenu">
			<a href="Help.php">Aide</a>
		</div>
	</div>
</div>


et je souhaite centrer verticalement les mots présents dans les divs de sous menu.
J'utilise donc le CSS suivant :

.menu{
	
	height:18px;
	width:150px;
	padding:2px 0;
	background:#404040;
	color:#fff;
	vertical-align: middle;
	text-align:center;
}
.sousmenu{
	
	height:32px;
	width:150px;
	padding:1px 0;
	background:#808080;
	color:#fff;
	text-align:center;
	vertical-align: middle;
	}


Seulement, cela ne change rien du tout, le text-align center fonctionne mais pas le vertical align.

La réponse à cette question est probablement stupide mais la après pas mal de recherche j'ai besoin d'un avis extérieur ...

Merci d'avance pour vos réponses !

Dorenas

6 réponses

Alix le suprême
Messages postés
13
Date d'inscription
mercredi 7 décembre 2011
Statut
Membre
Dernière intervention
8 décembre 2011
5
7 déc. 2011 à 12:32
Pour ton premier problème, utilises-tu plusieurs feuilles de styles ?
0
Dorenas
Messages postés
8
Date d'inscription
mercredi 7 décembre 2011
Statut
Membre
Dernière intervention
11 janvier 2012

7 déc. 2011 à 12:36
Non j'utilise une seule et unique feuille de style pour toutes mes pages.
0
boyback
Messages postés
219
Date d'inscription
vendredi 20 février 2009
Statut
Membre
Dernière intervention
9 décembre 2012
24
7 déc. 2011 à 12:40
Salut,

Pour ton premier problème, enlève "bgcolor="#FFFFFF"" de ta balise body ca devrait être mieux.

Pour ton second problème, la propriété vertical-align n'est pas faite pour centrer du texte verticalement, je n'ai plus la syntaxe en tête pour faire ce que tu veux, tu devrais pouvoir trouver sur internet :)
0
maka54
Messages postés
699
Date d'inscription
mercredi 8 avril 2009
Statut
Membre
Dernière intervention
4 décembre 2016
80
7 déc. 2011 à 13:30
et pour le second problème
 line-height:32px;
0
Dorenas
Messages postés
8
Date d'inscription
mercredi 7 décembre 2011
Statut
Membre
Dernière intervention
11 janvier 2012

7 déc. 2011 à 13:37
Parfait pour le 2eme problème ! c'est résolu !

Par contre le premier problème perssiste , je dois même dire que c'est pire étant donné que maintenant même en appuyant sur F5, le background n'apparaît plus.
0
maka54
Messages postés
699
Date d'inscription
mercredi 8 avril 2009
Statut
Membre
Dernière intervention
4 décembre 2016
80
7 déc. 2011 à 13:43
tu as enlevé bg-color de la balise body ??
0
Dorenas
Messages postés
8
Date d'inscription
mercredi 7 décembre 2011
Statut
Membre
Dernière intervention
11 janvier 2012

7 déc. 2011 à 13:52
Oui il ne reste plus que <body class="contentbg">
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Mihawk
Messages postés
4311
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
837
7 déc. 2011 à 13:49
Hello,

Essaye de décomposer un peu ton CSS :

.contentbg
 {
 font-family: Georgia, serif;
 background-color: #c4c4c4;
 background-image : url('content.jpg');
 background-position: top center;
 background-repeat: no-repeat;
 color: #3a3a3a;  
}

0
Mihawk
Messages postés
4311
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
837
7 déc. 2011 à 13:58
Alors ?
0
Dorenas
Messages postés
8
Date d'inscription
mercredi 7 décembre 2011
Statut
Membre
Dernière intervention
11 janvier 2012

7 déc. 2011 à 14:05
Je viens de faire la modification , c'est interessant parce que cela fonctionne mais pas parfaitement. En effet auparavant, j'avais un BG gris (c'est d'ailleurs assez bisarre puisque je n'ai pas du tout fait apparaître de gris dans ma page ) maintenant j'ai bien mes images qui se chargent bien , mais avec un petit tant de latence d'une demi seconde pendant laquelle je vois clairement le fond gris, qui fait après place à mon image de fond.

On touche au but ! merci à vous=
0
Dorenas
Messages postés
8
Date d'inscription
mercredi 7 décembre 2011
Statut
Membre
Dernière intervention
11 janvier 2012

7 déc. 2011 à 14:07
Petite information intéressante, si je vais sous Mozilla ou google chrome, le problème du fond d'écran gris n'apparaît pas ! Sacré IE ! =)
0
Mihawk
Messages postés
4311
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
837
7 déc. 2011 à 14:11
Pas de gris ? Tu plaisantes, et le #C4C4C4 alors ?! C'est du gris clair hein !
Si tu ne veux pas de couleurs, supprime cette ligne ! :)

Quand au temps de chargement, cela dépend sans doute de la taille de ta photo.
0
Dorenas
Messages postés
8
Date d'inscription
mercredi 7 décembre 2011
Statut
Membre
Dernière intervention
11 janvier 2012

7 déc. 2011 à 14:17
Mhh... En effet j'avais totalement zappé ce petit morceau de C4C4C4 que je viens de faire sauter (huhuhu... pardon) à l'instant. Mea culpa!

Merci beaucoup pour votre aide ! Maintenant mon site est tout beau !

Cordialement,

Dorenas
0
txiki
Messages postés
3928
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
6 avril 2022
506
7 déc. 2011 à 14:17
/* pense à mettre des commentaires entre ces deux balises ça aide pour la maintenance */
.contentbg  { /* image d'arrière plan */
background-image: url(arriereplan2.gif);
margin:Xpx; /* marge gauche si besoin */
margin: Xpx; /* marge droite si besoin */
background-repeat:no-repeat; /* pas de répétition d'image */
}


Voir ici: http://fr.selfhtml.org/css/proprietes/arriereplan.htm leds propriétés CSS.
0