28221 sujets

CSS et mise en forme, CSS3

Image de fond & <h2> --> BUG...

Bonjour,
qui peut m'aider pour ce petit problème:

Pour faire un menu onglet, j'ai fait une liste ou je donne a mon <li> une propriéte de fond afin d'afficher l'onglet.
Je compose ensuite mon menu avec en gros le code suivant:

<ul>
  <li><h2><a href="mon_lien" title="rub1">Rub1</a></h2></li>
  <li><h2><a href="mon_lien" title="rub2">Rub2</a></h2></li>
  <li><h2><a href="mon_lien" title="rub3">Rub3</a></h2></li>
   ...


Problème:
- sous internet explorer aucun pb
- sous mozilla, la balise h2 empêche l'image de fond de s'afficher. Des que je la retire ca marche.

Une idée du pourquoi du comment ?

upload/37-bug-h2.gif
hum excuse moi j'ai été un peu vite c'est plus entre <li> et <h2> que ça se passe.

Sauf que dans le code source du lien que tu nous donnes tu utilise une liste de définition.

en plus <dt><h2></h2></dt> c'est pas valide.

celà dit c'est possible que le fait que li et hn soit tout 2 des éléments bloc ça complique unpeu la solution. Je vérifie...
Grr pourquoi vous voulez pas mettre de padding à vos titres... c'est incroyable ;)

Le padding est pris en compte dans la largeur de l'élément (si il faut s'assurer qu'IE n'est pas en mode QUIRKS = brouillon qui fait n'importe quoi) Or ici il n'y a pas le prologue XML pour le mettre en mode QUIRKS donc pas de soucis.

Si tu spécifie une largeur à ton titre, et un padding, tu dois savoir que le padding s'ajoute à la largeur, donc si tu veux garder la même largeur, tu retranche la valeur du padding à la valeur de la largeur.
Et le mieux, c'est de ne pas spécifier de largeur, mais là tout dépend de comment c'est fait.

Pas trop la motivation ce soir pour farfouiller dans ton code l'endroit en question donc un petit copié/collé du code CSS en question et du code HTML serait top ! (juste la partie nécessaire).

@++
"Si tu spécifie une largeur à ton titre, et un padding, tu dois savoir que le padding s'ajoute à la largeur,"

dans le modèle standard !! mais doit on croire que IE respecte le modèle standard ?
Wep je me suis fourvoyé comme sur l'autre post. Mais concernant le fait qu'il vaut mieux ne pas spécifier de largeur là je suis catégorique ;) Et en plus c'est moins de code au final !
Si on décide de ne pas spécifier de largeur c'est sans doute parce qu'il était totalement inutile d'en mettre une bien avant toute considération sur les modèles de boites. Mais celà c'est un autre sujet car le problème ne serait pas à régler n'ayant même pu apparaitre.
Oulalalala, j'ai même pas encore essayer de vraiment tout regarder parce qu'au niveau xhtml c'est déjà pas trop ça.
Si la page à comme doctype xhtml strict, même si ça passe au validateur, ça ne veut pas forcemment dire que c'est correct. Le validateur il vérifie correctement l'orthographe, mais pas la grammaire.

Or la le menu c'est comme qui dirait du cafouillage sémantiquement illisible. En gros : ça ne veut rien dire au niveau du code.
On ne peut pas utiliser une liste de définition de cette façon, je te renvoie là pour plus d'infos : www.pompage.net/pompe/listesdefinitions/

Donc déjà, utilise plutôt une liste comme c'était le cas dans ton exemple de départ. Mais du coup, nous, on ne peut pas voir pour l'instant ce donne ta page avec des balises <ul><li>.

Pour ce qui est de la propriété 'float: left' ce n'est pas l'utilisation courante que l'on peut en avoir. Je ne suis pas un expert mais si c'est juste pour tout mettre sur une ligne utilise plutôt 'dislplay: inline'
Et là je te renvoie là : http://openweb.eu.org/articles/initiation_display/
Modifié le 25 Oct 2004 - 23:26
Pour éclaircir un peu quelques points:

- l'utilisation des listes de définition est en effet inappropriée. Ce menu est une simple liste de lien, donc de type <ul>

- l'utilisation des titres <h2> est tout aussi inappropriée : un titre précède un contenu sur lequel il apporte une information... et ici les titres ne sont suivis d'aucun contenu dans le document. Il faudrait utiliser simplement <li><a href="...>

- plus généralement, le choix du niveau de titrage dans la page est incorrect : outre les <h2> du menu, on a en tout et pour tout 1 <h4> et 6 <h6>. Or les titres doivent être utilisés en commençant par le niveau le plus élevé (<h1>) et en respectant de préférence la hiérarchie h1>h2>h3>etc. afin d'avoir une structure logique cohérente et de permettre accesoirement la navigation par les titres dans les lecteurs d'écrans et autres outils d'aide.
Raphael a écrit :
Non, IE ne respecte pas le modèle standard :
http://openweb.eu.org/articles/dimensions_boites_css/
http://www.alsacreations.com/articles/compatibilite/


Pas tout à fait :
- IE6 respecte parfaitement le box-model standard, mais peut appliquer aussi le box-model microsoft. Il passe de l'un à l'autre en fonction du doctype switching, tout comme mozilla, firefox, opera, etc.
- IE5.0 et IE5.5 n'appliquent que le box-model miscrosoft.

Sinon, accessoirement, et sans fausse pudeur : le box-model microsoft est indéniablement plus intuitif que le box-model W3C, et beaucoup plus efficace dans certains cas. Voir les remarques de Paul-Peter Koch : http://www.quirksmode.org/css/box.html
RastaPopoulos a écrit :
Pour ce qui est de la propriété 'float: left' ce n'est pas l'utilisation courante que l'on peut en avoir. Je ne suis pas un expert mais si c'est juste pour tout mettre sur une ligne utilise plutôt 'dislplay: inline'
Et là je te renvoie là : http://openweb.eu.org/articles/initiation_display/


Des deux solutions pour mettre une liste à l'horizontal, c'est en effet le display:inline qui semble préférable:
- code plus économique que les float
- possibilité de ne pas spécifier de largeur, ce qui peut être utile pour certains effets
- compatibilité plus large (le float nécessite une précision pour Opera < 7.60 sur la largeur du conteneur lorsqu'il est en position absolue par exemple. Voir http://blog-and-blues.org/weblog/2004/08/26/288-pseudo-bug-float-opera - explication dans les commentaires)
Sujet clos
Aller à