[Résolu] Décalage de 2 divs autour d'une iFrame : pourquoi ?

Bonjour tout le monde,

Je suis face à un mystère que je ne parviens pas à résoudre. Voilà, j'essayais de faire quelque chose de simple : dans un conteneur d'une hauteur fixe, une iframe entourée de deux éléments (des liens previous / next). Ils prennent tous 3 la hauteur totale du conteneur.

Résultat escompté :
http://i.imgur.com/tJ8E1sQ.jpg?2

Avec 3 éléments bloc habituels (disons 3 divs), aucun problème : tous 3 en `display:inline-block`, et ça roule. Problème : dès lors que l'élément central est une iFrame, les deux liens sont décalés vers le bas de ~50%. Ce sera plus simple avec une démo : Fiddle

Mais mais mais... si on définit un `vertical-align` dans l'iframe (cf ligne 36 du CSS dans le fiddle)... hé ben ça se comporte comme attendu . Je me suis rendu compte de ça tout à fait par hasard, et je ne comprends pas du tout. Et j'aime pas ne pas comprendre.

Est-ce qu'un gourou du HTML/CSS saurait m'expliquer ce qui se passe ?
Merci de votre aide
Modifié par PierreAd (10 Aug 2013 - 20:36)

Salut,

je dirais que cela vient de ce que la valeur par défaut de la propriété vertical-align est baseline ce qui, pour un élément ayant un type de rendu inline (comme les liens A), stipule que le texte (en l'occurrence "<<" et ">>") doit être aligné avec la base de l'élément parent (ici le DIV #container). Un petit test consiste à supprimer ce texte des liens pour les voir se réaligner avec l'IFRAME.

Et comme je ne suis pas un gourou du CSS il se peut que l'explication soit tout autre.

Hello,

Voilà pour l'explication :
http://www.alsacreations.com/tuto/lire/1340-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html

Bonne soirée.

Hello,

Merci à vous deux pour vos réponses !

Heyoan, en effet, supprimer le texte des liens next/prev et/ou définir leur `vertical-align` à `top` règle le problème. En revanche, je pense que le pourquoi du comment réside plutôt dans le lien vers lequel Raphael m'a orienté, et notamment cette partie là :

Benjamin D.C. a écrit :
Ce comportement hétéroclite adopte par la même occasion une gestion singulière des alignements verticaux caractérisée par:
- un déploiement par défaut du contenu depuis un socle inférieur commun déterminé par l'élément inline-block le plus fourni en contenu ou, de manière plus générale, dont la hauteur dépasse les objets inline-block adjacents
- l'usage différent de la propriété vertical-align qui agit non plus sur le contenu de la boîte — comme c'est le cas pour les cellules d'une table — mais sur la boîte elle-même

J'avais déjà lu cet article (il y a longtemps), mais cette partie sur l'alignement vertical par rapport à la baseline m'avait échappé.

Par contre, je ne suis pas sûr de comprendre en quoi le fait de définir le `vertical-align` de l'iframe influait sur le positionnement des liens ? (si je donnais une valeur à la propriété `vertical-align` de l'iframe, quelle qu'elle soit, les liens autour se positionnaient correctement).

Quoi qu'il en soit, un grand merci à vous deux pour votre aide, et bon dimanche
PierreAd

PS : Et en passant, ça m'a permis de rebondir sur le très intéressant article "Impact sur le rendu de la mise en forme du code HTML".

Je marque ce sujet comme résolu, ç'aurait déjà dû être fait.