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

Réponse 1 / 1
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Salut,

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

Bonne journée,
0
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
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Où est le code css ?
Peux tu nous montrer un extrait complet ?
0
fourmiagile Messages postés 19 Date d'inscription   Statut Membre Dernière intervention   > Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention  
 
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
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
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
abeille
 
Ok Pitet, ça marche nickel, merci.
A plus
0