Sujets similaires

Bonjour à tous

Alors voila, j'ai une question (sans blague Nono !!!), j'ai toujours pas trouvée la réponse, du coup je fais appel à vous ^^

Je suis en train de faire le CSS et tout ce qui va avec sur un forum.
De un les catégories sont en onglet, bon pour ça pas de problème, c'est fait. Mais quand je mets ma PA, ben ça capote complet OO. En gros ma PA est bien placé, mais le fond de ma PA se rèpete juste en dessous et ça me décale également les catégorie juste en dessous ce qui fait que ça chevauche les QEEL. J'avoue ne pas comprendre pourquoi OO

Ce sera plus facile pour vous de voir ça en directe : http://the-clash-of-seasons.forumactif.fr/

Et le CSS, ça peut être utile (c'est juste le CSS du forum, le CSS de la PA est a part, mais je pense que ça viens plus du CSS du forum et des templates ><) :

Code:: body{
background-image: url("http://i48.servimg.com/u/f48/12/38/32/64/90383110.jpg");
background-repeat: no-repeat, repeat;
background-color: transparent, transparent;
background-attachment: scroll, scroll;
background-position: top center, inherit;
}

.forumline{
border: 1px #000000 ashed;
}

I{border-bottom:none; color:#FFEAD4;text-decoration: none
}

/* profil */

.catname{
background-color: white;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;}

/* poster-profile
----------------------------------------*/
/* rang */
.postrank {
display: block;
width: 170px;
font: small-caps bold 18px georgia;
text-align: center;
text-shadow: 1px 1px 1px #000;
padding: 5px;
margin: 10px auto;
}

/* avatar */
.postavatar {
display: block;
position: relative;
width: 220px;
height: 340px;
border-top: 2px solid #421B13;
background-image: url("http://i40.servimg.com/u/f40/09/00/55/89/10360710.jpg");
-moz-border-radius: 9px ;
-webkit-border-radius:9px;
-border-radius:9px;
-khtml-border-radius:9px;
box-shadow: 2px 2px 2px #000;
-moz-box-shadow: 2px 2px 2px #000;
-o-box-shadow: 2px 2px 2px #000;
-htm-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px #000;
}
.postavatar a img, .poster-profile a img {
width: 200px;
height: 320px;
min-width: 200px;
min-height: 320px;
max-width: 200px;
max-height: 320px;
background-image: url("http://i40.servimg.com/u/f40/09/00/55/89/10360710.jpg");
padding: 5px;
margin: 0 auto;
-moz-border-radius: 9px ;
-webkit-border-radius:9px;
-border-radius:9px;
-khtml-border-radius:9px;
}

/* pseudo */
.postpseudo {
width: 170px;
font: small-caps bold 17px georgia; /* ordre a respecter pour les normes W3C avec le raccourci font qui est le style variant weight size(ou)height familly dont on peut omettre toutes les propriétés sauf le size et le family dans l ordre */
text-align: center;
text-shadow: 1px 1px 1px #000;
padding: 4px;
margin: 7px auto 0; /* signifie que top est de 7px right-left centrent si le width est présent même en auto et bottom de 0px */
}
/* infos membre */
.postinfos {
display: block;
background-color: #824D3B;
width: 220px;
height: 120px;
overflow-y: auto; /* scrollbar y pour indiquer en hauteur */
color: black!;
font: 10px century gothic;
text-align: left;
border: 1px solid #28282a;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
padding: 1px 3px 2px;
box-shadow: 2px 2px 2px #000;
-moz-box-shadow: 2px 2px 2px #000;
-o-box-shadow: 2px 2px 2px #000;
-htm-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px #000;
margin: -3px auto 0;
}
/* boutons rpg */
.rpgbutton {
display: block;
background: none;
width: 170px;
height: 40px;
font: italic small-caps bold 18px georgia;
border: none;
margin: 7px auto;
}

.rpgcontent {
display: block;
background-color: #824D3B;
width: 220px;
height: 116px;
overflow-y: auto; /* scrollbar y pour indiquer en hauteur */
color: black!;
font: 12px century gothic;
text-align: left;
border: 1px solid #28282a;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
padding: 1px 3px 2px;
box-shadow: 2px 2px 2px #000;
-moz-box-shadow: 2px 2px 2px #000;
-o-box-shadow: 2px 2px 2px #000;
-htm-box-shadow: 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px #000;
margin: -3px auto 0;
}

/* image-rang */
.postrankimg img {
display: block;
max-width: 200px;
min-height: 200px;
padding: 3px 10px -3px; /*pareil que pour le margin sauf pour le auto qui ne fonctionne pas pour le padding */
margin: 4px auto -13px; /* positionnement du rang par rapport au haut avatar et si la valeur left n est pas spécifiée elle prend par défaut celle de right */
z-index: 1; /* on donne la priotié à cet élément */
}

/* ARRONDIS FORUM */

.forumline{
background-color: #421B13;
border: 1px dashed white;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;}

.button2{ -moz-border-radius: 5px;
-webkit-border-radius:5px;}

/* Titre Catégorie */
.categorie{
margin: 0px 0px;
border: 3px solid #000;
border-radius: 15px:
-moz-border-radius: 15px;
-webkit-border-radius: 15px;}

.titrecategorie{
margin-left: 15px;
padding: 3px;
display: block;
width: 150px;
margin-top: -43px;
border-top: 2px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color: black;
color: black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center}

/* Selection code */

.selectCode { float: right; text-transform: uppercase; cursor:pointer; }

/* Barre */

.hr{
display : none}

/*enlever images titres dans sujets*/
.nav img {
display : none;
}
/*fin*/

/* CODES */

.code
{
color : black; /* couleur du texte */
background-color : white; /* couleur du fond */
background-position : left;
border-left: 1px #91B08D solid;
border-right: 1px #91B08D solid;
border-top: 1px #91B08D dotted;
border-bottom: 1px #91B08D dotted;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
-khtml-border-radius: 14px;
}

/* CITATIONS */

.quote
{
color : black; /* couleur du texte */
background-color : white; /* couleur du fond */
background-position : left;
border-left: 1px #91B08D solid;
border-right: 1px #91B08D solid;
border-top: 1px #91B08D dotted;
border-bottom: 1px #91B08D dotted;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
-khtml-border-radius: 14px;
}

/* SPOILER */

.spoiler_closed /* -> apparence des spoilers quand ceux-ci sont fermés */
{
color : black; /* couleur du texte */
background-color : white; /* couleur du fond */
border-left: 1px #91B08D solid;
border-right: 1px #91B08D solid;
border-top: 1px #91B08D dotted;
border-bottom: 1px #91B08D dotted;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
}

.spoiler_content /* -> apparence des spoilers quand ceux-si sont ouverts */
{
color : black; /* couleur du texte */
background-color : white; /* couleur du fond */
background-position : left;
border-left: 1px #91B08D solid;
border-right: 1px #91B08D solid;
border-top: 1px #91B08D dotted;
border-bottom: 1px #91B08D dotted;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
-khtml-border-radius: 14px;
}

/* Surlignement Pseudo */

A:link {text-decoration: none !important;}
A:visited {text-decoration: none !important;}
A:active {text-decoration: none !important;}
A:hover {text-decoration: none !important;}

a {font-variant: small-caps;}

a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}

a[href]:hover{text-shadow: white 2px 2px 2px;}

/* Boutons arrondis connexion/prévisu */

.mainoption{
-moz-border-radius: 10px; /**** Border-radius signifie "rayon de la bordure", 10px le rayon de l'arrondissement *****/
-webkit-border-radius: 10px; /*** webkit signifie "kit web", 10px le rayon de l'arrondissement ****/
-khtml-border-radius: 10px; /*** pour linux ***/
-border-radius: 10px 10px 10px 10px;
}

.liteoption{
-moz-border-radius: 10px; /**** Border-radius signifie "rayon de la bordure", 10px le rayon de l'arrondissement *****/
-webkit-border-radius: 10px; /*** webkit signifie "kit web", 10px le rayon de l'arrondissement ****/
-khtml-border-radius: 10px; /*** pour linux ***/
-border-radius: 10px 10px 10px 10px;
}

/* PA */

.accueil .forumline{
background-color: transparent !important;
border: none !important;
}
.accueil .row1{
background-color: transparent !important;
border: none !important;
}

/* selon votre forum et sa hiérarchie, il faudra peut être rajouter le code suivant */

.accueil td.catHead{
background-image: none !important;
background-color: transparent !important;
border: none !important;
}

/* SUPRIMER MARGE DU HAUT ET DU BAS */

.bodyline {
border-width : 4px;
border-style: simple;
}
body{
margin-top: -10px;
margin-bottom: -10px;
}

.bodyline {
border-bottom: none;
}

/* Suppression des cadres */

.row3Right
{
border: none !important;
}
.thHead
{
border: none !important;
}
.thCornerL, .thCornerR, .thTop
{
border: none !important;
}
.thLeft, .thRight
{
border-left: none !important;
border-right: none !important;
}
.catLeft, .catRight
{
border: none! important;
}
.catHead
{
border: none !important;
}
.catBottom
{
border: none !important;
}

/* Sujet */

.bulle{
border : 1px solid white;
border-top: 1px solid white;
border-bottom: 1px solid white;
border-left: none !important;
border-right: none !important;
-moz-border-radius: 14px ;
-webkit-border-radius:14px;
-border-radius:14px;
-khtml-border-radius:14px;
margin-top: 20px;
padding : 15px;
min-height : 200px;
}

/*Catégorie en onglet*/
#conteneur{
position: relative; /*ne pas toucher*/
}

.my_modified_table{/*description des catégories : la total, image+descript+stat...*/
width: 80%;
margin-left: 10%;
margin-right: 10%;
margin-top: 5px !important;
font-family: Verdana;
}

.my_forum_name{
display:none;
}

.my_img{
width: 10%;
margin-left: 50px;
}

.my_disc{ /*partie description*/
width: 60%;
text-align:center;
font-size: 13px;
}

.my_stats{ /*partie statistique nbr de message, dernier posteur...*/
width: 20%;
text-align:justify;
font-size: 11px;
}

.myfoo_title{ /*Mise en forme des titres des catégorie*/
text-align:center;
text-shadow: #695034 2px 2px 2px;
width: 100%;
-moz-border-radius: 6px;
border-bottom: 3px solid white;
}

.my_title{ /*Fond arrière des titres catégorie*/
text-align:center;
font-size: 14px;
font-family: Arial;

}

.my_cat_body{ /*couleurs de fond catégorie*/
border: 1px solid #EEE;
-moz-border-radius: 3px;
margin: 40px;
background: #421B13; /*couleurs fond du forum catégorie*/
}

.my_cat ul{ /*position des onglets catégorie*/
margin:0;
padding: 0;
width: 750px !important;
position: absolute; /*ne pas toucher*/
left: -506px; /*modifie la position à gauche ou droite*/
top: 150px;
}

.my_cat li{
margin-left: 2px;
}

.my_cat_style{ /*Mise en forme des Catégorie onglet*/
font-family: Times New Roman, Times, serif; /*typo*/
font-size: 20px; /*taille police*/
text-align: center; /*alignement*/
padding-bottom: 12px; /*espacement entre les catégorie onglet*/
display:block;
font-weight: bold;
}
.my_cat a{ /*Enleve le soulignement des liens des catégorie onglet*/
text-decoration: none !important;
color: #fff!;
}

/*Fin catégorie en onglet*/

/**
* Début du QEEL by $hamr♣ck
*
*/

.qeel-principal{
border:1px dashed #fff;
background-color:#421b13;
padding:2px;
}

.qeel-principal .gensmall{
color:#111;
}

.qeel-titre{
height:75px;
border:1px dashed #fff;
background-image:url('URL_IMAGE');
}

#qeel-table{
margin:auto;
}

