CSS background

Résolu

-
- 26 janv. 2012 à 15:24

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="menu_polyservices.js"></script>

</head>

<body>
<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;
}

Afficher la suite

A voir également:

CSS background
Windows 7 logon background changer - Télécharger - Thèmes & Fonds d'écran
Starter background changer - Télécharger - Thèmes & Fonds d'écran
John's background switcher - Télécharger - Suite bureautique
Gvr background window 3 ✓ - Forum Windows 10
Enlever le soulignement d'un lien css - Astuces et Solutions

7 réponses

Réponse 1 / 7

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

Réponse 2 / 7

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>

Réponse 3 / 7

si vous voulez je peux vous faire un imprim-écran et vous l'envoyer par mail

Réponse 4 / 7

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 ?

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

Posez votre question

Réponse 5 / 7

je veux que mes images aient la même couleur de fond que mes li hors elles n'en ont aucun

Réponse 6 / 7

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);

Réponse 7 / 7

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) ?

Discussions similaires

Background color css

Task host windows, c'est quoi ?

Task Host Window ?????

BackGroundTransferHost.exe s'active tout seul, pourquoi ?

desactiver task host window par gestionnaire de tâches

Votre réponse

Discussions similaires