28172 sujets

CSS et mise en forme, CSS3

Salut,

J'ai une barre de menu horizontale contenue dans un <div> qui a une image de fond. Cette image contient des icones espacees mais sans texte. Ca ressemble a ca (les lettres symbolisent les icones) :

[o] . . . [x] . . . . .[r] . . . . .[y] . . . . .[p]

Puis dans ce <div> je met une liste avec des <li> floatés a gauche qui contiennent des liens <a>, ce qui donne :

[o] lien .[x] lien . .[r] lien . . [y] lien . .[p] lien

Chacun de ces <a> est decalé vers la droite avec un text-indent : 20px;

Probleme: si le site est chargé dans une petite fenetre plutot qu'en plein ecran, les liens se mettent a chevaucher les icones suivant la taille de la fenetre. Autrement dit ma petite mise en page de liens n'est plus du tout respectée. Que faire pour contourner ce probleme ?

(PS: y a t-il beaucoup de gens qui surfent sur internet avec une fenetre qui n'est pas en plein ecran ?)
Modifié par apericube (20 Sep 2009 - 20:28)
Bonjour,

Pour la question statistique, impossible de répondre, mais je dirais suffisament pour qu'ils soient pris en compte.

Pour la solution, il faut changer ce que tu as fait et mettre chaque icone individuelle en BG de l'élément de liste concerné. Cela évitera également que le texte chevauche les icones en cas d'agrandissement des caractères (ce qui est très courant comme pratique).