Sujets similaires

Sujet: Iframe détaché du CSS (fini merci ^^) Dim 24 Mar 2013, 17:23

Coucou ^^

Alors voilà je vous explique mon soucis, je début en Iframe, mais si j'ai bien compris le principe, cela permet d'afficher une page HTML sur un autre forum et pouvoir tout modifier à distance. Mais il me semble que le CSS de nos pages HTML devraient marcher non? Hors mon Iframe ne donne pas ce que je veux, quelqu'un peut m'expliquer ce que je dois faire pour avoir ce résultat dans mon tableau:
Iframe détaché du CSS (fini merci ^^) Pb_ifr10

Iframe détaché du CSS (fini merci ^^) Pb_ifr10

Voici l'apperçu de mon Iframe:

Spoiler:

Son code HTML:

Code:: <div style="width :592px; background-image: url('http://hitskin.com/themes/19/52/74/i_background.png'); margin: auto; padding: 20px;"><div style="width: 550px; background-color: #D4BDA3; padding: 20px;"><div style="font-family: mistral;color: #000000; font-size: 28px; letter-spacing: 0px; font-weight: normal; text-shadow: #4F402E 0px 2px 2px; text-align: center;"><img src="http://i12.servimg.com/u/f12/16/70/35/94/rival_10.png"/></div>
</div>
<br><div align="center"><div style="background-image: url('http://24.media.tumblr.com/tumblr_lyxi3en8hL1r8dkylo1_500.gif'); width: 500px; height: 120px; "></div></div>
<br><div style="width: 550px; background-color: #D4BDA3; padding: 20px;"><div style="font-family: arial;color: #000000; font-size: 10px; letter-spacing: 0px; font-weight: normal; text-align: justify;">Les années à Kyoto où tout était paisible et normal remontent à loin. En effet, les deux plus grandes universités de la ville se concentraient seulement sur l'éducation des élèves et de leurs résultats. Mais c'était sans compter la compétition qui régnait. Certains élèves, notamment ceux des sections d'arts martiaux commencèrent petit à petit à ressentir une rage profonde envers ceux de l'université adverse, sûrement à cause de divers combats qu'ils organisaient, perdant chacun l'un tour et n'acceptant visiblement pas cette défaite Naquit ensuite une guerre pour la gloire. Chaque université voulait être surnommée "La meilleure" et ce qu'importe le prix. Ousen et Ouran devinrent de grandes ennemies, et leurs élèves tout autant, les bagarres fusaient, que ce soit en ville ou dans les établissements respectifs. Il n'y avait aucune règle, rien pour les empêcher, sauf la mort. C'était là le seul mot à éviter, aucune mort ne devait être déclarée." <a href="lhttp://rival-gokusen-rpg.forumgratuit.org/t1-contexte-de-rival-gokusen">Lire la suite</a></div></div>

<table><tr><td><div style="width: 200px; height: 300px; background-color: #D4BDA3;"><div style="font-family: Amatic Sc;color: #000000; font-size: 28px; letter-spacing: 0px; font-weight: normal; text-shadow: #B27F64 0px 2px 2px; text-align: center;">Navigation</div><div id="subnav">
<a href="http://rival-gokusen-rpg.forumgratuit.org/t3-les-regles-a-lire">Rules</a><br>
<a href="http://rival-gokusen-rpg.forumgratuit.org/t2-description-des-deux-universites">Les Universités</a><br>
<a href="http://rival-gokusen-rpg.forumgratuit.org/t24-boite-a-questions-membres-invites#40">Boite à questions</a><br>
<a href="http://rival-gokusen-rpg.forumgratuit.org/t27-systeme-de-combat">Système de combats</a><br>
<a href="http://rival-gokusen-rpg.forumgratuit.org/f6-postes-vacants">Postes Vacants</a><br>
<a href="http://rival-gokusen-rpg.forumgratuit.org/f58-scenarios-des-membres">Scénarios des membres </a><br>
<a href="http://rival-gokusen-rpg.forumgratuit.org/t6-bottin-des-avatars"> Avatars Pris</a><br>
<a href="http://rival-gokusen-rpg.forumgratuit.org/f8-panneau-d-affichage-et-demandes"> Dernières annonces </a></div></td><td><div style="width: 350px; height: 300px; font-family: courrier new; letter-spacing: 1px;font-size: 11px; color: ; background-color: #D4BDA3;margin: 20px;"><div style="font-family: Amatic Sc;color: #000000; font-size: 28px; letter-spacing: 0px; font-weight: normal; text-shadow: #B27F64 0px 2px 2px; text-align: center;">Stats</div>
<blockquote><justify>― Au 24/03/13, Nous avons <u>17</u> membres enregistrés.
<br>― Nos membres ont posté un total de <u>1420</u> messages.
<br>― L'utilisateur enregistré le plus récent est Mortimer Emmett.
<br>― Le premier Event de RG est en place <a href="http://rival-gokusen-rpg.forumgratuit.org/t141-avant-toute-chose-le-contexte?tid=f431b438112cf23b897281ef8d118dc5" class="postlink">SUR CE TOPIC</a>, il s'agit d'un voyage commun entre les deux écoles.
― Nous recherchons toujours <u>NAKAHARA SHOUTA</u>, un des personnages principaux de cette aventure, pour voir ce personnage, <a href="http://rival-gokusen-rpg.forumgratuit.org/t16-garcons-d-ousen?tid=f431b438112cf23b897281ef8d118dc5" class="postlink">SUIVEZ CE LIEN</a>.</justify></blockquote></div></td></tr></table>
<div align="center"><div style="background-image: url('http://24.media.tumblr.com/tumblr_m7y04pkhk61qg47rao2_500.gif'); width: 500px; height: 150px; "></div></div><div style="font-size: 9px; text-align: right;"> <a href="http://rival-gokusen-rpg.forumgratuit.org/">© Rival Gokusen</a></div></div>

