css : decalage de span.

Marsh Posté le 03-10-2005 à 23:00:28

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 :

<div id="sousMenu">
<ul>
<li id="fdc">
<a href="#">Fond de commerce</a>
</li>
<li id="imo">
<a href="#">Immobilier</a>
</li>
<li id="nag">
<a href="#">Notre agence</a>
</li>
<li id="con">
<a href="#">Contacts</a>
</li>
<li id="lre">
<a href="#">La region</a>
</li>
<li id="vev">
<a href="#">Vous etes vendeurs</a>
</li>
</ul>
</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.

Reply

Marsh Posté le 03-10-2005 à 23:00:28

Reply

Marsh Posté le 04-10-2005 à 00:45:30

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

Reply

Marsh Posté le 04-10-2005 à 00:50:42

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 :

#sousMenu
{
position: absolute;
top: 134px;
left: 10px;
width: 150px;
height:460px;
background-color: transparent;
}

le conteneur de la liste

Code :

#sousMenu ul
{
display: block;
position:absolute;
margin: 0;
padding: 0;
list-style-type: none;
}

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

Code :

#sousMenu a
{
display: block;
color: #3E88C6;
width: 150px;
height:51px;
text-decoration: none;
}

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

Code :

#sousMenu a:hover
{
display: block;
background-color: #3E88C6;
}

Exemple avec le display none sur le span.

Code :

#sousMenu ul li a span {
display:none;
margin: 0;
padding: 0;
}

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 :

#fdc {
background: transparent url(./img/fdc1.gif) no-repeat left top;
}
#fdc a{
height:47px;
}
#fdc a:hover {
background: transparent url(./img/fdc2.gif) no-repeat left top;
}
#imo {
background: transparent url(./img/immo1.gif) no-repeat left top;
}
#imo a {
height:45px;
}
#imo a:hover{
background: transparent url(./img/immo2.gif) no-repeat left top;
}
#nag {
background: transparent url(./img/agen1.gif) no-repeat left top;
}
#nag a:hover{
background: transparent url(./img/agen2.gif) no-repeat left top;
}
#con {
background: transparent url(./img/contact1.gif) no-repeat left top;
}
#con a:hover{
background: transparent url(./img/contact2.gif) no-repeat left top;
}
#lre {
background: transparent url(./img/region1.gif) no-repeat left top;
}
#lre a:hover {
background: transparent url(./img/region2.gif) no-repeat left top;
}
#vev {
background: transparent url(./img/vendeur1.gif) no-repeat left top;
}
#vev a:hover{
background: transparent url(./img/vendeur2.gif) no-repeat left top;
}

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

Message édité par fred_p le 04-10-2005 à 08:55:57

Reply

Marsh Posté le 04-10-2005 à 11:04:19

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

Code :

#sousMenu ul li a span {
display:block;
line-height:45px;
font-size:0.1em;
text-align:right;
margin: 0;
padding: 0;
}

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.

Reply

Marsh Posté le 04-10-2005 à 11:09:26

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

Reply

Marsh Posté le 04-10-2005 à 11:18:45

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.

Reply

Marsh Posté le 04-10-2005 à 11:25:10

exact dans ce cas

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

Reply

css : decalage de span.

Sujets relatifs:

Leave a Replay