Impossible d'afficher une image en BACKGROUND issue d'un CSS
Posté : 23 févr. 2008, 01:18
Impossible d'afficher mes cadres(image en background) en fond de menu lorsque je transfère mes fichiers sur le serveur FTP de FREE ; tout fonctionne correctement en local sous WAMP... même constant sous IE comme sous FIREFOX.
En triturant nu peu, je suis presque sur qu'il y a un couac entre Background et background-image mais impossible de trouver... une idée les loulous? Merci d'avance.
Sous Wamp, cela s'affiche avec Background mais pas Background-image... sous firefox, aucune des 2 solutions...!!
Mon PHP où doivent s'afficher les cadres
En triturant nu peu, je suis presque sur qu'il y a un couac entre Background et background-image mais impossible de trouver... une idée les loulous? Merci d'avance.
Sous Wamp, cela s'affiche avec Background mais pas Background-image... sous firefox, aucune des 2 solutions...!!
Mon PHP où doivent s'afficher les cadres
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="designsitequestar.css" />
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<!-- L'en-tête -->
<div id="en_tete">
</div>
<!-- Les menus -->
<div id="menu">
<div class="element_menu">
<div class="menuhaut">
<h3>Connection</h3>
<form method="post" action="connection.php">
<p>
<label for="pseudo">Votre pseudo :</label>
<input type="text" name="pseudo" size="12" maxlength="12" value=""/>
<br />
<label for="pass">Mot de passe :</label>
<input type="password" name="pass" size="12"maxlength="12" />
<input type="submit" name="boutconnect" value="Connection" style="font-weight:bold; margin-bottom:0px; margin-top: 10px; height: 20px; width: 90px; font-size:small;" />
</p>
</form>
<a class="connect" style="font-size:small" href="pbconnection.php">Mot de passe perdue?</a>
<a class="connect" style="font-weight:bold" href="inscription2.php">Devenir Membre</a>
</div>
</div>
<div class="element_menu">
<div class="menuhaut">
<h3>Menu Questar</h3>
<ul>
<li><a href="index.php">Accueil</a></li>
<li><a href="scoresQO.php">Les scores</a></li>
<li><a href="InfoQuestar.php">C'est quoi Questar?</a></li>
<li><a href="paiement.php">Faire un don</a></li>
<li><a href="regles.php">Comment jouer?</a></li>
<li><a href="Le forum">Le forum</a></li>
</ul>
</div>
</div>
<div class="element_menu">
<div class="menuhaut">
<h4></h4>
<p > on a: 180 membres<br/> dont 0 connecté(s).</p><br/> </div>
</div>
</div>
</body>
<!-- Le corps -->
<!-- Le pied de page -->
<!--
<div id="pied">
<p>Copyright "speccy" 2007, tous droits réservés</p>
</div>
-->
<body bgcolor="#0" text="#0" link="#0E390E" vlink="#0E390E" text-decoration="none">
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="designformulaire.css" />
<!-- Le corps -->
<div >
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="designindex.css" />
<div class="don">
<p><a HREF="coucou.html"> <IMG ALIGN=top SRC="images/don.png" border="0"></a></p>
</div>
<div class="corps">
Bonjour cher(e) inconnu(e); Merci de vous connecter si vous êtes déjà inscrit ou bien cliquez sur <a href="inscription2.php">devenir membre</a> pour vous inscrire en 20 secondes et jouer à Questar.<br/><br/><b><u>La maxime du jour</u></b><br/>>> L'absence diminue les médiocres passions et augmente les grandes, comme le vent éteint les bougies et allume le feu. </div>
<div >
<!--AFFICHAGE DU SCORE GENERAL DU MOIS-->
<div class="tabloscore">
<table>
<!-- Préparation du TITRE du tableau et du NOM des colonnes indiquées en HAUt et en BAS du tablo-->
<caption><a href="scoresQO.php">SCORES GENERAL DU MOIS</a></caption>
<thead>
<tr>
<th> RANG</th>
<th> NOM</th>
<th> POINTS</th>
<th> % Réussite</th>
</tr>
</thead>
<!-- A activer si on veux une ligne de rappel des intitulés colonne en bas
<tfoot>
<tr>
<th> RANG</th>
<th> NOM</th>
<th> POINTS</th>
<th> % Réussite</th>
</tr>
</tfoot>
-->
<!-- AFFICHAGE du CORPS du tablo-->
<tbody>
<tr>
<td>
1
</td>
<td>
Grégoire271
</td>
<td>
65535
</td>
<td>
84 </td>
<tr>
<td>
2
</td>
<td>
Bastien477
</td>
<td>
63605
</td>
<td>
81 </td>
<tr>
<td>
3
</td>
<td>
Bastien548
</td>
<td>
63450
</td>
<td>
55 </td>
<tr>
<td>
4
</td>
<td>
POLLUX159
</td>
<td>
62717
</td>
<td>
46 </td>
<tr>
<td>
5
</td>
<td>
Jean-Charles
</td>
<td>
62423
</td>
<td>
70 </td>
</table>
</div>
<!--AFFICHAGE DU SCORE GENERAL DU mois en POURCENTaGE-->
<div class="tabloscore">
<table>
<!-- Préparation du TITRE du tableau et du NOM des colonnes indiquées en HAUt et en BAS du tablo-->
<caption>SCORES MOIS EN POURCENTAGE</caption>
<thead>
<tr>
<th> RANG</th>
<th> NOM</th>
<th> % Réussite</th>
<th> POINTS</th>
</tr>
</thead>
<!-- A activer si on veux une ligne de rappel des intitulés colonne en bas
<tfoot>
<tr>
<th> RANG</th>
<th> NOM</th>
<th> POINTS</th>
<th> % Réussite</th>
</tr>
</tfoot>
-->
<!-- AFFICHAGE du CORPS du tablo-->
<tbody>
<tr>
<td>
1
</td>
<td>
Antoine895
</td>
<td>
86 </td>
<td>
51816 </td>
</tr>
<tr>
<td>
2
</td>
<td>
nathalie63
</td>
<td>
86 </td>
<td>
31132 </td>
</tr>
<tr>
<td>
3
</td>
<td>
Chrystèle525
</td>
<td>
86 </td>
<td>
35719 </td>
</tr>
<tr>
<td>
4
</td>
<td>
Chrystèle593
</td>
<td>
85 </td>
<td>
19362 </td>
</tr>
<tr>
<td>
5
</td>
<td>
Ernestine939
</td>
<td>
85 </td>
<td>
30611 </td>
</tr>
</table>
</div>
</div>
<div class="icones">
<table class="tablo2" width=600px height=100px border="0" align=center>
<tr class="ligne 2">
<td class="cellule1"><a HREF="coucou.html"> <IMG SRC="images/LogoQuestOriginel.jpg"border="0" ></a></td>
<td><a HREF="coucou.html"> <IMG ALIGN=top SRC="images/LogoQuestGalaxie.jpg" border="0"></a></td>
</tr>
<tr class="ligne 2">
<td class="cellule1"><a HREF="coucou.html">JOUER A Questar ORIGINEL</a></td>
<td><a HREF="coucou.html"> JOUER à Questar Galaxie</a></td>
</tr>
</table>
</div>
</div>
</body>
body
{
width: 900px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
background-color: #FCD813 /*url("fond.png");*/
}
/* L'en-tête */
#en_tete
{
width: 980px;
height: 120px;
background-image: url("images/banniere.png");
background-repeat: no-repeat;
margin-bottom: 5px;
/*text-align:center;*/
margin-left=400px;
}
/* Le menu */
#menu
{
float: left;
width: 160px;
}
/* Quelques effets sur les menus */
.element_menu h3
{
color: #26003E;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
font-size:1em;
padding-bottom:0;
}
.element_menu p
{
list-style-image: url("images/puce.png");
padding: 4px;
padding-left: 20px;
margin: 1px;
margin-bottom: 0px;
}
.element_menu ul
{
list-style-image: url("images/puce.png");
padding-top:0;
padding: 4px;
padding-left: 35px;
margin: 1px;
margin-bottom: 0px;
}
.element_menu a
{
color: #black;
}
.element_menu a:hover
{
color: #26003E;
font-size:1.05em;
}
/* Le corps de la page */
#corps
{
margin-left: 160px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 15px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: #180127;
/*background-color: #F4F253; /* Une couleur de fond pour le corps
background-image: url("images/motif.png");*/
background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
/*border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#pied
{
text-align:center;
}
.menuhaut {/* conteneur global et arrière-plan du titre du cadre */
width: 160px;
padding-top:10px;
background-image: url("images/cadremenuhaut.png") top left no-repeat;
}
.element_menu {/* arrière-plan bas et sur l'ensemble du cadre */
width: 150px;
padding:0px;
background-image: url("images/cadremenubas.png") bottom left no-repeat;
padding-bottom: 30px;
margin-bottom:10px;
}
.connect {/* conteneur global et arrière-plan du titre du cadre */
padding-left:15px;
font-size:0.7em;
}
/* LE DESIGN DU MENU DES SCORES*/
#tabnav {
margin: 7;
padding: 0 0 20px 10px;
border-bottom: 1px black solid ;
}
#tabnav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#tabnav a:link, #tabnav a:visited {
float: left;
font-size: 14px;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 20px;
text-decoration: none;
color: #0;
}
#tabnav li.active a:link, #tabnav li.active a:visited, #tabnav a:hover {
border-bottom: 4px solid #872BC6;
padding-bottom: 2px;
background: #FBE151;
color: #586;
}
#tabnav a:hover {
color: #789;
}
.TexteScore{
padding:0;
margin-right:200;
border:2px;
}