CSS background

Résolu/Fermé

Debutant en webmastering Messages postés 401 Date d'inscription lundi 6 juin 2011 Statut Membre Dernière intervention 27 janvier 2021 - 26 janv. 2012 à 10:15
Debutant en webmastering Messages postés 401 Date d'inscription lundi 6 juin 2011 Statut Membre Dernière intervention 27 janvier 2021 - 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;
}

A voir également:

CSS background
Windows 7 logon background changer - Télécharger - Thèmes & Fonds d'écran
Background remover - Télécharger - Montage photo
Enlever couleur lien css ✓ - Forum CSS
Css premier plan ✓ - Forum CSS
Realtek audio background process class ✓ - Forum Pilotes (drivers)

7 réponses

Réponse 1 / 7

patrice86 Messages postés 1378 Date d'inscription dimanche 26 octobre 2008 Statut Membre Dernière intervention 26 novembre 2023 125
26 janv. 2012 à 10:20

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

Debutant en webmastering Messages postés 401 Date d'inscription lundi 6 juin 2011 Statut Membre Dernière intervention 27 janvier 2021
Modifié par Debutant en webmastering le 26/01/2012 à 10:34

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

Debutant en webmastering Messages postés 401 Date d'inscription lundi 6 juin 2011 Statut Membre Dernière intervention 27 janvier 2021
26 janv. 2012 à 10:35

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

Réponse 4 / 7

patrice86 Messages postés 1378 Date d'inscription dimanche 26 octobre 2008 Statut Membre Dernière intervention 26 novembre 2023 125
Modifié par patrice86 le 26/01/2012 à 10:40

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

Debutant en webmastering Messages postés 401 Date d'inscription lundi 6 juin 2011 Statut Membre Dernière intervention 27 janvier 2021
26 janv. 2012 à 10:45

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 lundi 12 décembre 2011 Statut Membre Dernière intervention 27 mai 2013 4
26 janv. 2012 à 10:48

Bonjour,

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

background : url(chemin/image.png);

Debutant en webmastering Messages postés 401 Date d'inscription lundi 6 juin 2011 Statut Membre Dernière intervention 27 janvier 2021
26 janv. 2012 à 11:04

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)

Raydenprod Messages postés 77 Date d'inscription lundi 12 décembre 2011 Statut Membre Dernière intervention 27 mai 2013 4
26 janv. 2012 à 11:06

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 ^^

Debutant en webmastering Messages postés 401 Date d'inscription lundi 6 juin 2011 Statut Membre Dernière intervention 27 janvier 2021
26 janv. 2012 à 11:19

images différentes = plein d'id ??

Raydenprod Messages postés 77 Date d'inscription lundi 12 décembre 2011 Statut Membre Dernière intervention 27 mai 2013 4
26 janv. 2012 à 11:22

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

Debutant en webmastering Messages postés 401 Date d'inscription lundi 6 juin 2011 Statut Membre Dernière intervention 27 janvier 2021
26 janv. 2012 à 11:29

<li class="produit"><a href="">Produit</a></li>

li.produit
{
background : url(C:\wamp\www\htdocs\stageBTSpolyservices\images_polyservices\images_polyservices/15860312.jpg");
}

j'ai essayé avec le chemin complet et juste avec le nom de l'image
mais rien :(

Réponse 7 / 7

AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 311
26 janv. 2012 à 11:32

Bonjour,
En gros, tes li ont un fond et tes images ont un fond blanc et sont carrés (par exemple) ?

Debutant en webmastering Messages postés 401 Date d'inscription lundi 6 juin 2011 Statut Membre Dernière intervention 27 janvier 2021
26 janv. 2012 à 11:41

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

AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 311
26 janv. 2012 à 11:48

Je vois ce que tu cherches à faire, mais ton problème reste obscur.
Et donc ma question reste : tu veux que tes images ne soient pas dans un carré blanc, mais aient un fond pareil que ton fond gris ?

Debutant en webmastering Messages postés 401 Date d'inscription lundi 6 juin 2011 Statut Membre Dernière intervention 27 janvier 2021
26 janv. 2012 à 12:27

" - " = 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>

AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 311
26 janv. 2012 à 12:40

Tu veux que l'image soit à la ligne ?

Debutant en webmastering Messages postés 401 Date d'inscription lundi 6 juin 2011 Statut Membre Dernière intervention 27 janvier 2021
26 janv. 2012 à 13:43

je veux qu'elle soit à l'intérieur de mon li ; li qui prend mon css

Discussions similaires

trait horizontal avec du css

Task host windows, c'est quoi ?

Enlever le soulignement sous les liens en HTML/CSS

[CSS] Forcé retour à la ligne

HTML - définir taille bouton