.qeel-stats{
background-color:yellow;
background: #bfd255; /* Old browsers */
background: -moz-linear-gradient(-45deg, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* FF3.6+ */
background: -webkit-linear-gradient(-45deg, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* IE10+ */
background: linear-gradient(-45deg, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* W3C */
width:160px;
margin-right:3px;
padding:10px;
padding-right:10px;
padding-top:30px;
padding-bottom:30px;
border-radius:50px;
color:#111;
}

.qeel-stats div{
padding-right:5px;
margin:auto;
height:220px;
overflow:auto;
text-align:justify;
}

.qeel-decrigroup div{
background-color:limegreen;
background: rgb(252,255,244); /* Old browsers */
background: -moz-linear-gradient(top, rgba(252,255,244,1) 0%, rgba(233,233,206,1) 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* W3C */

width:160px;
height:120px;
margin: 0 3px;
padding:15px;
padding-right:13px;
padding-top:30px;
padding-bottom:30px;
border-radius:50px;
}

.qeel-decrigroup p{
height:120px;
overflow:auto;
margin:auto;
padding-right:5px;
text-align:justify;
}

#qeel-descri-pnj,#qeel-descri-summer,#qeel-descri-autumn,#qeel-descri-winter,#qeel-descri-spring,#qeel-descri-city{
display:none;
}

.qeel-lastconnec{
background-color:wheat;
background: #9ecb2d; /* Old browsers */
background: -moz-linear-gradient(45deg, #9ecb2d 0%, #72aa00 49%, #8eb92a 50%, #bfd255 100%); /* FF3.6+ */
background: -webkit-linear-gradient(45deg, #9ecb2d 0%,#72aa00 49%,#8eb92a 50%,#bfd255 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #9ecb2d 0%,#72aa00 49%,#8eb92a 50%,#bfd255 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #9ecb2d 0%,#72aa00 49%,#8eb92a 50%,#bfd255 100%); /* IE10+ */
background: linear-gradient(45deg, #9ecb2d 0%,#72aa00 49%,#8eb92a 50%,#bfd255 100%); /* W3C */
width:160px;
margin-right:3px;
padding:10px;
padding-right:10px;
padding-top:30px;
padding-bottom:30px;
border-radius:50px;
}

.qeel-lastconnec div{
height:220px;
overflow:auto;
margin-right:3px;
padding-right:5px;
margin:auto;
}

.qeel-lastconnec td.row1{
background:transparent;
color:#111;
text-align:justify;
}

.qeel-nomgroup{
margin:0 auto;
width:495px;
height:30px;
margin-top:10px;
}
.qeel-nomgroup span{
display:block;
float:left;
padding:3px;
margin-right:8px;
margin-left:8px;
border-radius:10px;
border-bottom:2px solid #824D3B;
font-variant:small-caps;
color:#fff;
text-shadow:#000 2px 2px 1px;
cursor:crosshair;
cursor:move;
}

.qeel-nomgroup span:hover{
text-shadow:#9ecb2d 0px 0px 3px;
}

.qeel-credits{
text-align:justify;
padding:10px;
border-radius:15px;
border:1px solid #fff;
background-color:#000;
color:#999;
font-size:10px;
}

/**
* Fin du QEEL par $hamr♣ck pour Pépé le Putois sur WNL
* http://watch-n-learn.bbconcept.net/
*/

PS: j'effacerai le lien plus tard pour ne pas faire de pub

En vous remerciant d'avance ^^

Bonjour Nono

Peux-tu nous donner le code de ta page d'accueil stp?
Apparemment tu as du mettre la classe forumline dans celle-ci.

Alors voici le CSS et HTML de la PA :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css">
*{
margin: auto;
padding:auto;
}

#conteneur{ /*contient la pa*/
margin-top: 50px;
width: 700px;
height: 400px;
border-radius: 80px;
position: relative;

border-right: 3px solid #295777;
border-bottom: 5px solid #295777;

background-image: linear-gradient(bottom, rgb(195,222,227) 19%, rgb(230,247,245) 61%, rgb(195,222,227) 88%);
background-image: -o-linear-gradient(bottom, rgb(195,222,227) 19%, rgb(230,247,245) 61%, rgb(195,222,227) 88%);
background-image: -moz-linear-gradient(bottom, rgb(195,222,227) 19%, rgb(230,247,245) 61%, rgb(195,222,227) 88%);
background-image: -webkit-linear-gradient(bottom, rgb(195,222,227) 19%, rgb(230,247,245) 61%, rgb(195,222,227) 88%);
background-image: -webkit-gradient(linear, left bottom, left top,color-stop(0.19, rgb(195,222,227)),color-stop(0.61, rgb(230,247,245)), color-stop(0.88, rgb(195,222,227)));
}

.titre_pa_grand{ /*premier titre sur la pa*/
position: absolute;
top: 5px;
left: 100px;
font-size: 40px;
color: #2683c4;
text-shadow: 1px 0px 1px #ffffff;
}

.sous_titre_pa{
position: absolute;
top:40px;
right: 120px;
font-size: 25px;
color:#22333f;
text-shadow: 0px 1px 1px #ffffff;
}

.navigation{
position:absolute;
top: 90px;
left: 90px;
}

.bouton{ /*barre de navigation*/
text-decoration:none;
text-transform: uppercase;
background: #9eb9cb;
color: #0f2738;
border-radius: 20px;
margin: 3px;
padding: 2px;
}

.bouton:hover{ /*barre de navigation au passage de la souris*/
text-decoration:none;
text-transform: uppercase;
background: #0f2738;
color: #9eb9cb;
border-radius: 20px;
margin: 3px;
padding: 2px;
}

.staff{
position: absolute;
bottom: 10px;
left: 20px;
width: 170px;
height: 250px;
border-radius: 50px;
background: #a2bccf;
-webkit-box-shadow: 2px 3px 3px 0px #516472;
-moz-box-shadow: 2px 3px 3px 0px #516472;
box-shadow: 2px 3px 3px 0px #516472;
}

.contexte{
position: absolute;
bottom: 70px;
left: 200px;
width: 300px;
height: 180px;
border-radius: 50px;
background: #a2bccf;
-webkit-box-shadow: 2px 3px 3px 0px #516472;
-moz-box-shadow: 2px 3px 3px 0px #516472;
box-shadow: 2px 3px 3px 0px #516472;
}

.contexte p{
margin-top: 4px;
text-align: justify;
padding: 10px;
font-size: 12px;
}

.news{
position: absolute;
bottom: 10px;
right: 20px;
width: 170px;
height: 250px;
border-radius: 50px;
background: #a2bccf;
-webkit-box-shadow: 2px 3px 3px 0px #516472;
-moz-box-shadow: 2px 3px 3px 0px #516472;
box-shadow: 2px 3px 3px 0px #516472;
}

.titre{
font-size: 30px;
text-align: center;
color: #2a4263;
text-shadow: 1px 0px 8px #384a64;
}

.texte_news{
width: 150px;
height: 175px;
text-align: justify;
font-size: 12px;
padding : 3px;
overflow : auto;
}

.top_site{
position: absolute;
bottom: 20px;
left: 295px;
}

.top{
text-decoration: none;
font-size: 25px;
color: #1d395e;
}

/*INFOBULLE*/
a.infobulle .staff {
position: relative;
}

a.infobulle span {
display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
a.infobulle:hover span {
display: inline; /* ceci affiche l'infobulle */
position: absolute;

white-space: wrap; /* 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: 5px; /* on positionne notre infobulle */
left: 15px;

background: #090A09; /* arrière-plan de l'infobulle */

color: #B5B5B5; /* texte dans l'infobulle */
font-size: 10px;
font-variant: normal;
text-align: justify;
text-transform: none;
text-decoration: none;
padding: 4px;
width: auto;
height: auto;

/* bordures de votre infobulle*/
border: 4px solid #3B3A3A;
border-left: 4px solid #3B3A3A;
}

a{
text-decoration: none;
}

.ava_pv{
margin-top: 8px;
margin-left: 16px;
border: 2px solid #90abbf;
}

</style>

<title></title>
</head>
<body>

<div id="conteneur">
   <div class="titre_pa_grand">
      The Clash of Seasons
   </div>

   <div class="sous_titre_pa">Bienvenue à Toi, Evy S. Hudson</div>


   <div class="navigation">
      <a class="bouton" href="http://the-clash-of-seasons.forumactif.fr/t2-reglement-du-forum-a-lire-imperativement">Réglement</a>
      <a class="bouton" href="http://the-clash-of-seasons.forumactif.fr/t1-contexte-explications">Contexte</a>
      <a class="bouton" href="http://the-clash-of-seasons.forumactif.fr/t4-groupes-du-forum">Groupes</a>
      <a class="bouton" href="http://the-clash-of-seasons.forumactif.fr/f4-vos-scenarios">Scénarios</a>
      <a class="bouton" href="http://the-clash-of-seasons.forumactif.fr/t61-intrigue">Intrigue</a>
      <a class="bouton" href="http://the-clash-of-seasons.forumactif.fr/f6-coin-des-invites">Invités</a>
      <a class="bouton" href="http://the-clash-of-seasons.forumactif.fr/t12-vos-demandes-de-partenariat">Partenariat</a>
   </div> 

   <div class="staff">
      <div class="titre"> Staff </div>

      <a class="infobulle" href="http://the-clash-of-seasons.forumactif.fr/t35-b-nell-cooper-on-va-tous-muuuuuuriiiiiiiiir" target="_blank">
<img class="ava_pv" src="http://i40.servimg.com/u/f40/09/00/55/89/mure10.png">
<span><center><img src="http://i40.servimg.com/u/f40/09/00/55/89/emily10.png"><br>B. Nell Cooper<br>Fondatrice Sadique</center></span> 

<a class="infobulle" href="http://the-clash-of-seasons.forumactif.fr/t39-jordane-bayle-z-aime-le-disco" target="_blank">
<img class="ava_pv" src="http://i40.servimg.com/u/f40/09/00/55/89/mandar10.png">
<span><center><img src="http://i40.servimg.com/u/f40/09/00/55/89/scarle10.png"><br>Jordane Bayle <br>Fondatrice Sarcastique</center></span><br /> 

<a class="infobulle" href="lien du pv" target="_blank">
<img class="ava_pv" src="http://img11.hostingpics.net/pics/659182icon.png">
<span><center><img src="http://img11.hostingpics.net/pics/659182icon.png"><br>Nom Prenom<br>blablabla</center></span> 

<a class="infobulle" href="lien du pv" target="_blank">
<img class="ava_pv" src="http://img11.hostingpics.net/pics/659182icon.png">
<span><center><img src="http://img11.hostingpics.net/pics/659182icon.png"><br>Nom Prenom<br>blablabla</center></span><br /> 

<a class="infobulle" href="lien du pv" target="_blank">
<img class="ava_pv" src="http://img11.hostingpics.net/pics/659182icon.png">
<span><center><img src="http://img11.hostingpics.net/pics/659182icon.png"><br>Nom Prenom<br>blablabla</center></span> 

<a class="infobulle" href="lien du pv" target="_blank">
<img class="ava_pv" src="http://img11.hostingpics.net/pics/659182icon.png">
<span><center><img src="http://img11.hostingpics.net/pics/659182icon.png"><br>Nom Prenom<br>blablabla</center></span> 


   </div>

   <div class="contexte">
      <div class="titre"> Contexte </div>
      <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas.</p>
   </div>

   <div class="news">
      <div class="titre"> News </div>
      <div class="texte_news">
         Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas.
         Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas.

      </div>
   </div>

   <div class="top_site">
      <a class="top" href="#">★</a>
      <a class="top" href="#">★</a>
      <a class="top" href="#">★</a>
      <a class="top" href="#">★</a>

   </div>

</div> 

</body>
</html>

Yop, direction ici pour les demandes d'aide : http://www.css-actif.com/f17-aide-css-xhtml Smile

Bonjour,

Ce sujet ressemble plutôt a une demande d'aide et non a une suggestion ou une idée !
Merci de ne pas poster n'importe où sans lire les règles de chaque section. Donc votre problème sera déplacer dans la section appropriée.

Bonsoir,

Une série de petites erreurs sont à l'origine de ce résultat. On peut corriger ça assez rapidement en bidouillant quelques petits trucs.

Tout d'abord, il y a un problème avec l'identifiant #conteneur, qui est utilisé 2 fois sur ton forum. Un identifiant ne peut être attribué qu'une fois. Outre le soucis de validité, cela signifie surtout que lorsqu'on change le CSS relatif à cet identifiant pour arranger le visuel, des effets innatendus apparaissent car cela touche l'élément d'en dessous.

Il faut donc que tu commence par corriger ça, en en faisant une classe ou en spécifiant 2 identifiants bien distincts que l'on puisse travailler de manière ciblée sur le style de chaque bloc de ton forum (et tout ira alors super rapidement) =)

Ohhh je suis désolé ><
J'ai pas bien fait attention ! J'suis vraiment désolé, je croyais que j'avais postée au bonne endroit >< Des fois j'suis vraiment une quiche ><
Vous avez le droit de me frapper, je résisterai pas ! Je m'excuse La PA qui décalle tout Oo 3517359236

Espeon, tout d'abord merci de venir m'aider ^^
J'ai regardée mon code, mais je ne vois pas ou #conteneur est utilisé deux fois, que ce soit dans le CSS du forum, ou sur le CSS et HTML de la PA, je ne le vois qu'une fois. Bon j'avoue je suis bigleuse et à force d'avoir regardée mon code je ne le vois peut être plus.

Et aussi, mes deux CSS (PA et forum) sont en "conflit" car quand je poste ma PA, le CSS de celle ci est pas exactement le même. Il me rajoute une ombre porté blanche au survole derrière le texte dans "contexte et news" alors que je ne devrai pas en avoir.

J'arrive pas à trouver d’où ça viens ><

Vous avez bien deux fois la class "conteneur" une se trouve dans le CSS de votre page d'accueil et l'autre dans votre feuille de style donc il y a bien conflit entre les deux.
Je vous propose de changer celle de votre page d'accueil,CSS et HTML aussi,normalement ça devrait fonctionner.

Bonjour !

Tu es en train de coder un message d'accueil et non une page HTML complète. Le document possède déjà son doctype et ses balises d'ouverture et de fermeture, de ce fait tu vas commencer par retirer tout ça de ton code :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css">
*{
margin: auto;
padding:auto;
}

#conteneur{ /*contient la pa*/
margin-top: 50px;
width: 700px;
height: 400px;
border-radius: 80px;
position: relative;

border-right: 3px solid #295777;
border-bottom: 5px solid #295777;

background-image: linear-gradient(bottom, rgb(195,222,227) 19%, rgb(230,247,245) 61%, rgb(195,222,227) 88%);
background-image: -o-linear-gradient(bottom, rgb(195,222,227) 19%, rgb(230,247,245) 61%, rgb(195,222,227) 88%);
background-image: -moz-linear-gradient(bottom, rgb(195,222,227) 19%, rgb(230,247,245) 61%, rgb(195,222,227) 88%);
background-image: -webkit-linear-gradient(bottom, rgb(195,222,227) 19%, rgb(230,247,245) 61%, rgb(195,222,227) 88%);
background-image: -webkit-gradient(linear, left bottom, left top,color-stop(0.19, rgb(195,222,227)),color-stop(0.61, rgb(230,247,245)), color-stop(0.88, rgb(195,222,227)));
}

.titre_pa_grand{ /*premier titre sur la pa*/
position: absolute;
top: 5px;
left: 100px;
font-size: 40px;
color: #2683c4;
text-shadow: 1px 0px 1px #ffffff;
}

.sous_titre_pa{
position: absolute;
top:40px;
right: 120px;
font-size: 25px;
color:#22333f;
text-shadow: 0px 1px 1px #ffffff;
}

.navigation{
position:absolute;
top: 90px;
left: 90px;
}

.bouton{ /*barre de navigation*/
text-decoration:none;
text-transform: uppercase;
background: #9eb9cb;
color: #0f2738;
border-radius: 20px;
margin: 3px;
padding: 2px;
}

.bouton:hover{ /*barre de navigation au passage de la souris*/
text-decoration:none;
text-transform: uppercase;
background: #0f2738;
color: #9eb9cb;
border-radius: 20px;
margin: 3px;
padding: 2px;
}

.staff{
position: absolute;
bottom: 10px;
left: 20px;
width: 170px;
height: 250px;
border-radius: 50px;
background: #a2bccf;
-webkit-box-shadow: 2px 3px 3px 0px #516472;
-moz-box-shadow: 2px 3px 3px 0px #516472;
box-shadow: 2px 3px 3px 0px #516472;
}

.contexte{
position: absolute;
bottom: 70px;
left: 200px;
width: 300px;
height: 180px;
border-radius: 50px;
background: #a2bccf;
-webkit-box-shadow: 2px 3px 3px 0px #516472;
-moz-box-shadow: 2px 3px 3px 0px #516472;
box-shadow: 2px 3px 3px 0px #516472;
}

.contexte p{
margin-top: 4px;
text-align: justify;
padding: 10px;
font-size: 12px;
}

.news{
position: absolute;
bottom: 10px;
right: 20px;
width: 170px;
height: 250px;
border-radius: 50px;
background: #a2bccf;
-webkit-box-shadow: 2px 3px 3px 0px #516472;
-moz-box-shadow: 2px 3px 3px 0px #516472;
box-shadow: 2px 3px 3px 0px #516472;
}

.titre{
font-size: 30px;
text-align: center;
color: #2a4263;
text-shadow: 1px 0px 8px #384a64;
}

.texte_news{
width: 150px;
height: 175px;
text-align: justify;
font-size: 12px;
padding : 3px;
overflow : auto;
}

.top_site{
position: absolute;
bottom: 20px;
left: 295px;
}

.top{
text-decoration: none;
font-size: 25px;
color: #1d395e;
}

/*INFOBULLE*/
a.infobulle .staff {
position: relative;
}

a.infobulle span {
display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
a.infobulle:hover span {
display: inline; /* ceci affiche l'infobulle */
position: absolute;

white-space: wrap; /* 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: 5px; /* on positionne notre infobulle */
left: 15px;

background: #090A09; /* arrière-plan de l'infobulle */

color: #B5B5B5; /* texte dans l'infobulle */
font-size: 10px;
font-variant: normal;
text-align: justify;
text-transform: none;
text-decoration: none;
padding: 4px;
width: auto;
height: auto;

/* bordures de votre infobulle*/
border: 4px solid #3B3A3A;
border-left: 4px solid #3B3A3A;
}

a{
text-decoration: none;
}

.ava_pv{
margin-top: 8px;
margin-left: 16px;
border: 2px solid #90abbf;
}

</style>

<title></title>
</head>
<body>

et aussi ça :

Code:: </body>
</html>

Une fois que c'est fait, pour alléger encore plus le tout, tu vas récupérer tout ce qui était auparavant entre balises style et le placer dans la feuille de styles CSS personnalisée de ton forum (PA » Affichage » Couleurs » Feuille de styles)

Enfin, pour ce qui est de la remarque d'Espéon, il s'avère que tu as un conteneur pour ton message d'accueil, et un autre pour tes catégories, ce qui fait que les deux se mélangent, d'où le bug. Modifie le nom de la classe pour le message d'accueil (genre "conteneur-accueil") et ça devrait régler le problème '_'

Merci beaucoup ^^
Grave à vous c'est bon, le problème est résolu !

Un grand, grand merci ^^

Le sujet peut être archivé ^^

La PA qui décalle tout Oo

La PA qui décalle tout Oo

Sujets similaires

Sujets similaires

Partenaires Or