28234 sujets

CSS et mise en forme, CSS3

Menu horizontal li centrés avec images (hover sur image et texte)

Bonsoir,


Je suis face à un souci avec mes css.

J'aimerais que mes textes de li remontent de 3px ou
que mes images descendent de 3px !

voici la page en question ici

J'ai beau tout essayer,
je n'y arrive pas !

Avez-vous une idée pour m'aider ?

Voici mon html

    <div id="menu">
    	<ul class="menu">
        <li class="bouton1 bouton_focus" style="width:193px;" alt="recherche"><a href="recherche00.php" class="blanc">RECHERCHER UN DIAMANT</a></li>
        <li class="bouton1" style="width:282px;" alt="solitaires_bague_fiancaille"><a href="" class="blanc">SOLITAIRES | BAGUES DE FIAN&Ccedil;AILLES</a></li>
        <li class="bouton1" style="width:139px;" alt="alliance"><a href="" class="blanc">ALLIANCES</a></li>
        <li class="bouton1" style="width:117px;" alt="bijou"><a href="" class="blanc">BIJOUX</a></li>
        <li class="bouton1" style="width:162px;" alt="promotion"><a href="" class="rouge">PROMOTIONS</a></li>
        <li class="bouton1" style="width:143px;" alt="guide"><a href="" class="blanc">GUIDE DU DIAMANT</a></li>
        </ul>
    </div>

Voici mes css :

#menu ul {
	font-size: 11px;
	width: 100%;
}
#menu ul li {
	float: left;
	height: 21px;
	list-style-position: inside;
	list-style-type: none;
	text-align: center;
}
#menu ul li img {
}
#menu a {
	display: list-item;
	list-style-image: url(../images/general/puce_diamant.png);
	list-style-type: none;
	text-decoration: none;
}
#menu a:hover {
	display: list-item;
	list-style-image: url(../images/general/puce_diamant_rouge.png);
	list-style-type: none;
	text-decoration: none;
	color: #f29400;
}

.menu {
	margin: 0px;
	padding: 0px;
}
.bouton1 {
	display: inline-block;
	float: left;
	height: 21px;
	padding-top: 8px;
	font-size: 11px;
	line-height: 10px;
	color: #FFFFFF;
	margin-right: 2px;
	margin-left: 1px;
}
.bouton2 {
	display: inline-block;
	float: left;
	height: 21px;
	padding-top: 8px;
	font-size: 11px;
	line-height: 10px;
	color: #FF0000;
	margin-right: 2px;
	margin-left: 1px;
}

Modifié par jytest (25 Apr 2013 - 21:23)
Merci pour ta proposition de solution.

J'avais déjà essayé cela...
Cela ne fonctionne pas !
Et je ne sais pas pourquoi ?

Pire, mon ami google ne connaît pas ce souci...
Cela non plus ne m'aide pas non plus !
Modifié par jytest (25 Apr 2013 - 09:40)
En fait, le diamant est trop bas par rapport au texte "rechercher un diamant"...
Mon souci, c'est de "piloter" le "texte" du menu de la puce "diamant"

Par contre, je vois que sur ton navigateur c'est ok...
Pourquoi ?
Qu'as-tu changé ?
Modifié par jytest (25 Apr 2013 - 14:15)
navigateur: chrome

ce que j'ai change c'est un padding sur le #menu ul li {padding-top:3px;}

sinon faudra que tu fasses un truc du genre #menu ul li img{padding-bottom:3px;}

je pense... ainsi toutes les images de tes li deront descendues de 3 px
Es-tu sûr de n'avoir rien changé d'autre ?
C'est bizarre !
Puis-je te demander de me renvoyer tout le css ? stp

Puis-je te demander de venir voir mes résultats...
dans 1 heure... (absent!) ?
D'avance merci !
Modifié par jytest (25 Apr 2013 - 15:25)
j'ai trouvé ton soucis et d'aiileurs je vous conseille tous quand vous travaillez avec du css d'utiliser chrome...



voilà j'ai augmenter la hauteur de ta div de 10px je passe à 15px puis je joue sur ton image.

j'arrive pas à envoyer l'image pfffff
Modifié par nmy (25 Apr 2013 - 15:32)
element.style {
background: url(images/general/puce_diamant.png) no-repeat 8px 1px;
padding-top: -12px;
height: 15px;
}


pas moyen de t 'envoyer une capture il me mets à chaque fois une autre image qu'il va chercher je ne sais où....
nmy,
et autres volontaires,


Puis-je te demander de refaire un tour sur mon code...
car tu travaillais sur une version, que j'avais testée en début d'après-midi,
à background "qui ne fonctionne pas sur IE !!!, comme par hasard !!!"

Donc retour à la case départ
Voici mon souci :
Le texte, qui accompagne l'image "diamant", est trop bas de 2 px !!!

Je repars des codes en début du post.

Ce truc me prend la tête.

Ci-dessous, on voit bien que mes textes sont trop bas de 2 px par rapport au "diamant" !!!


J'ai vraiment besoin de vous pour m'en sortir ! A l'aide !
D'avance, un immense merci. upload/32999-menu.jpg
Modifié par jytest (25 Apr 2013 - 21:30)
voilà suis là,

actuellement comme c'est codé tu NE sais PAS modifier la position de ces images, puisque tu les as déclarée comme puce !

donc vire-moi tes list-style-image et remplace par backgound-image:url(); et un list-style:none

ensuite faut une section du genre #menu li img {padding-top:3px};

logiquement ça devrait aller.

Par contre ce que je comprends pas c'est dans ton style .bouton1_focus, tu as un background-image ou tu lui donne une feuille css??????? Smiley eek
Voici des précisions :
- focus... c'est pour la suite (=des effets spéciaux)
- passer en background (j'ai essayé !), cela n'est pas bien digéré par IE !!!

Seule solution trouvée, utiliser les float (comme mon menu "boutique" tout en
haut de la page... mais ce n'est pas très recommandé, me diront les puristes !
Pourtant cette solution offre un résultat nickel !

Alors que faire ?
As-tu une autre piste ?
Ou as-tu une piste de css ?
Sujet clos
Aller à