Ainsi que mon CSS:

Code:: .bodyline {
-moz-border-radius:0px;
border: 1px dashed #7A6B54;
padding: 0px;

}
a {font-variant: small-caps;
font-size: 12px;
font-family: times new roman;}

/* soulignement */
u {
text-decoration: none; /* retire le soulignement par défaut */
border-bottom: 2px solid #D6314B; /* épaisseur, type et couleur du soulignement */
/* arrondi du soulignement */
-moz-border-radius: 6px; /* Firefox 12 et versions précédentes */
-webkit-border-radius: 6px; /* Chrome et Safari */
border-radius: 6px; /* W3C */
}

.selectCode { float:right;
text-transform: uppercase;
cursor:pointer;
letter-spacing: 2px;
font-family: Courrier new; }

/*LIENS*/
a {color:#D6AA45;text-decoration:none;}
a:hover {cursor:crosshair; text-decoration:none !important; color:#D6314B;}

/******Ascenseur********/

.Ascenseur
{
position: fixed;
bottom : 0px ;
margin-left : 85%;
}

/* ------------- DECO SUJETS---------- */
.nsujets {font-family:courrier new;
letter-spacing:-1px;
color:grey;
font-size: 14px;
}

/* ------------- CHATBOX COULISSANTE SPOILER---------- */
.panneauCoulissant {
display: none; /* masque la partie chatbox */
height: auto;
width: 700px; /* largeur de la chatbox */
margin: 0 auto 20px;
}
.boutonSlide {
cursor: pointer;
text-align: center;
padding: 10px;
color: #7A6B54; /* couleur du texte "ChatBox" */
font-family: "Times New Roman", Times, serif;
font-size: 18px;
font-style: italic;
font-variant: normal;
}
.boutonSlide:hover {
/* style au survol de "ChatBox" */
color: #ffffff;
}

/* style de la mention "Il y a actuellement x utilisateur(s) sur la ChatBox" */
.chatters {
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
padding: 10px;
}

/*TITRES ET AUTRES*/

.topsites{
width: 150px;
height: 270px;
position:absolute;
top:1030px;
left: 25px;
border: 1px dashed #7A6B54;
background-color: #EADAC6;
-moz-border-radius: 0px;
text-align:center;
font-family: times new roman;
letter-spacing: 1px;
font-size: 10px}

.musique{
width: 150px; /*largeur*/
height: 50px; /*hauteur*/
position:absolute; /*le menu defile avec la page*/
top:950px; /*position par rapport au bord haut*/
left: 25px; /*position par rapport au bord gauche*/
border: 1px dashed #7A6B54;
background-color: #EADAC6;
-moz-border-radius: 40px; /*arrondis*/
text-align:center;
letter-spacing:2px;
font-family: courrier new;
font-size:20px;
color: #7A6B54;}

.titres
{height: auto;
background-color: #7A6B54;
border: 1px dashed #D9BE9F;
color: #D9BE9F;
font-family: Cinzel;
letter-spacing: 1px;
font-size: 20px; }

.soustitres
{background-color: #D4C9BA;
color: #7A6B54;
text-align: left;
font-family: Cinzel ;
font-size: 18px;
letter-spacing: 2px;
line-height: 15px; }

.annonce
{ width:650px;
height: auto;
background-color: #EADAC6;
border: 1px dashed #7A6B54;
color: #7A6B54;
font-family: times new roman;
letter-spacing: 1px;
font-size: 13px;
text-align: justify;
}

.code
{font-family:Georgia;
letter-spacing:1px;
color: #7A6B54;
background-image:url('http://i49.servimg.com/u/f49/15/49/49/31/gr3210.jpg');
border: 1px dashed #7A6B54;
width: 400px;
height: auto;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:00px;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;}

.quote
{font-family:Georgia;
letter-spacing:1px;
color: #7A6B54;
background-image:url('http://i49.servimg.com/u/f49/15/49/49/31/gr3210.jpg');
border: 1px dashed #EADAC6;
width: 400px;
height: auto;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;}

.fondlien
{background-image:url('http://i49.servimg.com/u/f49/15/49/49/31/fond_v10.png');
background-repeat: repeat;
width: 100%;
Height: 40px;
margin-right: 10px;
border-top: 3px solid red;
border-bottom: 3px solid red;}

.lien
{font-family:Georgia;
Text-shadow: 1px 1px 2px white;
letter-spacing:-1px;
color:#339966;
font-size:30px;}

.Contexte{
font-family: Amatic sc;
letter-spacing: 1px;
font-size: 25px;
color: white;}

.Date{font-family: Amatic sc;
letter-spacing: 1px;
font-size: 20px;
color: white;}
/******PROFIL********/

.postdetails.poster-profile a img {
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
border: 2px solid #7A6B54;
background-color:#7A6B54;
background-repeat: repeat;
}

.contour nom {
background-color:#EADAC6');
background-repeat: repeat;
border: 2px solid #7A6B54;

text-shadow: #ffffff 1px 1px 1px;
font-family: serif bold sc;
letter-spacing: -1px;
}

/******Profil et feuille perso********/
.input, textarea, select {
background-image:url('http://i49.servimg.com/u/f49/15/49/49/31/gr3210.jpg');
color: #7A6B54;
font-family: courrier new;
letter-spacing:0px;
}

.profilentour /* contour complet ava+nom */{
text-align: center;
width: 220px;
padding: 8px;
background-color:#EADAC6;
-moz-border-radius: 0px;
display:block;
border-right: 5px solid #7A6B54;
border-left: 5px solid #7A6B54;
border-top: 1px dashed #7A6B54;
border-bottom: 1px dashed #7A6B54;
padding: 2px;
}

.profilentinfos {
text-align: left;
letter-spacing: 1px;
padding: 8px;
background-color:#EADAC6;
display:block;
border-right: 5px solid #7A6B54;
border-left: 5px solid #7A6B54;
padding: 2px;

}

.profiledetails {
font-family: GEORGIA;
text-align: center;
padding: 8px;
background-color:#EADAC6;
text-align: center;
-moz-border-radius: 00px;
}

.profil1{
font-family: times new roman;
background-color:#D9BE9F;
font-family: Trebuchet MS;
font-size: 13px;
div style=" width: 30px;
span style="font-size: 18px;
font-style: font-weight: font: arial black;
color: #7A6B54;
text-shadow: 1px 1px 1px black

width: 130px; height:30px;
-moz-border-radius : 00px 0px 0px 0px;
border: 1px dashed #7A6B54;
padding-right: 10px; padding-left: 10px;"
text-align: center;
}

.rotationavatar {
-moz-transform: rotate(8deg);
-webkit-transform: rotate(8deg);
transform: rotate(8deg); }

/* CATEGORIES */

.secondarytitle {
background-image: url('http://i12.servimg.com/u/f12/17/67/18/58/cata_h11.png');
background-repeat: no-repeat;
background-color: transparent;
height: 100px;
width: 900px;
padding-top: 20px;
}

.imgbas {
background-image: url('http://i12.servimg.com/u/f12/17/67/18/58/bas_ca10.png');
background-repeat: no-repeat;
background-color: transparent;
height: 100px;
width: 900px;
padding-bottom: 50px;
}

.catposition a {
text-align: center;
}

.contourImgNews /* cadre pour les images de nouveaux sujets */{
-moz-border-radius:100px;
-o-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
width:70px;
height: 70px;
background-color: #EADAC6;
border: 1px dashed #7A6B54;
position:absolute;
top: -30px;
left: -20px;
}

.hierarchy {
position:absolute;
top : -10px;
left:50px;
margin-left: 20px;
background-color:#EADAC6;
font-size: 30px;
text-shadow: 1px 1px 1px wheat;
letter-spacing: 5px;
font-family: times new roman;
padding-left: 10px;
padding-right: 10px;
}
.sousForum {
margin-left: 30px;
font-family: times new roman;
letter-spacing: 1px;
}

.contourCates /* cadre central pour sous forum */ {
text-align: justify;
font-family: times new roman;
letter-spacing: 1px;
position : relative;
border: 3px solid #7A6B54;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
margin-top: 30px;
}

.contourDescription /* cadre central pour sous forum */ {
-moz-border-radius:0px;
-o-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
width: 90%;
height:60px;
overflow:auto;
background-color: none;
border: 1px dashed #7A6B54;
background: url(http://i70.servimg.com/u/f70/17/37/57/79/i_back10.jpg);
text-align: justify;
margin: auto;
padding: 3px;
margin-left: 30px;
margin-top: 30px;
}

.contourDernierMess/* cadre qui entoure les derniers messages et le nombre de sujets */ {
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
width: 200px;
background-image: url(http://hitskin.com/themes/19/52/74/i_background.png);
border: 3px solid #7A6B54;
height: 100px;
margin: 10px;
text-align:center;
margin-top: 30px;
}

.cadreStatistique /* cadre interne affichage des derniers sujets */{
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-border-radius: 0px;
border: 1px dashed #7A6B54;
background-color: #EADAC6;
font-size: 10px;
color: #7A6B54;
font-family: times new roman;
letter-spacing: 1px;
}

/*CHATBOX*/
body.chatbox {
background-image: url(http://hitskin.com/themes/19/52/74/i_background.png);
background-repeat: repeat;
}
#chatbox_header .chatbox-options .genmed,
#chatbox_header .chatbox-options,
#chatbox_header .chatbox-options a {
color: #7A6B54;
background-repeat: repeat;
background-image: url(http://hitskin.com/themes/19/52/74/i_background.png);
}
body.chatbox {
background-image: url(http://hitskin.com/themes/19/52/74/i_background.png);
}
.chatbox_row_1,
.chatbox_row_2,
.chatbox_row_3,
.chatbox_row_1 a,
.chatbox_row_2 a,
.chatbox_row_3 a {
color: white;
}

/*INFOBULLE*/

.infobulle > div{
display: inline-block;
psition:relative;

/* on positionne notre infobulle par rapport au bloc conteneur */
position: absolute;
top: 1000px; /* position par rapport au haut du bloc .infobulle */
left: 300px; /* position par rapport à la gauche du bloc .infobulle */

/* Et puis on rajoute tous les éléments de mise en forme de l'infobulle */
background: none; /* arrière-plan de l'infobulle */
color: black; /* texte dans l'infobulle */
padding: 0px; /* marges internes par rapport aux bords */

/* bordures de votre infobulle*/
border: 2px groove #339966;
}

/* Lorsqu'on survole le contenu du bloc */
.infobulle:hover > div{
display: block; /* ceci affiche l'infobulle (on peut aussi utiliser inline au lieu de block) */
}

/*accordéon*/

@charset 'utf-8';
/*************************************************!
*
* project: liteAccordion - a horizontal accordion plugin for jQuery
* author: Nicola Hibbert
* url: http://nicolahibbert.com/liteaccordion-v2/
* demo: http://www.nicolahibbert.com/demo/liteAccordion/
*
* Version: 2.0.2
* Copyright: (c) 2010-2011 Nicola Hibbert
* Licence: MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
color: black;
font-size: 16px;
font-weight: normal;
margin: 0;
z-index: 100;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
display: block;
padding-right: 8%;
text-align: right;
height: 90%;
margin-top: 5px;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.accordion .slide > h2 b {
display: inline-block;
position: absolute;
top: 13%;
left: 10%;
text-align: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }

/***************************************** Light */
.accordion {
border: 2px solid #7887a6;
border-bottom-width: 3px;
padding: 5px 5px 6px 0;
background-image:url('http://i47.servimg.com/u/f47/17/37/57/79/fond11.jpg');
-webkit-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
-ms-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background-image:url('http://i47.servimg.com/u/f47/17/37/57/79/fond11.jpg'); text-shadow: 0 -1px 0 none; line-height: 265% }
.accordion .slide > h2 span {
background: #7887a6;
background: -moz-linear-gradient(left, #fcfcfc 0%, #ededed 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcfcfc), color-stop(100%,#ededed));
background: -webkit-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
background: -o-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
background: -ms-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
background: linear-gradient(left, #fcfcfc 0%,#ededed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 );
-webkit-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
-moz-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
-o-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
color: white;
}
.accordion .slide > h2 b { background: none; color: #909090; text-shadow: -1px 1px 0 none }
.accordion .slide > h2.selected span, .accordion .slide h2.selected span:hover, .accordion .slide > h2.selected b { background: none }
.accordion .slide > div { background-image:url('http://i47.servimg.com/u/f47/17/37/57/79/fond11.jpg'); margin-left: 5px }

/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }

/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.accordion .slide > h2 b { top: 44% }
.accordion .slide > h2 span { filter: none }

/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }

/* centrer l'accordéon */
.accordion { margin: auto; }

/*******TABLEAU A ONGLETS*******/

.mon_onglet{
display: block;
padding: 2px;
margin: 2px;
color: #000;
}

.mon_onglet:hover{
background: none;
box-shadow: 2px 2px 2px #7887a6;}

.mon_onglet_selected{
display: block;
padding: 2px;
margin: 2px;
background: none;
box-shadow: 2px 2px 2px #7887A6;}

.clear{
clear: both;}

.mon_contenu{
color: #000;
background: silver;
border: 3px double #7887A6;
padding: 0px;
margin: 0 px;
height: 120px;
line-height: normal;
font-size: 12px;
width: 230px;
height: 130px;}

#mes_contenus, #mes_onglets{
height: 100%;
width:100%;}

/*IMAGE FLOTTANTE*/

.postbody img.left,
.postbody img.right {
margin: 5px; /* Place une marge autour de l'image */
width: 100px; /* Fixe la largeur d'une image flottante */
height: 100px; /* Fixe la hauteur d'une image flottante */
border: solid #ffffff 3px; /* Définit une bordure autour de l'image */

/* Arrondi les bords de l'image */
-webkit-border-radius: 100px;
-o-border-radius: 5px;
-htm-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

.left {
float: left;
width: 90%;
Height: 450px;
background-color: red;
border: 2px blue;
color: white;
letter-spacing: -1px;
}
}

/* ------------- FICHE RPG STAFF
Créee par Orange de CSSActif (http://www.css-actif.com)
Merci de conserver cette mention par respect ----------- */
div.cssactif_fiche { /* Fond de la fiche */
background-image: url(http://i47.servimg.com/u/f47/17/37/57/79/fond11.jpg); /* Couleur de fond */

-webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
-moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */

-webkit-box-shadow: 0px 0px 10px 0px #7887a6; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #7887a6; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #7887a6; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */

}

div.cssactif_fiche_header { /* En-tête avec image de fond */
background-repeat: none; /* Empêche la répétition de l'image du header */
background-position: top center; /* Postionne l'image du header en haut, au center */

width: 100%;
height: 150px; /* Donne la hauteur en px du header, l'image de header devrait être même hauteur ou plus grande */

border-bottom: 15px double #7887a6 ; /* Bordure au bas du header: ÉPAISSEURpx STYLE #COULEUR (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#border-style) */

/* Bordures supérieures arrondies (voir: http://border-radius.com/) */
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;

}

div.cssactif_fiche_titre h1 { /* Titre prénoms & nom */

font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */

font-size: 32px; /* Taille du texte: TAILLEpx */

text-shadow: 1px 1px 0px #000; /* Ombre du texte */

color: #7887a6; /* Couleur du texte */

margin: 0; /* Supprime la marge par défaut de l'élément h1 */

text-align: right; /* Aligne le titre à droite */
text-transform: uppercase; /* Met le titre en majuscules */

}

div.cssactif_fiche_titre { /* Titre + feat */
/* Positionne le titre "à cheval" sur la bordure */
position: relative;
top: -28px;

text-align: right; /* Aligne le texte à droite */

padding-right: 20px; /* Défifine une marge interne */
color: #7887a6; /* Couleur du feat */
}

div.cssactif_fiche h2 { /* Sous-titres "Identité", "Opinions" etc. */
background-color: silver; /* Couleur du fond des sous-titres */
border-color: #7887a6; /* Couleur de la bordure */
border-width: 1px 0px; /* Taille de la bordure: HAUT & BAS GAUCHE & DROITE */
border-style: solid; /* Style de la bordure */

-webkit-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */

text-align: center; /* Aligne le titre au centre */
text-transform: uppercase; /* Met le titre en majuscules */
font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
color: #7887a6; /* Couleur du titre */
margin: 0; /* Supprimer marge */
font-size: 20px; /* TAILLE DU TEXTE: TAILLEpx */
font-weight: normal; /*Épaisseur du texte */
text-shadow: 1px 1px 0px #7887a6; /*Ombre du texte */
letter-spacing: 5px; /* Espacement des caractères */

}

.cssactif_fiche_content { /* Contenu */
padding: 10px; /* Marge interne */
text-align: justify; /* Justifie le texte */
text-shadow: 1px 1px 0px #000; /*Ombre du texte */
}

.cssactif_fiche em { /* Libellés */
font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
color: #7887a6; /* Couleur du titre */
font-style: normal;
text-transform: uppercase;

}
/* ------------- FIN FICHE STAFF */

/*FICHE DE LIEN*/
.fondfiche{
width: 600px;
height: auto;
background-color: silver;
border-top: 3px solid #588AB0;
border-bottom: 3px solid #588AB0;
}

fondava{
width: 200px;
height: 320px;
background-color: #588AB0;
border: 3px solid white;
}

fonddes{
width: 300px;
height: 320px;
background-color: #588AB0;
border: 3px solid white;
font-color: white;
letter-spacing: -1px;
text-shadow: 1px 1px 1px black;
}

fondblabla{
overflow:auto;
width: 90%;
height: 90px;
size: 10px;
color: #588AB0;
}

fondlienperso{
width: 550px;
height: 220px;
background-color: #588AB0;
border: 3px solid white;
color: white;
letter-spacing: -1px;
text-shadow: 1px 1px 1px black;
}

/*NAVIGATION fiche RG*/
#subnav {

width: 200px;

}

#subnav A:link, #subnav A:visited, #subnav A:active {

font-family: verdana;
font-size: 12px;
letter-spacing:1px;
text-align: center;
padding: 2px;
color: #7A6B54;
background-color: #EADAC6;
line-height: 10px;
display: block;

border-bottom: 1px dotted #7A6B54;
border-right: 1px dotted #7A6B54;

}

#subnav A:hover {
color: #7A6B54;
background-color: #D9BE9F;
}

/* MISE EN FORME DES LISTES DE SUJETS */

.bloc_sujets
{
width: 900px;
margin: auto;
background: url('http://hitskin.com/themes/19/52/74/i_background.png');
border: 1px solid #7A6B54;
box-shadow: 0px 0px 3px #868686;
-o-box-shadow: 0px 0px 3px #868686;
-moz-box-shadow: 0px 0px 3px #868686;
-webkit-box-shadow: 0px 0px 3px #868686;
-htm-box-shadow: 0px 0px 3px #868686;
padding: 5px;
}
.sujets
{
background: #EADAC6;
border: 1px dotted #7A6B54;
padding: 3px;
}
.topictitle
{
font-variant: small-caps;
font-size: 12px;
}
.sujets_auteur
{
display: block;
width: 200px;
font-size: 11px;
}
.sujet_last
{
display: block;
width: 180px;
height: 40px;
background: #EADAC6;
border-left: 3px solid #7A6B54;
border-right: 3px solid #7A6B54;
padding-top: 10px;
font-size: 11px;
}
.sujets_stats
{
width: 900px;
text-align: right;
margin-bottom: 5px;
}
.sujets_stats_contenu
{
font-size: 10px;
color: #7A6B54;
}

/* QEEL ONGLETS LATERAUX ONCLIC FOCUS */

#qeel_bloc
{
height: 650px;
margin-bottom: 40px;
}
#qeel_head
{
width: 900px;
height: 280px;
background: #EADAC6;
}
#qeel_body
{
width: 900px;
height: 150px;
background: #EADAC6 repeat-y;
}

#qeel_foot
{
width: 900px;
height: 350px;
margin-top: -10px;
background: #EADAC6;
}
#newbottom
{
background-image: url(http://host.image.files.free.fr/host/4a04c4821c594back-bottom.png);
background-repeat: no-repeat;
background-position: center;
}

#qeel
{
padding-top: 20px;
padding-bottom: 20px;
}
.qeel_onglet1
{
width: 150px;
height: 20px;
padding: 4px;
margin-left: 10px;
margin-bottom: 10px;
background: url(http://img15.hostingpics.net/pics/946125patrival.png);
border: 2px dotted #7B6B53;
box-shadow: 0px 0px 4px #7B6B53;
-moz-box-shadow: 0px 0px 4px #7B6B53;
-o-box-shadow: 0px 0px 4px #7B6B53;
-htm-box-shadow: 0px 0px 4px #7B6B53;
-webkit-box-shadow: 0px 0px 4px #7B6B53;
font-weight: bold;
color: #7B6B53;
text-shadow: 1px 1px 0px #CFB697;
text-align: center;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.qeel_onglet2
{
width: 150px;
height: 20px;
padding: 4px;
margin-left: 10px;
margin-bottom: 10px;
background: url(http://img15.hostingpics.net/pics/946125patrival.png);
border: 2px dotted #7B6B53;
box-shadow: 0px 0px 4px #7B6B53;
-moz-box-shadow: 0px 0px 4px #7B6B53;
-o-box-shadow: 0px 0px 4px #7B6B53;
-htm-box-shadow: 0px 0px 4px #7B6B53;
-webkit-box-shadow: 0px 0px 4px #7B6B53;
font-weight: bold;
color: #7B6B53;
text-shadow: 1px 1px 0px #CFB697;
text-align: center;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.qeel_onglet3
{
width: 150px;
height: 20px;
padding: 4px;
margin-left: 10px;
background: url(http://img15.hostingpics.net/pics/946125patrival.png);
border: 2px dotted #7B6B53;
box-shadow: 0px 0px 4px #7B6B53;
-moz-box-shadow: 0px 0px 4px #7B6B53;
-o-box-shadow: 0px 0px 4px #7B6B53;
-htm-box-shadow: 0px 0px 4px #7B6B53;
-webkit-box-shadow: 0px 0px 4px #7B6B53;
font-weight: bold;
color: #7B6B53;
text-shadow: 1px 1px 0px #CFB697;
text-align: center;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.qeel_onglet1:hover, .qeel_onglet2:hover, .qeel_onglet3:hover
{
margin-left: 20px;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.qeel_contenu1
{
position: absolute;
z-index: 1;
width: 685px;
height: 150px;
overflow: auto;
margin-left: 200px;
margin-top: -40px;
background-image: url('http://img15.hostingpics.net/pics/946125patrival.png');
border: 2px dotted #7B6B53;
box-shadow: 0px 0px 4px #7B6B53;
-moz-box-shadow: 0px 0px 4px #7B6B53;
-o-box-shadow: 0px 0px 4px #7B6B53;
-htm-box-shadow: 0px 0px 4px #7B6B53;
-webkit-box-shadow: 0px 0px 4px #7B6B53;
font-weight: bold;
color: #7B6B53;
text-shadow: 1px 1px 0px #CFB697;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
}
.qeel_contenu2
{
position: absolute;
z-index: 2;
width: 685px;
height: 150px;
overflow: auto;
margin-left: 200px;
margin-top: -80px;
background: url(http://img15.hostingpics.net/pics/946125patrival.png);
border: 2px dotted #7B6B53;
box-shadow: 0px 0px 4px #7B6B53;
-moz-box-shadow: 0px 0px 4px #7B6B53;
-o-box-shadow: 0px 0px 4px #7B6B53;
-htm-box-shadow: 0px 0px 4px #7B6B53;
-webkit-box-shadow: 0px 0px 4px #7B6B53;
font-weight: bold;
color: #7B6B53;
text-shadow: 1px 1px 0px #CFB697;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
}
.qeel_contenu3
{
position: absolute;
z-index: 3;
width: 685px;
height: 150px;
overflow: auto;
margin-left: 200px;
margin-top: -120px;
background: url(http://img15.hostingpics.net/pics/946125patrival.png);
border: 2px dotted #7B6B53;
box-shadow: 0px 0px 4px #7B6B53;
-moz-box-shadow: 0px 0px 4px #7B6B53;
-o-box-shadow: 0px 0px 4px #7B6B53;
-htm-box-shadow: 0px 0px 4px #7B6B53;
-webkit-box-shadow: 0px 0px 4px #7B6B53;
font-weight: bold;
color: #7B6B53;
text-shadow: 1px 1px 0px #CFB697;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
}
.qeel_contenu4
{
position: absolute;
z-index: 4;
width: 685px;
height: 150px;
overflow: auto;
margin-left: 204px;
margin-top: -129px;
background: url(http://img15.hostingpics.net/pics/946125patrival.png);
border: 2px dotted #7B6B53;
box-shadow: 0px 0px 4px #7B6B53;
-moz-box-shadow: 0px 0px 4px #7B6B53;
-o-box-shadow: 0px 0px 4px #7B6B53;
-htm-box-shadow: 0px 0px 4px #7B6B53;
-webkit-box-shadow: 0px 0px 4px #7B6B53;
font-weight: bold;
color: #7B6B53;
text-shadow: 1px 1px 0px #CFB697;
}
.qeel_contenu
{
padding: 4px;
color: #7B6B53;
font-size: 11px;
text-shadow: 1px 1px 0px #CFB697;
text-align: justify;
font-weight: normal;
}
.qeel_onglet1:hover .qeel_contenu1, .qeel_onglet2:hover .qeel_contenu2, .qeel_onglet3:hover .qeel_contenu3
{
margin-left: 180px;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.qeel_onglet1:focus .qeel_contenu1, .qeel_onglet2:focus .qeel_contenu2, .qeel_onglet3:focus .qeel_contenu3
{
z-index: 10;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);}

/*PA EN ONGLETS*/
/* .systab .tab => les onglet */
.systab .tab {
padding: 2px 10px;
margin-right: 5px;
color: #7A6B54;
background-color: #EADAC6;
border: 1px dashed #7A6B54;
cursor: pointer;
height: 80px;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover {
color: #7A6B54;
font-size:12px;
letter-spacing: 1px;
background-color: #D9BE9F;
border: 2px dashed #7A6B54;
height: 80px;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{
color: #7A6B54;
background-color: #D9BE9F;
border: 2px dashed #7A6B54;
height: 80px;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
/* .systab .contents => les conteneurs des contenus associés aux onglets */
.systab .contents {
margin-top: 1px;
margin-bottom: 1px;
color: #7A6B54;
background-color: #EADAC6;
border: 2px dashed #7A6B54;
height: 420px;
width: 650px;
padding: 10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
/* style des onglets si ils sont à gauche ou à droite */
.systab.s_float .tab,.systab.s_float .tab {
display: block;
margin: 5px;
}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab.s_float .tabs,.systab.s_float .contents {
float: left;
}

/* BLOC ANIMATION STAFFY */

/* CSS crunched with Crunch - http://crunchapp.net/ */
.NomStaff{align: center;
font-family: Amatic Sc;
letter-spacing: 1px;
color: #D6314B;
padding: 5px;
font-size: 24px;}

.RangStaff{text-align: center;
font-family: Grand Hotel;
letter-spacing: 1px;
color: #D6314B;
padding: 5px;
font-size: 18px;}

/* Bloc principal RIN*/
.monBlocRin {
position: relative; /* important ! */
overflow: hidden; /* cache tout ce qui dépasse du bloc. Si vous voulez que votre volet dépasse, retirez cette ligne */
width: 200px; /* largeur du bloc */
height: 120px; /* hauteur du bloc */
background-image: url(http://hitskin.com/themes/19/52/74/i_background.png); /* couleur de fond */
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border: 1px dashed #7A6B54;
}

/* Bloc de recouvrement */
.blocVoletRin {
position: absolute; /* positionnement absolu (important) */
top: 0; /* (important) */
left: 0; /* (important) */
width: 200px; /* largeur du bloc (identique au bloc principal) */
height: 120px; /* hauteur du bloc (identique au bloc principal) */
background-image: url(http://i12.servimg.com/u/f12/17/67/18/58/rin10.png); /* couleur de fond */
border: 1px dashed #7A6B54;
/* réglage de la transition */
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

/* Changement au survol */
.monBlocRin:hover > .blocVoletRin {
left: -200px; /* le bloc se décalera vers la gauche de 200px; (largeur du bloc) */
}

/* Bloc principal MIDORI */
.monBlocMidori {
position: relative; /* important ! */
overflow: hidden; /* cache tout ce qui dépasse du bloc. Si vous voulez que votre volet dépasse, retirez cette ligne */
width: 200px; /* largeur du bloc */
height: 120px; /* hauteur du bloc */
background-image: url(http://hitskin.com/themes/19/52/74/i_background.png); /* couleur de fond */
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border: 1px dashed #7A6B54;
}

/* Bloc de recouvrement */
.blocVoletMidori {
position: absolute; /* positionnement absolu (important) */
top: 0; /* (important) */
left: 0; /* (important) */
width: 200px; /* largeur du bloc (identique au bloc principal) */
height: 120px; /* hauteur du bloc (identique au bloc principal) */
background-image: url(http://i12.servimg.com/u/f12/17/67/18/58/midori10.png); /* couleur de fond */
border: 1px dashed #7A6B54;
/* réglage de la transition */
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

/* Changement au survol */
.monBlocMidori:hover > .blocVoletMidori {
left: -200px; /* le bloc se décalera vers la gauche de 200px; (largeur du bloc) */
}

/* Bloc principal TAE */
.monBlocTae {
position: relative; /* important ! */
overflow: hidden; /* cache tout ce qui dépasse du bloc. Si vous voulez que votre volet dépasse, retirez cette ligne */
width: 200px; /* largeur du bloc */
height: 120px; /* hauteur du bloc */
background-image: url(http://hitskin.com/themes/19/52/74/i_background.png); /* couleur de fond */
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border: 1px dashed #7A6B54;
}

/* Bloc de recouvrement */
.blocVoletTae {
position: absolute; /* positionnement absolu (important) */
top: 0; /* (important) */
left: 0; /* (important) */
width: 200px; /* largeur du bloc (identique au bloc principal) */
height: 120px; /* hauteur du bloc (identique au bloc principal) */
background-image: url(http://i12.servimg.com/u/f12/17/67/18/58/tae10.png); /* couleur de fond */
border: 1px dashed #7A6B54;
/* réglage de la transition */
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

/* Changement au survol */
.monBlocTae:hover > .blocVoletTae {
left: -200px; /* le bloc se décalera vers la gauche de 200px; (largeur du bloc) */
}

/* Bloc principal ABE */
.monBlocAbe {
position: relative; /* important ! */
overflow: hidden; /* cache tout ce qui dépasse du bloc. Si vous voulez que votre volet dépasse, retirez cette ligne */
width: 200px; /* largeur du bloc */
height: 120px; /* hauteur du bloc */
background-image: url(http://hitskin.com/themes/19/52/74/i_background.png); /* couleur de fond */
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border: 1px dashed #7A6B54;
}

/* Bloc de recouvrement */
.blocVoletAbe {
position: absolute; /* positionnement absolu (important) */
top: 0; /* (important) */
left: 0; /* (important) */
width: 200px; /* largeur du bloc (identique au bloc principal) */
height: 120px; /* hauteur du bloc (identique au bloc principal) */
background-image: url(http://i12.servimg.com/u/f12/17/67/18/58/abe10.png); /* couleur de fond */
border: 1px dashed #7A6B54;
/* réglage de la transition */
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

/* Changement au survol */
.monBlocAbe:hover > .blocVoletAbe {
left: -200px; /* le bloc se décalera vers la gauche de 200px; (largeur du bloc) */
}

/* Bloc principal YUYU */
.monBlocYuyu {
position: relative; /* important ! */
overflow: hidden; /* cache tout ce qui dépasse du bloc. Si vous voulez que votre volet dépasse, retirez cette ligne */
width: 200px; /* largeur du bloc */
height: 120px; /* hauteur du bloc */
background-image: url(http://hitskin.com/themes/19/52/74/i_background.png); /* couleur de fond */
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border: 1px dashed #7A6B54;
}

/* Bloc de recouvrement */
.blocVoletYuyu {
position: absolute; /* positionnement absolu (important) */
top: 0; /* (important) */
left: 0; /* (important) */
width: 200px; /* largeur du bloc (identique au bloc principal) */
height: 120px; /* hauteur du bloc (identique au bloc principal) */
background-image: url(http://i76.servimg.com/u/f76/17/67/18/58/yu10.png); /* couleur de fond */
border: 1px dashed #7A6B54;
/* réglage de la transition */
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

/* Changement au survol */
.monBlocYuyu:hover > .blocVoletYuyu {
left: -200px; /* le bloc se décalera vers la gauche de 200px; (largeur du bloc) */
}

/* Bloc principal BIENTOT */
.monBlocBientot {
position: relative; /* important ! */
overflow: hidden; /* cache tout ce qui dépasse du bloc. Si vous voulez que votre volet dépasse, retirez cette ligne */
width: 200px; /* largeur du bloc */
height: 120px; /* hauteur du bloc */
background-image: url(http://hitskin.com/themes/19/52/74/i_background.png); /* couleur de fond */
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border: 1px dashed #7A6B54;
}

/* Bloc de recouvrement */
.blocVoletBientot {
position: absolute; /* positionnement absolu (important) */
top: 0; /* (important) */
left: 0; /* (important) */
width: 200px; /* largeur du bloc (identique au bloc principal) */
height: 120px; /* hauteur du bloc (identique au bloc principal) */
background-image: url(http://i12.servimg.com/u/f12/17/67/18/58/biento10.png); /* couleur de fond */
border: 1px dashed #7A6B54;
/* réglage de la transition */
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

/* Changement au survol */
.monBlocBientot:hover > .blocVoletBientot {
left: -200px; /* le bloc se décalera vers la gauche de 200px; (largeur du bloc) */
}

/*fiche de présentation*/
.Avatar{-moz-border-radius:00px;
-o-border-radius:00px;
-webkit-border-radius:00px;
border-radius:00px;
width:200px;
height: 320px;
background-color: #EADAC6;
border: 3px solid #7A6B54;
position:absolute;
top: -30px;
left: -40px;}

.Prezz{text-align: justify;
font-family: times new roman;
letter-spacing: 1px;
position : relative;
border: 3px solid #7A6B54;
background-image: url(http://hitskin.com/themes/19/52/74/i_background.png);
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
width: 600px;
height: 1200px;}

.texte{padding-left: 230px;
font-family: times new roman;
letter-spacing: 1px; }

.nom{padding-left: 200px;
font-family: Amatic sc;
letter-spacing: 1px;
font-size: 50px;
color: white;}

.descrip{width: 98%;
align:center;
height: 150px;
overflow:auto;
font-family: courrier new;
letter-spacing: 1px;
background-color:#EADAC6;
font-size: 11px;
color: #7A6B54;
padding: 5px;}

.tiitre {
margin-left: 10px;
margin-right: 10px;
padding-bottom: 5px;
font-family: Impact;
text-align: center;
color: #7A6B54;
font-size: 15px;
background-color: transparent;}
.contenuu {
-moz-border-radius: 5px ;
border-radius: 5px ;
border: 1px #7A6B54 dotted;
background-color: #EADAC6;
padding: 6px 10px;
height: 100%;
text-align: center;}

.widget_flottant
{
width: 130px;
height: 22px;

position:absolute;
top: 50px;
left: 25px;
}

Merci beaucoup pour vos futures explications ^^

Sujet: Re: Iframe détaché du CSS (fini merci ^^) Mar 26 Mar 2013, 14:22

Bonsoir !

Une page html normalement construite ressemble à ceci :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titre de la page</title>

<style type="text/css">
Code CSS
</style>
</head>

<body>
Contenu de la page
</body>
</html>