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;
}
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:
- 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
J'ai tester votre code mais je ne comprends pas mieux votre problème.
vous pouvez le détaillé plus clairement svp
vous pouvez le détaillé plus clairement svp
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>
-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>
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 ?
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