Tableau et vidéo qui sortent de la zone prévu

[Silky Darkness]

Bonjour à tous,

Voilà, avec le tableau à 3 onglets que vous fournissez, j'ai réussis le personnaliser.
Seulement voilà, j'ai comme vous pouvez le voir ci-dessous un texte encadré ainsi qu'une vidéo youtube, mais ceux-ci dépassent de la zone prévu.

J'ai navigué sur le forum, mais je n'ai pas trouvé de sujet similaire.

Voici le code de l'onglet en question: Je pense que j'ai du faire des erreurs...

Code:

<div id="co_1" class="mon_contenu">  <iframe width="420" height="315" src="http://www.youtube.com/embed/_egZ9OGs5hc" frameborder="0" allowfullscreen></iframe><FIELDSET style="width: 550px; border: 5px solid #342B27;-moz-border-radius: 8px; border-radius: 8px; -webkit-border-radius: 8px; -webkit-box-shadow: 3px 6px 9px #120F0E; background-color: #52433E; ">
    <LEGEND><i><span style="font-size: 24px; line-height: normal"><font face="Times New Roman"> Bienvenue</font></span></i></LEGEND>
    <table><tr><td><ul><div align="left"><div style="height: 100px; overflow:auto;">
Il avançait dans l'ombre d'une ruelle déserte, le revolver toujours pointé dans l'alignement de ses deux bras tendus devant lui. L'atmosphère était pesante. L'angoisse submergeait l'homme dont les rides du front se perlaient de sueur froide. Le souffle court, haletant presque, il peinait à se mouver dans ce décor en ruines. Effrayé à l'idée de ce qu'il y avait à découvrir au prochain croisement, il ralentit d'avantage et empêchait ses poumons de se remplirent d'oxygène de peur d'engendrer trop de bruits. Soudain, son corps devint de marbre. Son coeur cessa sa danse. Quelque chose posait pieds derrière lui. Il tenta de faire face au monstre mais celui-ci se montra plus rapide. Un coup de feu retentit, puis quelque chant d'agonie qui s'évanouit bientôt dans des grognements bestiaux et caverneux... Quand l'humanité décide de retirer l'âme de ses gens des Enfers, c'est l'Enfer lui-même qui répond à l'appel...
</td></tr></table>

</FIELDSET></div>

Spoiler:

Merci à tous ceux qui prendront le temps de m'aider ^^ !

[Invité]

Bonjour et Bienvenue sur le Forum des Forums Forumactif Vu que vous êtes nouveau, voici quelques sujets importants : Sécurité : mail de fondation - Ce qu'il ne faut pas faire Questions/Réponses fréquentes - Listing Trucs et astuces - Listing La fonction Rechercher La FAQ de Forumactif.com N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse

Bonjour,

Pourriez-vous nous donner la partie CSS associée aux onglets?

Cordialement.

[FANCH 56]

Bonjour
Essaies avec ceci pour la vidéo

Code:


 <iframe width="320" height="215" src="http://www.youtube.com/embed/_egZ9OGs5hc" frameborder="0" allowfullscreen></iframe>

Diminue le width et le height en mettant 320/215

[Silky Darkness]

Bonjour,

Voici le CSS que j'utilise pour faire ce tableau:

Code:

.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #fff;
  border: 1px solid #000;
  cursor: pointer;
  margin-bottom: -1px;
  list-style: none;
}
.mon_onglet:hover{
  background: #b8efa1;
}       
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #fff;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  border-bottom: 1px solid #fff;
  cursor: pointer;
  margin-bottom: -1px;
  list-style: none;}         
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #fff;
  border: 1px solid #000;
  padding: 10px;
  line-height: normal;
  font-size: 11px;}
#mes_contenus, #mes_onglets{
  width: 400px;
  margin: auto;}

Merci pour la vidéo, je vais tout de suite l'essayer.

Edit: Le code pour la vidéo fonctionne, merci. Elle ne dépasse plus du tableau ! J'ai aussi modifier height et width pour l'encadré, il ne dépasse plus aussi. Merci beaucoup !

Par contre, comment faire pour que les couleurs du tableau changent ? Comme pour ce forum: http://www.thefamilychon.com/ ?

[Invité]

Bonjour,

Les couleurs sont gérées par le code CSS, je vous ai annoté le CSS pour vous aider à le modifier:

Code:

/*onglet non selectionné*/
.mon_onglet{
  float: left;/*positionnement*/
  padding: 2px 10px;/*marges intérieures*/
  margin-right: 5px;/*marge extérieure droit*/
  color: #000;/*couleur de texte*/
  background: #fff;/*couleur de fond*/
  border: 1px solid #000;/*contour*/
  cursor: pointer;/*apparence du curseur*/
  margin-bottom: -1px;/*marge inférieure*/
  list-style: none;/*retrait des puces des listes*/
}
/*onglet au survol*/
.mon_onglet:hover{
  background: #b8efa1;/*couleur de fond*/
}
/*onglet sectionné*/
.mon_onglet_selected{
  float: left;/*positionnement*/
  padding: 2px 10px;/*marges intérieures*/
  margin-right: 5px;/*marge extérieure droite*/
  color: #000;/*couleur du texte*/
  background: #fff;/*couleur de fond*/
  border-top: 1px solid #000;/*contour supérieur*/
  border-right: 1px solid #000;/*contour droit*/
  border-left: 1px solid #000;/*contour gauche*/
  border-bottom: 1px solid #fff;/*contour inférieur*/
  cursor: pointer;/*apparence du curseur*/
  margin-bottom: -1px;/*marge inférieure*/
  list-style: none;/*retrait des puces des listes*/}       
.clear{
  clear: both;
}
/*contenu correspondant aux onglets*/
.mon_contenu{
  color: #000;/*couleur du texte*/
  background: #fff;/*couleur de fond*/
  border: 1px solid #000;/*couleur des contours*/
  padding: 10px;/*marge intérieure*/
  line-height: normal;/*espacement des lignes*/
  font-size: 11px;/*aille de la police*/}
#mes_contenus, #mes_onglets{
  width: 400px;/*largeur globale*/
  margin: auto;/*marges extérieures*/}

Cordialement.

[Silky Darkness]

Oh, merci beaucoup ^^ ! En effet, ça va m'aider !

Bonne journée !

EDIT: J'ai réussis à le colorer, merci beaucoup. Par contre, je ne suis pas satisfaite du résultat... j'aimerai que les bords de mon tableau soient arrondis. J'ai fait des recherches sur ce forum, et j'ai essayé pas mal de code, mais ils ne fonctionnent pas... :/

[Ea]

Bonjour,


Alors réservez la question pour un autre sujet.

Votre problème signalé dans celui-ci étant résolu je le considère comme résolu.