[résolu] Image de fond sur lien d'un menu "en ligne" ???

Image de fond sur lien d'un menu "en ligne" ??? [résolu] - HTML/CSS - Programmation

Marsh Posté le 05-01-2006 à 14:56:50    

Salut à tous  :hello:  
 
Je cherche désespéremment de mettre des images dans le background des liens d'un menu.
 
J'ai réussi à le faire sous IE 5.5, mais pas sous Firefox  :ouch:  :ouch:  :ouch:  
 
Capture IE 5.5 :
http://pagesperso.laposte.net/divxtutos/test/captures/ie55.jpg
 
Capture Firefox :
http://pagesperso.laposte.net/divxtutos/test/captures/firefox.jpg
 
code XHTML :

Code :
  1. <ul id="menuH">
  2.     <li id="lien1"><a href="lien.html"><span>lien 1</span></a></li>
  3.     <li id="lien2"><a href="lien.html"><span>lien 2</span></a></li>
  4.     <li id="lien3"><a href="lien.html"><span>lien 3</span></a></li>
  5.   </ul>


code CSS :

Code :
  1. /* Menu horizontal */
  2. #menuH {
  3.   text-align:center;
  4.   background-color: gray;
  5.   color: black;
  6.   height: 30px;
  7.   line-height: 30px;
  8. }
  9. #menuH li {
  10.   display: inline;
  11.   list-style-type: none;
  12. }
  13. #menuH li span {
  14.   visibility: hidden;
  15. /* display: none;*/
  16. }
  17. #lien1 a, #lien2 a, #lien3 a {
  18.   display: inline;
  19. }
  20. #lien1 a {
  21.   background : url(img/rss.jpg) no-repeat center center;
  22. }
  23. #lien2 a {
  24.   background : url(img/google.jpg) no-repeat center center;
  25. }
  26. #lien3 a {
  27.   background : url(img/firefox.jpg) no-repeat center center;
  28. }
  29. #menuH li a {
  30.   width: 88px;
  31.   height: 15px;
  32.   display: inline;
  33. }


La page test est >>ici<<
 
J'ai essayé display : block; et float: left; mais le problème aprés c'est le centrage du menu.
 
Non vraiment là je ne vois pas comment faire.
 
Pourriez-vous m'aider ?


Message édité par fafane84 le 05-01-2006 à 23:37:54

---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 05-01-2006 à 14:56:50   

Reply

Marsh Posté le 05-01-2006 à 15:50:59    

un élément de type inline ne peut être redimensionné
ce qui sous IE n'est pas normal justement
 
faut mettre tes LI en display:block; et tes A aussi
et tu fous tes LI en float:left;

Reply

Marsh Posté le 05-01-2006 à 16:02:38    

gatsu35 a écrit :

un élément de type inline ne peut être redimensionné
ce qui sous IE n'est pas normal justement
 
faut mettre tes LI en display:block; et tes A aussi
et tu fous tes LI en float:left;


Ok merci beaucoup  [:athome]  
 
Je me doutais bien que si cela marchait sous IE 5.5 c'était parce qu'il ne comprenait rien à mon code CSS  :lol:  
 
Mais, j'avais essayé de mettre en display: block; et float: left; mais je n'arrive pas à centrer le menu.
 
Une solution pour y arriver ?


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 05-01-2006 à 16:09:27    

tiens, j'en profite parceque mon problème n'a rien à voir :D
 
http://magicweb.manga-torii.com/dominos.htm
 
moi je veux afficher des dominos "normalement", c'est à dire deux carrés collés l'un à l'autre, et qui contiennent une image chacuns.
 
le code des dominos est :
 
<table class="piece"><tr><td><img ..></td><td><img ...></td></tr></table>
 
Avant d'être XHTML 1.1, j'avais pas le blanc sous les images, mais déjà l'espacement entre les <td>
 
C'est quoi qui déconne ?

Message cité 1 fois
Message édité par Arjuna le 05-01-2006 à 22:52:58
Reply

Marsh Posté le 05-01-2006 à 16:16:26    

cel a dit un <div id="piece"><img><img></div> fait tres bien office de domino ... pourquoi se tableautiser tout element a outrance ?

Reply

Marsh Posté le 05-01-2006 à 16:51:34    

parceque c'est comme ça :o
 
nan, parcequ'avec les div je savais que j'allais en chier un max alors qu'avec des tableaux ça a marché tout seul du premier coup sans devoir me prendre la tête avec la mise en page. je changerai après. mais à mon avis, div ou td j'aurai le même problème de blanc sous l'image non ?

Reply

Marsh Posté le 05-01-2006 à 20:34:03    

nannnnnnnnnnnnnnn :o

Reply

Marsh Posté le 05-01-2006 à 20:43:08    

Arjuna a écrit :


<table class="piece"><tr><td><img ..></td><td><img ...></td></tr></table>
 
Avant d'être XHTML 1.1, j'avais pas le blanc sous les images, mais déjà l'espacement entre les <td>
 
C'est quoi qui déconne ?


 
 
 :sweat:  Arjuna m'a tuer.... [:al bundy]

Reply

Marsh Posté le 05-01-2006 à 22:26:41    

Bah je regrette, sémantiquement, un domino c'est un tableau de deux cellules :o


Message édité par Arjuna le 05-01-2006 à 22:26:51
Reply

Marsh Posté le 05-01-2006 à 22:48:03    

table est un element pour afficher des données sous forme de tableau. C'est pas raisonnable de dire qu'un domino correspond a un tableau.
 
Le but de ma remarque c'etait simplement de te faire changer d'avis au cas ou tu n'aies pas pensé a plus simple que ce que tu faisais avec tes tables ; "Ha oué merde ... j'ai eut le bete reflexe de mettre un table sans me poser de question". Maintenant libre a toi de continuer comme ca.
 
Par contre explique pourquoi avec un div tu vas te faire "chier" alors qu'avec un tableau c'est plus simple ?
dans les deux cas tu vas devoir definir les marges et paddings puis la bordure ... avec la meme syntaxe, les memes proprietes ... bref je comprends pas ce sentiment de facilité que t'inspire un tableau :|

Reply

Marsh Posté le 05-01-2006 à 22:48:03   

Reply

Marsh Posté le 05-01-2006 à 22:52:24    

ben regarde le source : je ne gère pas la position de mes éléments, et vu comme je suis doué en CSS, je suis sûr et certain que je vais pas m'en sortir avec des DIV alors qu'avec des tables les dominos ne mettent bien les un à côté des autres tous bien alignés sans avoir à me soucier de leur positionnement.
 
ceci dit, si t'as un bout de code simple avec une CSS qui marche à me proposer, je veux bien tenter le coup

Reply

Marsh Posté le 05-01-2006 à 22:53:12    

Avec l'url corrigée, ça devrait aller vachement mieu :D

Reply

Marsh Posté le 05-01-2006 à 22:55:07    

Ton lien marche pas :s
 
Edit : ben maintenant il marche :p


Message édité par afbilou le 05-01-2006 à 22:56:02
Reply

Marsh Posté le 05-01-2006 à 23:01:52    

Sympas..mais faudrais l'optimiser ;)
 
Comme: quand tu passes tu chopes un domino.....
 
 
;)

Reply

Marsh Posté le 05-01-2006 à 23:09:18    

Ouais, mais le drag'n'drop c'est la merde à gérer en JS, d'autant plus qu'il n'y a pas deux navigateurs qui le supportent de la même manière (sans parler de ceux qui supportent pas du tout !)

Reply

Marsh Posté le 05-01-2006 à 23:09:34    

Ceci dit, l'idée est bien rangée dans un coin au chaud ;)

Reply

Marsh Posté le 05-01-2006 à 23:17:46    

:lol:
 
oki...Mais sinon quand on fait passer tu devrais redistribuer un domino....C'est mieux ;)

Reply

Marsh Posté le 05-01-2006 à 23:25:53    

C'était pas le sujet du TP qui m'a motivé pour faire ce truc ;)
 
Ceci dit, je suis d'accord avec toi, je vais gérer le tirage de nouveaux dominos :)

Reply

Marsh Posté le 05-01-2006 à 23:37:27    

Bon çà y est, j'ai réussi à centrer mon menu en utilsant float:left; et display:block; (merci Raphael Gotter pour ton précieux bouquin sur le CSS  ;) )
 
Voici le nouveau code CSS :

Code :
  1. #menuH {
  2.   text-align:left;
  3.   background-color: gray;
  4.   color: black;
  5.   height: 30px;
  6.   line-height: 30px;
  7.   width: 278px; /* modification */
  8.   margin: 0 auto; /* modification */
  9. }
  10. #menuH li {
  11.   float: left; /* modification */
  12.   margin: 8px 2px 0 2px; /* modification */
  13.   list-style-type: none;
  14. }
  15. #menuH li span {
  16.   display: none;
  17. }
  18. #lien1 a, #lien2 a, #lien3 a {
  19.   display: block; /* modification */
  20. }
  21. #lien1 a {
  22.   background : url(img/rss.jpg) no-repeat center center;
  23. }
  24. #lien2 a {
  25.   background : url(img/google.jpg) no-repeat center center;
  26. }
  27. #lien3 a {
  28.   background : url(img/firefox.jpg) no-repeat center center;
  29. }
  30. #menuH a {
  31.   width: 88px;
  32.   height: 15px;
  33.   display: block; /* modification */
  34. }
  35. #menuH a:hover {
  36.   text-decoration: none;
  37. }


Cela s'affiche correctement sur Firefox, Opera et IE 6.
Je n'ai pas testé sur IE 5.5, je verrais demain au boulot.
 
@+ et encore merci.
 
 [:fafane84]


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 05-01-2006 à 23:39:17    

Voilà, j'ai ajouté la pioche :)
 
Ceci dit, j'ai toujours pas de solution pour que mes dominos soient plus tout déformés :/

Reply

Marsh Posté le 05-01-2006 à 23:39:29    

Ah ben si :D

Reply

Marsh Posté le 05-01-2006 à 23:39:50    

Ah ben nan en fait :o

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed