Problème d'affichage de catégorie

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème d'affichage de catégorie

Message par naima-kell le Mar 18 Sep 2012 - 0:16

Bonjour !

Mon collègue admin et moi faisons face à un petit problème d'affichage depuis quelques jours. Il a codé des catégories et depuis qu'il a fait ça, chez moi, ça affiche pas trop centré et c'est gênant si quelqu'un d'autre aurait ce problème comme moi. Pourtant, je suis sur le même navigateur que lui, avec la même version et lui ça affiche centré et tout est beau.

Voici l'adresse du forum : http://origine.forum-free.org/

Ma capture d'écran : http://i48.tinypic.com/2lkr0wh.png

Celle de mon collègue : http://imageshack.us/a/img594/1076/capturecatgories.png

Je suis co-fondatrice et aie accès au compte fondateur.

Nos templates sont modifiés, ce sont les templates : Index_Body, Index_Box, overall_footer_begin, overall_footer_end, overall_header, topics_list_box & viewtopic_body

Voici notre css :

Code:
body
{
  background-repeat: no-repeat;
  background-position: top center;
}

/* MISE EN FORME DE LA PA */


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

.hauteur {
height: 180px;
overflow: auto;
text-align: justify;
}

div.infobulle {
  position: relative;
  cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}

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

}
div.infobulle:hover div{
  display: block; /* ceci affiche l'infobulle */
  position: absolute;}


/* MISE EN FORME DES CATEGORIES ET FORUMS */

.cate_head
{
width: 1002px;
margin: auto;
height: 150px;
background: url(http://illiweb.com/fa/empty.gif) center no-repeat;
}

.cate_body
{
width: 1000px;
margin: auto;
background: url() center repeat-y;
}

.cate_foot
{
width: 1000px;
margin: auto;
height: auto;
background: url(http://illiweb.com/fa/empty.gif) center no-repeat !important;
}

.cate_titre
{
  clear: both;
  height: 50px;
  margin-top: 50px;
  margin-bottom: 20px;
}
.catetitre_bloc
{

}
.catetitre_content
{
position: absolute;
z-index: 2;
display: block;
width: 730px;
margin-left: auto;
  margin-right: auto;
  margin-top: -30px;
text-align: center;
padding: 2px;
border-bottom: 3px dotted #997645;
}

.catetitre
{
color: #e0ab61;
font-family: Felipa;
font-size: 25px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 1px 1px 0px #000000 !important;
margin-top: 30px;
margin-bottom: 50px;
letter-spacing: 2px;
margin-left: auto;
margin-right: auto;
transform: rotate(0deg) scale(1) translate(-5px);
-moz-transform: rotate(0deg) scale(1) translate(-5px);
-o-transform: rotate(0deg) scale(1) translate(-5px);
-htm-transform: rotate(0deg) scale(1) translate(-5px);
-webkit-transform: rotate(0deg) scale(1) translate(-5px);
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

.catetitre:hover
{
 letter-spacing: 4px;
 font-color: #454545;
  text-shadow: 1px 1px 1px #7d1809 !important;
    transform: rotate(6deg) scale(1) translate(-17px) !important;
-moz-transform: rotate(6deg) scale(1) translate(-17px);
-o-transform: rotate(6deg) scale(1) translate(-17px);
-htm-transform: rotate(6deg) scale(1) translate(-17px);
-webkit-transform: rotate(6deg) scale(1) translate(-17px);
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.forum_bloc
{
  margin-left: auto;
  margin-right: auto;
  margin-top: -30px;
}

.forum
{
float: left;
width: 300px;
height: 245px;
margin: 1px 1px 80px;
border-radius: 70px 70px 0px 0px;
padding: 25px 30px 0px 25px;
margin-left: auto;
margin-right: auto;
}
a.forumlink
{
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  color: #454545;
  text-align: center;
font-family: harrington;
font-size: 15px;
font-weight: bold;
text-transform: capitalize;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #997645 !important;
margin-left: 10px;
margin-right: auto;
    transform: rotate(0deg) scale(1) translate(-5px);
-moz-transform: rotate(0deg) scale(1) translate(-5px);
-o-transform: rotate(0deg) scale(1) translate(-5px);
-htm-transform: rotate(0deg) scale(1) translate(-5px);
-webkit-transform: rotate(0deg) scale(1) translate(-5px);
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
a.forumlink:hover
{
  letter-spacing: 4px;
  text-shadow: 1px 1px 1px #7d1809 !important;
    transform: rotate(6deg) scale(1) translate(-17px);
-moz-transform: rotate(6deg) scale(1) translate(-17px);
-o-transform: rotate(6deg) scale(1) translate(-17px);
-htm-transform: rotate(6deg) scale(1) translate(-17px);
-webkit-transform: rotate(6deg) scale(1) translate(-17px);
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
text-decoration: none;
}
.forum_contenu
{
  position: relative;
  z-index: 1;
  width: 300px;
  height: 245px;
  padding: 4px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -30px;
  background-image: url("http://black-agency.com/dat/Images/BG/dark.jpg");
  border-left: 3px solid #000000;
  border-right: 3px solid #000000;
  border-bottom: 3px solid #000000;
  border-top: 3px solid #000000;
  border-radius: 500px 500px 50px 50px/100px 100px 50px 50px;
  padding-top: 30px;
  box-shadow: 1px 1px 10px #000000;
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
 
.forumline
{
border: 3px dotted #000000;
}
.description
{
  display: block;
  margin: 10px auto auto;
  height: 100px;
  overflow: hidden;
}
.description_contenu
{
  position: absolute;
  display: block;
  height: 100px;
  overflow: auto;
  background-color: #1D1811;
  font-size: 10px;
  color: #e0ab61;
  text-align: justify;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 15px 15px 15px 15px;
  box-shadow: 1px 1px 10px #1D1811;
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

.icone_stats
{
width: 500px;
margin: -10px auto auto;
}

.stats_lastpost
{
  display: block;
  width: 160px;
  height: 80px;
  margin-left: 40px;
  background-color: #191817;
  border-radius: 15px;
  padding: 5px;
  text-align: center;
}
.stats
{
  display: block;
  margin-bottom: 5px;
  border-bottom: 1px dotted #b5b5b5;
  padding-bottom: 5px;
  font-size: 10px;
  color: #997645;
}
.lastpost
{
  display: block;
  font-size: 11px;
}
.sforum
{
  position: relative;
  z-index: 3;
  display: block;
  height: 0;
    background: #191817;
  color: #997645;
  overflow: hidden;
  width: 300px;
  border-left: 3px dashed #000000;
  border-right: 3px dashed #000000;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
 
}
.ouverture_sousforum
{
  position: relative;
  z-index: 3;
  display: block;
  float: right;
  width: 150px;
  margin-right: 20px;
  background: #997645;
  color: #1D1811;
  font-size: 11px;
  text-align: center;
  padding: 4px;
  -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin-right: 20px;
box-shadow: 1px 1px 10px #000000;
}
.sous_forum:hover .sforum
{
  height: 50px;
  background: #191817;
  color: #7D1809;
  padding: 4px;
  overflow: auto;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.sous_forum a
{
  color: #997645 !important;
  text-shadow: 1px 1px 0px #000000;
}
.sous_forum a:hover
{
color: #7D1809 !important;
}

.forumline
{
background-color: transparent;
background-image: url(adresse de votre image de fond);
background-repeat: repeat-y;
padding-left: 20px;
padding-right: 18px;
border: none;
}

.bodyline
{
border-radius: 500px 500px 50px 50px/50px 50px 50px 50px;
border-left: 9px solid #E0AB61;
border-right: 9px solid #E0AB61;

}

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

/*Mise en forme du profil et des messages*/

.nameprofil
{
font-family: felipa;
font-size: 20px;
text-align: center;
}


.profback
{
font-size: 11px;
font-family: garamond;
border-radius: 45px 45px 45px 45px;
background-color: #261F16;
border-left: 3px solid #997645;
border-right: 3px solid #997645;
padding: 10px;
margin-left: -25px;
margin-right: auto;
}

.avatar_profil
{
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(opacity=50);
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-htm-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
-htm-transition: all 1s ease 0s;
}

.avatar_profil img
{
border-radius: 50px 50px 50px 50px;
}

.avatar_profil:hover
{
 opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transform: rotate(17deg);
-moz-transform: rotate(17deg);
-o-transform: rotate(17deg);
-htm-transform: rotate(17deg);
-webkit-transform: rotate(17deg);
transition: all 2s ease 0s;
-moz-transition: all 2s ease 0s;
-o-transition: all 2s ease 0s;
-webkit-transition: all 2s ease 0s;
-htm-transition: all 2s ease 0s;
}

.informations_profil
{
  background-color:#0d0807;
  border-radius: 10px;
  box-shadow: 1px 1px 1px #0d0b07;
  padding: 10px;
    margin-left: auto;
    margin-right: auto;
  text-align: justify;
}

/* Mise en forme des déroulants */

.deroulant {
height: 12px;
}
.deroulant {
height: 12px;
background: #000000;
border: 2px #2b2b2b solid;
border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -htm-border-radius: 10px; -webkit-border-radius: 10px; /* Affiche des arrondis compatibles avec la plupart des navigateurs */
text-align:center;
transform: all; -moz-transform: all; -o-transform: all; -htm-transform: all; -webkit-transform: all;
transition: 2s; -moz-transition: 2s; -o-transition: 2s; -htm-transition: 2s; -webkit-transition: 2s;
padding: 10px; /*Affiche une marge à l'intérieur de la boite*/
overflow: hidden; /* On cache la barre de défilement qui pourrait s'incruster à la fête ... grr ça rendrait pas beau °°*/
}
.deroulant:hover {
height: 100px;
overflow: auto; /*On met la barre de défilement en auto, c'est à dire qu'elle s'affiche uniquement si le contenu est plus grand que la hauteur de la boite */
}
.deroulant:hover {
height: 100px;
transform: all; -moz-transform: all; -o-transform: all; -htm-transform: all; -webkit-transform: all;
transition: 2s; -moz-transition: 2s; -o-transition: 2s; -htm-transition: 2s; -webkit-transition: 2s;
 overflow: hidden; /*On enlève une possible barre de défilement, il faut donc bien ajuster la hauteur dans height */
}

/* Mise en forme de la barre de navigation */

#navig
{
  width: 950px;
  margin: auto;
  text-align: center;
}

#navigation
{
  position: fixed;
  z-index: 999;
  width: 100%;
  background-color: #1D1811;
  border-bottom: 2px solid #7D1809;
  margin-top: -10px;
  margin-left: -10px;
  padding: 5px;
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

#navigation:click
{
display: block;
height: 200px;
 transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
-webkit-transform : 1s;/* pour navigateur webkit */
-moz-transform : 1s; /* pour navigateur mozilla */
-o-transform : 1s;/* pour navigateur opera */
transform: 1s; /* pour les navigateurs récents */
}

/* Mise en en forme du PV */

.avatar1 img
{
border-radius: 5px 5px 5px 5px;
transform: rotate(-30deg);
box-shadow: 1px 1px 1px #000000;
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-htm-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
}

.avatar2 img
{
border-radius: 5px 5px 5px 5px;
transform: rotate(30deg);
box-shadow: 1px 1px 1px #000000;
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-htm-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}

.nom
{
font-size: 20px;
letter-spacing: 2px;
text-shadow: 2px 2px 4px;
font-family: Felipa;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
-htm-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
}

.nom:hover
{
letter-spacing: 4px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

.cadre1
{
overflow: auto;
height: 200px;
width: 500px;
text-align: justify;
border-radius: 5px 100px 5px 100px/50px 50px;
padding: 10px 10px;
background-color: #784c10;
}

/* Qui est en ligne */

.utilisateurs
{
font-size: 10px;
border-radius: 100px 5px 100px 5px/50px 50px;
border: 0px 0px 1px #000000;
height: auto;
widht: auto;
float: right
}


.groupes
{
font-family: felipa;
size: 18px;
text-align: center;
text-shadow: 0px 0px 0px;
letter-spacing: 1px;
transform: rotate(0deg) scale(1) translate(-5px) !important;
-moz-transform: rotate(0deg) scale(1) translate(-5px);
-o-transform: rotate(0deg) scale(1) translate(-5px);
-htm-transform: rotate(0deg) scale(1) translate(-5px);
-webkit-transform: rotate(0deg) scale(1) translate(-5px);
transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
-htm-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
}

.groupes:hover
{
letter-spacing: 2px;
transform: rotate(6deg) scale(1) translate(-17px) !important;
-moz-transform: rotate(6deg) scale(1) translate(-17px);
-o-transform: rotate(6deg) scale(1) translate(-17px);
-htm-transform: rotate(6deg) scale(1) translate(-17px);
-webkit-transform: rotate(6deg) scale(1) translate(-17px);
transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
-htm-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
}


/* Rotation, rotation agrandissement... */

/* IMAGE (icône) */
.rotation1 img{
width: 500px;
height: 400px;
margin: 10px;
padding: 0;
-webkit-transition: all 1s linear 0s;/* pour navigateur webkit */
-moz-transition: all 1s linear 0s; /* pour navigateur mozilla */
-o-transition: all 1s linear 0s;/* pour navigateur opera */
transition: all 1s linear 0s; /* pour les navigateurs récents */
}
/* IMAGE (icône) AU SURVOL */
.rotation1:hover img {
-webkit-transform : rotate(360deg);/* pour navigateur webkit */
-moz-transform : rotate(360deg); /* pour navigateur mozilla */
-o-transform : rotate(360deg);/* pour navigateur opera */
transform: rotate(360deg); /* pour les navigateurs récents */
}

/* IMAGE (icône) */
.rotation2 img{
width: 250px;
height: 200px;
margin: 10px;
padding: 0;
-webkit-transition: all 1.5s ease; /* pour navigateur webkit */
-moz-transition: all 1.5s ease; /* pour navigateur mozilla */
-o-transition: all 1.5s ease; /* pour navigateur opera */
transition: all 1.5s ease; /* pour les navigateurs récents */
}
/* IMAGE (icône) AU SURVOL */
.rotation2:hover img {
width: 500px;
height: 400px;
-webkit-transform : rotate(-360deg);/* pour navigateur webkit */
-moz-transform : rotate(-360deg); /* pour navigateur mozilla */
-o-transform : rotate(-360deg);/* pour navigateur opera */
transform: rotate(-360deg); /* pour les navigateurs récents */
}



CSS

/* BLOC CONTENANT L'INFOBULLE - L’ICÔNE */
.transition-NU{
position: relative;
width: 50px;
float: left;
margin: 10px;
padding: 0;
}
/* INFOBULLE */
.NU_transition{
background: #090700;
border: 0px solid #1c1706;
width: 0;
height: 0;
overflow: hidden;
position: absolute;
left:80px;
top: 0;
z-index: 999;
padding: 0;
text-align: center;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour navigateur webkit */
-moz-transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour navigateur mozilla */
-o-transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour navigateur opera */
transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour les navigateurs récents */
}
/* INFOBULLE AU SURVOL */
.transition-NU:hover .NU_transition{
height: 70px;
width: 200px;
padding: 5px;
border-width: 1px;
}
/* IMAGE (icône) */
.transition-NU img {
position: relative;
z-index: 990;
left: 0;
bottom: 0;
-webkit-transition: all 1s linear 0s;/* pour navigateur webkit */
-moz-transition: all 1s linear 0s; /* pour navigateur mozilla */
-o-transition: all 1s linear 0s;/* pour navigateur opera */
transition: all 1s linear 0s; /* pour les navigateurs récents */
}
/* IMAGE (icône) AU SURVOL */
.transition-NU:hover img {
height: 45px;
width: 45px;
-webkit-transition: rotate(-360deg);/* pour navigateur webkit */
-moz-transform: rotate(-360deg); /* pour navigateur mozilla */
-o-transform: rotate(-360deg);/* pour navigateur opera */
transform: rotate(-360deg); /* pour les navigateurs récents */
}

/* WIDGET FLOTTANT */

.widget_flottant
{
width: 150px;
height: 100px;
position:fixed;
top: 50px;
right: 10px;
}

/*Infobulle */

a.info{
position:relative;
z-index:24;
color:#000;
text-decoration:none
}
 
a.info:hover{
z-index:25;
background-color:#FFF
}
 
a.info span{
display: none
}
 
a.info:hover span{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
width : 100px;
height: 75px;
border:1px solid#000 ;
background-color:transp;
color:#000;
text-align: justify;
font-weight:none;
padding:5px;
}


Merci infiniment à celui ou celle qui prendra le temps de nous aider *.*


Dernière édition par naima-kell le Mar 18 Sep 2012 - 23:04, édité 1 fois

naima-kell
Nouveau membre

Messages : 8
Inscrit(e) le : 06/02/2012

http://grenior.forumgratuit.org/
naima-kell a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage de catégorie

Message par Threax le Mar 18 Sep 2012 - 14:40

Bonjour,

Les blocs sont prévus pour être affichés les uns à côté des autres. Si vous n'en avez que 2 par ligne, c'est parce que le conteneur des blocs a une taille fixée à X %, et que votre écran ne permet pas d'afficher plus de deux blocs côte à côte.
Par contre, sur un écran plus large, vous pourrez avoir 3 ou 4 blocs par ligne.

Le problème c'est que si chaque bloc prend 300px, et que X% (la largeur du conteneur) représente 1100px, il y aura la place pour 3 x 300px, mais il restera un vide de 200px. C'est en gros ce qui se produit pour vous : votre écran est légèrement plus large, votre police est plus petite, donc vous avez un espace qui ne peut être comblée.

La solution pour que ces blogs s'adaptent à tous les écrans seraient, soit de leur donner une largeur relative (en pourcentage, comme le conteneur), soit de donner une largeur fixe au conteneur.

Threax
+ Hyperactif +

Masculin
Messages : 17277
Inscrit(e) le : 27/08/2005

http://lesforumsde.forumactif.com
Threax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage de catégorie

Message par naima-kell le Mar 18 Sep 2012 - 23:01

Merci bien ! Smile

naima-kell
Nouveau membre

Messages : 8
Inscrit(e) le : 06/02/2012

http://grenior.forumgratuit.org/
naima-kell a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum