Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1609 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1277639
fafane84
Posté le 05-01-2006 à 14:56:50  profilanswer
 

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
mood
Publicité
Posté le 05-01-2006 à 14:56:50  profilanswer
 

n°1277674
gatsu35
Blablaté par Harko
Posté le 05-01-2006 à 15:50:59  profilanswer
 

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;

n°1277691
fafane84
Posté le 05-01-2006 à 16:02:38  profilanswer
 

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
n°1277695
Arjuna
Aircraft Ident.: F-MBSD
Posté le 05-01-2006 à 16:09:27  profilanswer
 

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
n°1277700
afbilou
pouet your life
Posté le 05-01-2006 à 16:16:26  profilanswer
 

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

n°1277706
Arjuna
Aircraft Ident.: F-MBSD
Posté le 05-01-2006 à 16:51:34  profilanswer
 

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 ?

n°1277784
gatsu35
Blablaté par Harko
Posté le 05-01-2006 à 20:34:03  profilanswer
 

nannnnnnnnnnnnnnn :o

n°1277788
xtof_83
Freeride Spirit
Posté le 05-01-2006 à 20:43:08  profilanswer
 

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]

n°1277831
Arjuna
Aircraft Ident.: F-MBSD
Posté le 05-01-2006 à 22:26:41  profilanswer
 

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
n°1277855
afbilou
pouet your life
Posté le 05-01-2006 à 22:48:03  profilanswer
 

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

mood
Publicité
Posté le 05-01-2006 à 22:48:03  profilanswer
 

n°1277862
Arjuna
Aircraft Ident.: F-MBSD
Posté le 05-01-2006 à 22:52:24  profilanswer
 

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

n°1277863
Arjuna
Aircraft Ident.: F-MBSD
Posté le 05-01-2006 à 22:53:12  profilanswer
 

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

n°1277867
afbilou
pouet your life
Posté le 05-01-2006 à 22:55:07  profilanswer
 

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


Message édité par afbilou le 05-01-2006 à 22:56:02
n°1277873
xtof_83
Freeride Spirit
Posté le 05-01-2006 à 23:01:52  profilanswer
 

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

n°1277881
Arjuna
Aircraft Ident.: F-MBSD
Posté le 05-01-2006 à 23:09:18  profilanswer
 

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 !)

n°1277883
Arjuna
Aircraft Ident.: F-MBSD
Posté le 05-01-2006 à 23:09:34  profilanswer
 

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

n°1277889
xtof_83
Freeride Spirit
Posté le 05-01-2006 à 23:17:46  profilanswer
 

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

n°1277895
Arjuna
Aircraft Ident.: F-MBSD
Posté le 05-01-2006 à 23:25:53  profilanswer
 

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 :)

n°1277906
fafane84
Posté le 05-01-2006 à 23:37:27  profilanswer
 

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
n°1277908
Arjuna
Aircraft Ident.: F-MBSD
Posté le 05-01-2006 à 23:39:17  profilanswer
 

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

n°1277909
Arjuna
Aircraft Ident.: F-MBSD
Posté le 05-01-2006 à 23:39:29  profilanswer
 

Ah ben si :D

n°1277911
Arjuna
Aircraft Ident.: F-MBSD
Posté le 05-01-2006 à 23:39:50  profilanswer
 

Ah ben nan en fait :o

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[Analyse d'image numérique]rechercher d'un lien actif sur une page exterieur
rechercher un lien actif dans une page externeUne fonction peut-elle retourner le numéro de la ligne qui l'appelle ?
[RESOLU]Passer un paramètre avec des espaces[RESOLU]Fin de fichier
[resolu]declenche macro par touche clavier[résolu] Un menu sémantiquement correct ???
[Résolu][Batch] Renommer des fichiers 
Plus de sujets relatifs à : [résolu] Image de fond sur lien d'un menu "en ligne" ???


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR