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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  css : decalage de span.

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

css : decalage de span.

n°1213995
fred_p
Posté le 03-10-2005 à 23:00:28  profilanswer
 

Je presume que le sujet a déjà été posé, mais je n'ai pas réussi à trouver de solution.
 
J'ai une liste qui me permet de faire un menu.  

Code :
  1. <div id="sousMenu">
  2.       <ul>
  3.         <li id="fdc">
  4.           <a href="#"><span>Fond de commerce</span></a>
  5.         </li>
  6.         <li id="imo">
  7.           <a href="#"><span>Immobilier</span></a>
  8.         </li>
  9.         <li id="nag">
  10.           <a href="#"><span>Notre agence</span></a>
  11.         </li>
  12.         <li id="con">
  13.           <a href="#"><span>Contacts</span></a>
  14.         </li>
  15.         <li id="lre">
  16.           <a href="#"><span>La region</span></a>
  17.         </li>
  18.         <li id="vev">
  19.           <a href="#"><span>Vous etes vendeurs</span></a>
  20.         </li>
  21.       </ul>
  22.     </div>


 
En css j'affecte des images aux liens, et grace au hover, je les change lors du survol.  
En m'inspirant du tuto de masklinn (http://forum.hardware.fr/hardwarefr/Programmation/Tutoriel-menus-rollover-images-irregulieres-rollovers-distance-sujet-64743-1.htm),  j'ai ajouté un span pour faire disparaitre le text du menu. Hors, sous ie6, un décalage apparait entre les éléments de la liste. Ce décalage n'apparait pas sous firefox. Si je ne mets pas le display à none sur le span, le décalage n'apparait pas, mais le text est visible sur l'image (pas énormement, c'est seulement visible sur les hover, sur la partie "ticked" des images).
 
Je ne dois pas être très loin de la solution, mais j'ai besoin d'être aiguillé vers la solution.
 
Les pages sont disponible là : http://www.e-sysoft.net/albaV2/index2.php (avec le display block)  
et là http://www.e-sysoft.net/albaV2/index.php avec le display:none).
 
Par avance merci, Fred.
 
 
 
 

mood
Publicité
Posté le 03-10-2005 à 23:00:28  profilanswer
 

n°1214045
sibelius
Vous êtes sûr ?
Posté le 04-10-2005 à 00:45:30  profilanswer
 

Pourrais-tu afficher la partie CSS concernée, afin qu'on puisse se rendre compte de ce que tu as fait ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°1214046
fred_p
Posté le 04-10-2005 à 00:50:42  profilanswer
 

le css est dans les pages  html. Je ne l'ai pas mis dans mon post pour ne pas le surcharger. Mais si vous preferez:
 
Position & géométrie du div contenant le menu

Code :
  1. #sousMenu
  2. {
  3. position: absolute;
  4. top:  134px;
  5. left: 10px;
  6. width: 150px;
  7. height:460px;
  8. background-color: transparent;
  9. }


le conteneur de la liste

Code :
  1. #sousMenu ul
  2. {
  3. display: block;
  4. position:absolute;
  5. margin: 0;
  6. padding: 0;
  7. list-style-type: none;
  8. }


 
le lien est definit pour prendre toute la place possible. Les images font en majorité 51px de haut.

Code :
  1. #sousMenu a
  2. {
  3. display: block;
  4. color: #3E88C6;
  5. width: 150px;
  6. height:51px;
  7. text-decoration: none;
  8. }


 
 
Ne change pas le comportement du menu, reste de mes tentatives...  

Code :
  1. #sousMenu a:hover
  2. {
  3. display: block;
  4. background-color: #3E88C6;
  5. }


 
Exemple avec le display none sur le span.  

Code :
  1. #sousMenu  ul li a span {
  2. display:none;
  3. margin: 0;
  4. padding: 0;
  5. }


 
 
 
les images de font sont affectées pour le hover et pour le reste. On ajuste la taille des éléments dont l'image est plus petite que les autres.

Code :
  1. #fdc {
  2. background: transparent url(./img/fdc1.gif) no-repeat left top;
  3. }
  4. #fdc a{
  5. height:47px;
  6. }
  7. #fdc a:hover {
  8. background: transparent url(./img/fdc2.gif) no-repeat left top;
  9. }
  11. #imo {
  12. background: transparent url(./img/immo1.gif) no-repeat left top;
  13. }
  14. #imo a {
  15. height:45px;
  16. }
  17. #imo a:hover{
  18. background: transparent url(./img/immo2.gif) no-repeat left top;
  19. }
  21. #nag {
  22. background: transparent url(./img/agen1.gif) no-repeat left top;
  23. }
  24. #nag a:hover{
  25. background: transparent url(./img/agen2.gif) no-repeat left top;
  26. }
  29. #con {
  30. background: transparent url(./img/contact1.gif) no-repeat left top;
  31. }
  32. #con a:hover{
  33. background: transparent url(./img/contact2.gif) no-repeat left top;
  34. }
  37. #lre {
  38. background: transparent url(./img/region1.gif) no-repeat left top;
  39. }
  40. #lre a:hover {
  41. background: transparent url(./img/region2.gif) no-repeat left top;
  42. }
  45. #vev {
  46. background: transparent url(./img/vendeur1.gif) no-repeat left top;
  47. }
  48. #vev a:hover{
  49. background: transparent url(./img/vendeur2.gif) no-repeat left top;
  50. }


 
 
l'autre css est strictement le même au display près.


Message édité par fred_p le 04-10-2005 à 08:55:57
n°1214171
fred_p
Posté le 04-10-2005 à 11:04:19  profilanswer
 

Bon, ben j'ai mis en place une css pourrie pour palier au problème.  
 

Code :
  1. #sousMenu  ul li a span {
  2. display:block;
  3. line-height:45px;
  4. font-size:0.1em;
  5. text-align:right;
  6. margin: 0;
  7. padding: 0;
  8. }


 
le text est affiché en tout petit à droite. Dans la topologie particulière de mon cas, on ne le voit pas. Je trouve cette solution d'un crade à tout épreuve, mais faute d'aide, c'est tout ce que j'ai pu faire.  
 
Merci quand même.

n°1214175
sibelius
Vous êtes sûr ?
Posté le 04-10-2005 à 11:09:26  profilanswer
 

Hello,
 
Tu as d'autres solutions ici :
http://blog-and-blues.org/weblog/2 [...] e-en-image
 
Pour ma part, j'utilise souvent un simple text-indent: -5000em;


Message édité par sibelius le 04-10-2005 à 11:10:10

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°1214181
gatsusat
Posté le 04-10-2005 à 11:18:45  profilanswer
 

la technique du text-indent c'est vraiment la technique la plus simple car le Span c'est seulement utile si au passage du lien on  a du text à afficher.

n°1214191
sibelius
Vous êtes sûr ?
Posté le 04-10-2005 à 11:25:10  profilanswer
 

exact dans ce cas


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

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

  css : decalage de span.

 

Sujets relatifs
Decalage classique en CSS2 problemes: décalage et floateur
Décalage dû à une iframe sous FFProblème Span
Pb alignement <img/><span> (code crade inside)Positionnement <SPAN> en CSS via JavaScript
Décalage à droite.(résolus)afficher une date gmt en y ajoutant un décalage horaire
Décalage de mes bloc quand je rétrécisma fenetre IEproblème de décalage aléatoire
Plus de sujets relatifs à : css : decalage de span.

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.055 secondes

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