Bordure sur un Iframe.

Résolu
abeille -  
 abeille -
Bonjour,
J'ai mis un texte en float droit d'un Iframe.
J'ai donc une vidéo à droite de mon texte.
Mais je voudrais qu'il y ait une bordure autour de cette vidéo.
Je ne sais pas comment faire.

Merci pour votre aide.

1 réponse

  1. Pitet Messages postés 2845 Statut Membre 530
     
    Salut,

    Tu peux utiliser la propriété css border : https://developer.mozilla.org/fr/docs/Web/CSS/border

    Bonne journée,
    0
    1. abeille
       
      Bonour Pitet, merci pour ta réponse, j'ai déjà essayé.
      J'ai fait "div class="floatdroit"><Iframe.......>
      mais ça ne fonctionne pas: pas de bordure.
      0
    2. Pitet Messages postés 2845 Statut Membre 530
       
      Où est le code css ?
      Peux tu nous montrer un extrait complet ?
      0
      1. fourmiagile Messages postés 19 Statut Membre > Pitet Messages postés 2845 Statut Membre
         
        Bonjour Pitet, merci pour ton aide.
        Voici le Html:
        <iframe width="640" height="360" style="float:right" src="https://www.youtube.com/embed/An2OWZH2guE" frameborder=1 marginwidth = 15px marginheight=15px allowfullscreen></iframe>texte ............

        Et voici le Css:
        body{ 
        margin-left: 7%;
        margin-right: 7%;
        font-family: tahoma, arial, helvetica, sans-serif;
        font-size: 150%;
        line-height: 150%;
        text-align: justify;
        background-color: #f2f2f2; }

        .imagetitre{
        margin:0;
        padding:0;
        background-image: no-repeat center fixed;
        }

        .textetitre{
        position:absolute;
        top: 30%; left: 1%; right: 1%;
        text-align: center;
        color: white;
        font-size: 240%
        }

        .iconeretour{
        position: fixed;
        font-size: 2em;
        right: 0;
        bottom: 2%;
        }

        .titresommaire{
        font-size: 170%;
        text-align: left;
        text-decoration: underline;
        font-weight: bold;
        color: blue;
        line-height: 200%;
        }

        .sommaire{
        font-size: 140%;
        text-align: left;
        line-height: 140%;
        font-weight: bold;
        text-decoration: none;
        }

        .titrechapitre{
        font-size: 170%;
        color: blue;
        font-weight: bold;
        text-decoration: underline;}


        .lien:link{color: blue;}
        .lien:visited{color: black;}
        .lien:active{color: green;}
        .lien:–{color: yellow;}


        .floatright a{
        float: right;
        border: 15px solid #F2F2F2;}

        .floatleft a{
        float: left;
        border: 15px solid #F2F2F2;}

        .imagegauche{/*pour les <img class="imagegauche"*/
        float: left;
        border: 15px solid #F2F2F2;}

        .imagedroit{
        float: right;
        border: 15px solid #F2F2F2;}

        .floatrightpasdebordure a{
        float: right;
        border: none;}


        .rouge{
        color: red}

        .gras{
        font-weight: bold;}


        .intro{
        font-size: 170%;
        text-align: left;
        color: black;
        line-height: 160%;
        font-weight: bold;}


        .bombeinsertion{
        background-color: #e0e0e0;
        line-height:1,2em;
        border:1px solid #000000;
        border-radius: 20px 20px 20px 20px;
        padding: 5px 5px 5px 5px;
        margin: 50px 10px 50px 500px;
        color: black;
        display : block ;}

        .encartmagma {
        background-color: #e0e0e0;
        text-align: justify;
        line-height:1,2em;
        border:1px solid #35a04d;
        border-radius: 20px 20px 20px 20px;
        padding: 20px 20px 20px 20px;
        margin: 0px 310px 0px 0px;}

        .pasdebordure{border:none;}

        .encartcirage {
        background-color: #e0e0e0;
        text-align: justify;
        line-height:1,2em;
        border:1px solid #35a04d;
        border-radius: 20px 20px 20px 20px;
        padding: 20px 20px 20px 20px;
        margin: 0px 30px 0px 30px;
        color: black;
        display : block ;
        }

        .galerielargeur {
        max-width: 20%;
        }

        .galerie {
        display: inline-block;
        width: 20%;
        vertical-align: middle;
        text-align: center;
        }
        img {
        max-width: 100%;
        }

        /* ----------------------info bulle------------------*/

        a.info {
        position: relative;
        color: black;
        text-decoration: none;
        border-bottom: 1px gray dotted; /* On souligne le texte. */
        }
        a.info span {
        display: none; /* On masque l'infobulle. */
        }
        a.info:hover {
        background: none; /* Correction d'un bug d'Internet Explorer. */
        z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */

        cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
        }
        a.info:hover span {
        display: inline; /* On affiche l'infobulle. */
        position: absolute;

        white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */

        top: 25px; /* On positionne notre infobulle. */
        left: -160px;

        background: white;

        color: black;
        font-size: 30px;
        padding: 3px;

        border: 1px solid grey;
        border-left: 2px solid grey;
        }


        #header {
        text-align: center;
        padding: -1;
        margin: -1;
        }
        /*--------------------fin info bulle -----------------------------*/
        Merci pour ton aide et tes explications.
        0
    3. Pitet Messages postés 2845 Statut Membre 530
       
      Tu peux définir une classe pour la balise iframe dans le code html, puis ajouter le style de cette classe dans le fichier css :
      <!-- HTML -->
      <iframe width="640" height="360" class="mon-iframe" src="https://www.youtube.com/embed/An2OWZH2guE" allowfullscreen></iframe>
      


      /* CSS */
      .mon-iframe {
        float: right;
        border: solid 2px red;
      }
      
      0
    4. abeille
       
      Ok Pitet, ça marche nickel, merci.
      A plus
      0