CSS background
Résolu
Debutant en webmastering
Messages postés
444
Statut
Membre
-
Debutant en webmastering Messages postés 444 Statut Membre -
Debutant en webmastering Messages postés 444 Statut Membre -
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
- John's background switcher - Télécharger - Suite bureautique
- Starter background changer - Télécharger - Thèmes & Fonds d'écran
- 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
Bonjour,
Il faut que tu mettes tes images en background directement dans le CSS de cette façon :
background : url(chemin/image.png);
Il faut que tu mettes tes images en background directement dans le CSS de cette façon :
background : url(chemin/image.png);
je dois avouer que je ne vois pas du tout où tu veux en venir; je souhaite le mettre dans mes li et si je fais de la façon je devrais jouer avec les positions et c'est justement pour ne pas faire ces manipulations que je souhaite intégrer mes images dans mes <li>
(ou alors je n'ais rien compris : c'est possible aussi)
(ou alors je n'ais rien compris : c'est possible aussi)
une navigation se fait en full CSS, tu mets des classes à tes li si les images différent d'une li à l'autre mais dans tous les cas ton image doit être en background dans ton CSS :
li.classe {
background: url(tonimage.png);
}
Après le fait que tu ne veux pas jouer avec les positions... Tu devrais quand même essayer car c'est plus propre et ça se fait comme ça ^^
li.classe {
background: url(tonimage.png);
}
Après le fait que tu ne veux pas jouer avec les positions... Tu devrais quand même essayer car c'est plus propre et ça se fait comme ça ^^
favorise les classes plutôt que les ID.
en gros si tu veux mettre une image par li tu mets :
html :
<li class="image1">Accueil</li>
<li class="image2">Produit</li>
<li class="image3">Société</li>
CSS :
li.image1 {
background: url(image1.png);
}
li.image2 {
background: url(image2.png);
}
li.image3 {
background: url(image3.png);
}
en gros si tu veux mettre une image par li tu mets :
html :
<li class="image1">Accueil</li>
<li class="image2">Produit</li>
<li class="image3">Société</li>
CSS :
li.image1 {
background: url(image1.png);
}
li.image2 {
background: url(image2.png);
}
li.image3 {
background: url(image3.png);
}
Bonjour,
En gros, tes li ont un fond et tes images ont un fond blanc et sont carrés (par exemple) ?
En gros, tes li ont un fond et tes images ont un fond blanc et sont carrés (par exemple) ?
ce que je cherche à faire c'est une seule bande avec un fond gris qui va comprendre
Produit / Accueil / Société / Nous contacter
avec pour chaque onglet son image
ex : accueil = une maison
Nous contacter = un téléphone et une enveloppe
de ce style là
désolé j'ai un peu de mal à me faire comprendre ; j'espère que c'est plus clair maintenant
Produit / Accueil / Société / Nous contacter
avec pour chaque onglet son image
ex : accueil = une maison
Nous contacter = un téléphone et une enveloppe
de ce style là
désolé j'ai un peu de mal à me faire comprendre ; j'espère que c'est plus clair maintenant
" - " = système D pour aligner au mieux
ce que je voudrais :
__________________________________
|Produit Accueil Société Nous contacter-----|
|image---image----image---image-------------|
|_________________________________|
et ce avec une même couleur de fond;
hors ça me donne
__________________________________
|Produit Accueil Société Nous contacter-----|
|_________________________________|
|image-- image---image----image-------------|
|_________________________________|
le fond de ma couleur pour la 1ère partie
et aucun fond pour la seconde vu qu'apparemment
les images sont considérées comme hors des <li>
ce que je voudrais :
__________________________________
|Produit Accueil Société Nous contacter-----|
|image---image----image---image-------------|
|_________________________________|
et ce avec une même couleur de fond;
hors ça me donne
__________________________________
|Produit Accueil Société Nous contacter-----|
|_________________________________|
|image-- image---image----image-------------|
|_________________________________|
le fond de ma couleur pour la 1ère partie
et aucun fond pour la seconde vu qu'apparemment
les images sont considérées comme hors des <li>