CSS background

Résolu
Bonjour,

je ne comprends pas, je mets mes images dans un li
dans le css je mets un background mais le petit souci c'est que le background s'exécute sur le texte mais pas sur les images placées en dessous; j'espère avoir été assez clair sinon n'hésitez pas à tester mon code :

CODE HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="stageBTSpolyservices.css">
<script type="text/javascript" src="date_heure.js"></script>
<!--<script type="text/javascript" src="TpsChargement.js"></script>-->
<script type="text/javascript" src="menu_polyservices.js"></script>

</head>

<body><!--onload="TpsChargement()"-->
<div id="site">
<div id="date_connexion"><a name="AncreArrivée"></a>
<table width="1000px" height="5">
<tr>
<td width="330px" height="5" id="affiche_date">
</td>

<td width="340px" height="5">
<a href="Formulaire.html" class="center">Devenir membre</a>
</td>

<td width="330px" height="5">
<a target="window1" href="" class="right">Se connecter</a>
</td>
</tr>
</table>
</div>
<div id="banniere"><img src="bluesPoly2.jpg">
</div>
<ul class="menu">
<li><a href="">Produit</a><img src="./images_polyservices/15860312.jpg" class="image"></li>
<li><a href="Accueil.html">Accueil</a><img src="./images_polyservices/15860274.jpg" class="image"></li>
<li><a href="">Société</a><img src="./images_polyservices/" class="image"></li>
<li><a href="" >Nous contacter</a><img src="./images_polyservices/15860333.jpg" class="image"></li>
<li id="déroulant" onclick="openMenu('sousV');">V</li>

</ul>
<ul>
<li><a href="NousSituer.html" id="sousV" style="display:none;">Nous situer</a>
<img src="../images_polyservices/15860234.jpg" class="image"></li>
</ul>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="fin">
<a href="">Produit - </a><a href="">Accueil - </a><a href="Accueil.html">Société - </a><a href="">Nous contacter - </a><a href="NousSituer.html">Nous situer - </a>
<a href="">Devenir membre - </a><a href="">Se connecter - <a href="#AncreArrivée">Retour haut de page</a>
</div>
<div id="fin1">16, rue d'Amiens - 60000 BEAUVAIS -<strong id="tel"> Tél.03 44 05 51 51 </strong>- Fax 03 44 05 97 70 - polyservices@polyservices.fr</div>
<div id="fin2">S.A.R.L. au capital de 80 000€ - N°intracommunautaire FR 17 527 020 143 - APE 1812 Z - SIRET 527 020 143 00014 - Crédit du Nord -BNP Paribas</div>
</div>
</body>
</html>


CODE CSS :

#site /* fond à venir */
{
text-align : center;
background-image :url();
background-attachment : fixed;
background-repeat : repeat;
/*background-position :*/
border : 1px solid;
width : 1000px;
}

ul
{
padding:0;
margin:0;
list-style-type:none;
}

li
{
margin-left:0px;
float:left; /*pour IE*/
list-style : none;
cursor : pointer;
}

ul li a /* Contenu des listes */
{
display : block;
padding : 0;
background-color : #808080;
color : #FFFFFF;
width : 230px;
text-align : center; /* Permet de centrer le texte */
text-decoration : none;
line-height : 50px;
font-size : 30px;
}

ul li a:hover /* Contenu des listes */
{
display : block;
padding : 0;
background : #808080;
color : #FFFFFF;
width : 230px;
text-align : center;
text-decoration : none;
line-height : 50px;
font-size : 36px;
}

.menu li
{
/*border-bottom : 1px solid;*/
}

#date_connexion
{
width : 1000px;
background : #808080;
line-height : 20px;
color : #FFFFFF;
}

#date_connexion a
{
text-decoration : none;
color : #FFFFFF;
}

#banniere
{
border-top: 1px solid;
border-bottom: 1px solid;
width : 1000px;
}

#date_connexion td
{
text-align : center;
}

#sousV
{
width : 282px;
margin-left : 698px;
display : none;
text-align : left;
padding-left : 20px;
}

#sousV:hover
{
width : 282px;
margin-left : 698px;
display : none;
text-align : left;
padding-left : 20px;
text-decoration : none;
}

#affiche_date
{
color : #FFFFFF;
font-size : 15px;
}

#déroulant
{
width : 80px;
display : block;
padding : 0;
background : #808080;
color : #FFFFFF;
text-align : center;
line-height : 50px;
font-size : 30px;
font-family : Helvetica;
}

#déroulant:hover
{
width : 80px;
display : block;
padding : 0;
background : #808080;
color : #FFFFF;
text-align : center;
line-height : 50px;
font-size : 30px;
font-family : Helvetica;
text-decoration : none;
font-size : 36px;
}

H1
{
text-align : center;
text-decoration : underline;
}

#leftSituer
{
float : left;
margin-left : 50px;
position : absolute;
margin-top : 130px;
text-align : left;
}

#fin
{
border-top : 1px solid;
border-bottom : 1px solid;
}

#tel
{
font-size : 20px;
width : 1000px;
}

#fin1
{
font-size : 16px;
background : #808080;
color : #FFFFFF;
}

#fin2
{
font-size : 14px;
background : #808080;
color : #FFFFFF;
}

#fin a
{
text-decoration : none;
}

#tableau
{
border: 1px solid;
width : 650px;
height : 800px;
margin-top : 102px;
margin-bottom : 50px;
}

.image
{
background-color :#808080;
border-bottom : 1px solid;
}
A voir également:

7 réponses

patrice86 Messages postés 1380 Date d'inscription   Statut Membre Dernière intervention   125
 
J'ai tester votre code mais je ne comprends pas mieux votre problème.
vous pouvez le détaillé plus clairement svp
0

 
d'accord procédons par points :

-premièrement j'intègre mon menu dans une liste (<ul><li>)
-ensuite j'applique un fond à chaque <li>
-ensuite je mets une image dans chaque <li>

mais celles-ci ne prennent pas le css des <li> alors qu'elles sont intégrées chacune dans un <li>
0

 
si vous voulez je peux vous faire un imprim-écran et vous l'envoyer par mail
0
patrice86 Messages postés 1380 Date d'inscription   Statut Membre Dernière intervention   125
 
Soit j'ai du mal ce matin soit vous expliquer très mal.

Ok vous disposez d'images sur chaque <li> je vois bien cela dans le code html.
Mais où est le problème ? Qu'est-ce qui ne s'affiche pas correctement ?
0

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

Posez votre question

 
je veux que mes images aient la même couleur de fond que mes li hors elles n'en ont aucun
0
Raydenprod Messages postés 77 Date d'inscription   Statut Membre Dernière intervention   4
 
Bonjour,

Il faut que tu mettes tes images en background directement dans le CSS de cette façon :

background : url(chemin/image.png);
0
AssassinTourist Messages postés 6029 Date d'inscription   Statut Contributeur Dernière intervention   1 312
 
Bonjour,
En gros, tes li ont un fond et tes images ont un fond blanc et sont carrés (par exemple) ?
0