28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous
Dans la page http://tests.osirisnet.net/centrale.htm je tente de mettre le carrousel dans une balise <iframe>
J'ai donc créé une page http://tests.osirisnet.net/carrousel.htm qui pour l'instant ne contient qu'une seule image, à transformer ensuite en carrousel sur le modèle de la page originelle.
Le problème, c'est comment faire en sorte que la hauteur de cet <iframe> soit 40% de sa largeur.
Le CSS qui fonctionne sur une <figure>
#diaporama:before {
	content: '';
	padding-top: 40%;
	display: inline-block;
}
ne fonctionne pas sur un <iframe>, je comprends très bien pourquoi, mais je ne trouve pas de solution "responsive". Sauf à dimensionner dynamiquement la balise par JavaScript, je ne vois pas de solution.
Votre aide me serait précieuse...
Modérateur
before / after ajoute du contenu à l'intérieur de la balise. Or le contenu d'une iframe n'est affichée que pour les navigateurs ne supportant pas les iframes, ce qui pose problème.

Mais il existe une solution simple:


<div class="iframe-container">
  <iframe … ></iframe>
</div>



.iframe-container {
  position: relative;
  padding-bottom: 40%;
}
.iframe-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}
Génial!
J'avais bien compris pourquoi le :before de marche pas, mais trouver la solution, c'est une autre histoire