Titre: Problème puce sur menu/liste
Posté par: christel151173 le le 20-03-2013 a 19:59:46
Bonjour, je me suis lancée sur Dreamweaver, il y a très peu de temps et j'avoue patauger un peu.
J'aurai besoin d'aide, pour un problème de puces.
Je vous explique.
J'ai crée un div gauche, dans lequel je voudrai réaliser un menu vertical en css à partir d'une liste à puces comme ceci :
Accueil
Prestations
Photos
Etc..
Jusque-là, je pense y être parvenue, sauf que j'aimerai qu'avant les mots Accueil, Prestations, etc, il y ait un petit gif (mini-étoile scintillante). Une sorte de puce, si j'ai bien tout saisit.
Le souci, c'est que cette petite image, ne se met pas à côté des mots, mais soit, au dessus, soit beaucoup trop loin sur la gauche, carrément même sur la bordure de gauche. Je suis désespérée.
Peut-être que la partie du code en css, vous sera utile.
#gauche {
width: 145px;
float: left;
margin-right: 0px;
margin-left: 0px;
background-image: url(adresse de l'image);
padding: 0px;
border: medium inset #FFFFFF;
margin-top: 15px;
margin-bottom: 15px;
}
#gauche ul {
margin: 0px;
padding-top: 30px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 10px;
display: block;
list-style-type: disc;
font-size: 18px;
font-weight: normal;
}
#gauche li a {
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
margin: 0px;
width: 130px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 10px;
display: block;
}
Ca serait vraiment gentil à vous de bien vouloir m'aiguiller, car cela fait 2 jours, que j'essaie tant bien que mal, à trouver la solution.
Je vous remercie. |
Titre: Re:Problème puce sur menu/liste
Posté par: gagnedescodes le le 21-03-2013 a 20:48:09
Salut
Le css c'est bien mais si on connais pas ton html on pourra pas te dire ce qu'il faut corriger exactement. |
Titre: Re:Problème puce sur menu/liste
Posté par: christel151173 le le 24-03-2013 a 18:08:23
Oh pardon, le voici :
<div id="gauche">
<ul>
<li><a href="index.html"> Accueil</a></li>
<li><a href="prestations.html"> Prestations</a></li>
<li><a href="photos.html"> Photos</a></li>
<li><a href="soirees.html"> Soirées</a></li>
<li><a href="contact.html"> Contact</a></li>
</ul>
</div> |
Titre: Re:Problème puce sur menu/liste
Posté par: gagnedescodes le le 24-03-2013 a 20:41:46
Ok.
Je pense que tu pourrai essayer de voir avec "list-style-type" et "list-style-image".
Tiens moi au courant de ce que ça donne vu que c'est quelques choses qui pourrai être utiliser vu ta structure. |
Titre: Re:Problème puce sur menu/liste
Posté par: vieactu le le 27-03-2013 a 13:22:17
| On peut avoir le site directement ? |
Titre: Re:Problème puce sur menu/liste
Posté par: dandreaweb le le 27-03-2013 a 18:48:06
Bonjour christel,
Je vous ai modifier un peu votre code. Suivant la taille de votre étoile, augmenter ou réduiser le padding à ce niveau :
#gauche ul li {padding-left:40px;}
pour déplacer votre étoile dans la position que vous le souhaitez modifier le background-position à ce niveau:
#gauche ul li {background-position:0px -5px;}
opx -> de gauche à droite.
-5px ->de bas en haut.
N'oublier de modifier #gauche ul {list-style:none;} pour enlever la puce d'origine.
Voici le code :
#gauche {
width: 145px;
float: left;
margin-right: 0px;
margin-left: 0px;
background:#000000;
border: medium inset #FFFFFF;
margin-top: 15px;
margin-bottom: 15px;
}
#gauche ul {
margin: 0px;
padding-top: 30px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 10px;
display: block;
list-style:none;
font-size: 18px;
font-weight: normal;
}
#gauche ul li {
background:url(etoile.gif) no-repeat;
background-position:0px -5px;
padding-left:40px;
}
#gauche li a {
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
margin: 0px;
width: 130px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 10px;
display: block;
} |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|