Image sous les catégories qui se dédouble

2 participants

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

Résolu Image sous les catégories qui se dédouble

Message par Meblang Lun 11 Mar 2013 - 14:52

Bonjour à tous ^^

J'ai un petit problème et je n'arrive pas à en venir à bout. En fait, sur mon forum test, j'ai mis mes catégories en onglets. Comme on voit souvent sur les forums, j'ai installé une image sur le haut et le bas des catégories. Là sont mes problèmes. Pour le haut, j'ai des espaces incolore au bout de mes boutons de catégories. J'ai bien essayé d'élargir mes boutons, mais ces espaces persistent et mes boutons tombent sur deux lignes. Du coup, j'aimerais retirer ses espaces, mais je ne sais pas comment m'y prendre.

Mon second problème, qui est nettement plus embêtant, se situe sur l'image du bas. Dans ma template, j'ai mis le code pour l'image une seule fois, mais malheureusement, elle apparait deux fois. De plus, lorsque l'on va sur le second onglet, elle se déplace étrangement vers le haut. Comment arranger ce désagrément?

Voici mes codes CSS et template!

Spoiler:

Spoiler:


Merci beaucoup d'avoir pris le temps de lire mon problème, et un gros merci à ceux qui tenteront de me venir en aide!
Bonne Journée,
Meblang

EDIT : Quand je retir l'image, ça ne bug plus, mais j'aimerais grandement la garder What's happen ?!?


Dernière édition par Meblang le Sam 16 Mar 2013 - 23:44, édité 1 fois
avatar

Meblang
**

Messages : 52
Inscrit(e) le : 09/03/2013

http://universitylife.nice-forums.net/
Meblang a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image sous les catégories qui se dédouble

Message par Meblang Mar 12 Mar 2013 - 22:00

UP j'ai vraiment besoin d'aide !
avatar

Meblang
**

Messages : 52
Inscrit(e) le : 09/03/2013

http://universitylife.nice-forums.net/
Meblang a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image sous les catégories qui se dédouble

Message par Automne Jeu 14 Mar 2013 - 17:18

Salut,

J'ai regardé vite fait, a voir si cela fonctionne

Déjà supprimer line-height dans le css, sur .onglet li { line-height: 30px;

Ensuite rajouter une class a la div dans le template.
Code:
  document.write('<div class="ma_pa" align="center">

Puis dans le css, mettre un fond et une taille a cette partie de votre couleur
Code:
  div.ma_pa{background-color: #F7B379;width:750px;}

Ensuite quand on ouvre sur accueil, le forum dépasse a droite, donc je mettrais comme ceci.
Code:
  .cat_forum {
        -moz-border-radius: 10px;
        background-color: #F7B379;
        margin: auto;
        margin-bottom:30px;
        }

A tester et voir si c'est mieux. Wink
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image sous les catégories qui se dédouble

Message par Meblang Jeu 14 Mar 2013 - 20:38

Génial ^^ Ça règle mon problème d'espacement !! Merci beaucoup !!

Tu aurais une idée pour régler le dédoublement de mon image sous les catégories ? Quand on va sur l'onglet « Collège », la seconde image se déplace au-dessus de ma catégorie, juste sous mes onglets. Je ne sais pas pourquoi elle est en double, et j'ignore comme m'en débarasser pale
avatar

Meblang
**

Messages : 52
Inscrit(e) le : 09/03/2013

http://universitylife.nice-forums.net/
Meblang a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image sous les catégories qui se dédouble

Message par Automne Ven 15 Mar 2013 - 0:40

coucou,

Je suis arrivée a quelque chose en plaçant l'image hors de la table et entre une div après
Code:
<!-- BEGIN tablefoot -->
      </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --><div class="img-bas"><img src="http://i47.tinypic.com/25qxao9.png"/></div> 
css pour cette image a améliorer.
.img-bas{margin-top:-50px;}
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image sous les catégories qui se dédouble

Message par Meblang Ven 15 Mar 2013 - 2:39

WOW!!!!!!!! Ça fonctionneeeeeeeeeeeeeeeee!!!!!!!!!!!
MERCIIIIIIIIIIIIIIIII Mr. Green ::pourtoi:: ::pourtoi:: ::pourtoi:: ::pourtoi:: ::pourtoi:: ::pourtoi:: ::pourtoi:: ::pourtoi:: ::pourtoi:: ::pourtoi:: ::pourtoi:: ::pourtoi:: ::pourtoi:: ::pourtoi:: ::pourtoi:: ::pourtoi:: ::pourtoi:: ::pourtoi::


Il me reste encore une petite chose, quand je vais sur mon onglet « Collège », le problème de barre blanche est toujours là. Où dois-je ajouter une div pour le régler? De plus, ma catégorie est passablement trop large, mais je n'arrive pas à l'ajuste. Avant j'y allais via la ligne où il était écrit forumline, mais l'ayant supprimé pour instaurer mes onglets, je ne sais plus comment m'y prendre. J'ai essayer avec une div, mais sans succès. Je ne savais pas trop où la placer.

Encore merci pour ton aide !
avatar

Meblang
**

Messages : 52
Inscrit(e) le : 09/03/2013

http://universitylife.nice-forums.net/
Meblang a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image sous les catégories qui se dédouble

Message par Automne Ven 15 Mar 2013 - 12:07

Coucou,

Essaye avec ses modif css.

.cat_forum {
- a supprimer margin: auto auto 30px;
- a rajouter width: 750px;

.onglet li {
- mettre height: 20px;

.cat_forum {
- mettre margin-top: -5px;

.img-bas
- mettre margin-top: -5px;

Tu peux descendre le titre de la catégorie
.secondarytitle, .secondarytitle h2 {
padding: 10px;
}
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image sous les catégories qui se dédouble

Message par Meblang Ven 15 Mar 2013 - 16:47

Merci pour ton aide, mais le code que tu m,a donné ne fonctionne pas. Même en arrangeant les { manquant, çca ne fonctionne pas...
avatar

Meblang
**

Messages : 52
Inscrit(e) le : 09/03/2013

http://universitylife.nice-forums.net/
Meblang a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image sous les catégories qui se dédouble

Message par Automne Ven 15 Mar 2013 - 23:04

Salut,

Donne moi ton css complet (celui que tu as actuellement) merci
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image sous les catégories qui se dédouble

Message par Meblang Sam 16 Mar 2013 - 2:43

Voilà mon CSS complet !!

avatar

Meblang
**

Messages : 52
Inscrit(e) le : 09/03/2013

http://universitylife.nice-forums.net/
Meblang a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image sous les catégories qui se dédouble

Message par Automne Sam 16 Mar 2013 - 3:51

Tu effaces tout ton css et tu remplaces par celui ci.

Code:
  /*CATÉGORIES ONGLETS ---------------------------------------------------------*/
    .onglet {
    display:inline-block;
    height:30px;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin-top:-10px;
      margin-bottom:-10px;
    }
 
  /* --- configuration de l'élément de liste --- */
    .onglet li {
    float:left;
    width: 130px;
    margin-top: -10px;
    text-align: center;
    vertical-align: middle;
    list-style-type:none;
    height: 20px;
    }

    /* *** liens *** */

    .onglet li a {
    display:block;
    text-decoration:none;
    margin-left:5px;
    font-size: 20px ;
      font-style: italic;
      letter-spacing: 0px ;
      text-align:center ;
      font-family: Antiqua, serif;
      text-transform: lowercase;
      color: #FFFFFF;
      text-shadow:2px 2px 2px #FFFFFF;
    }

  /* --- liens au survol --- */

    .onglet li a:hover {
    color:#FC244F;
    }

    /* --- onglet actif --- */

    .onglet_actif {
    background-color: #F7B379;
    width:130px;
    height:30px;
    cursor:pointer;
    }

    /* --- onglet non actif --- */

    .onglet_nactif {
    background-color: #F7B379;
    width:130px;
    height:30px;
    cursor:pointer;
    }

div.ma_pa{
  background-color: #F7B379;width:750px;}

.cat_forum {
  -moz-border-radius: 10px;
    background-color: #F7B379;
    margin-top: -10px;
    margin-bottom:30px;
    width: 750px;
    margin-left: -0px;
    }

.img-bas{
    margin-top:-40px;}

.secondarytitle, .secondarytitle h2 {
    padding: 10px;
    }

 a.mainmenu{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 10px;
    }

    a.mainmenu:hover{
        text-decoration: none;
    text-transform: uppercase;
    font-size: 10px;
    }

    .postdetails.poster-profile img {
      width:200px;
      display:block;
    }

    body {
    background-repeat: repeat;
      background-position: none;
    }



                    /* ESPACE HAUT ET BAS DU FORUM + LIENS SOULIGNES
      ------------------------------------------------*/
    body{
    margin-top: -10px;
    margin-bottom: -38px;
    }

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

                    /* CODES ET SPOILERS
      ------------------------------------------------*/

    .postbody {
        display: block;
        padding-left: 16px;
        padding-right: 16px;
        text-align:justify;}
    .cadre{
    width: autopx;
    border: 0px solid # ;
    margin: auto;
    background-color: #FEFEF5;
    }

    .cadre2{
    width: autopx;
    border: 0px solid  ;
    border-opacity: 0.7;
    margin: auto;
    background-color: #FBFAD7;
    }

                              /* CATEGORIES
      ------------------------------------------------*/

    a.forumlink
    {display:inline-block;
      font-size: 20px ;
      font-style: italic;
      letter-spacing: 0px ;
      text-align:center ;
      font-family: Antiqua, serif;
      text-transform: lowercase;
      color: #FFFFFF;
      text-shadow:2px 2px 2px #FFFFFF;
    margin-bottom: -18px;}

    a.forumlink:hover
    {display:inline-block;
      font-size: 20px ;
      font-style: italic;
      letter-spacing: 2px ;
      text-align:center ;
      font-family: Antiqua, serif;
      text-transform: lowercase;
      text-shadow:0px 0px 0px #FCDE87;
    margin-bottom: -18px;}

    .boxcatego{
    width: autopx;
    border: 0px solid # ;
    margin: auto;
    background-color: #fbcea8;
    }

    .boxsousfow{
    width: autopx;
      Height: 120px ;
    border: 10px solid #e6e89d ;
    margin: auto;
    background-color: #fbcea8;}
    .categoriedescription{
    width: autopx;
      Height: 120px ;
    border: 10px solid #FCF3D8 ;
    margin: auto;
    background-color: #fbcea8;}
    .textedescrip {
        padding-left: 6px;
        padding-right: 4px;
    }

    /* MESSAGES IMPORTANTS --------------------------------------------------------------------------------------- */
    .reglement fieldset {
      -webkit-border-radius: 20px;
      -webkit-border-top-right-radius: 50px;
      -webkit-border-bottom-left-radius: 50px;
      -moz-border-radius: 20px;
      -moz-border-radius-topright: 50px;
      -moz-border-radius-bottomleft: 50px;
      border-radius: 20px;
      border-top-right-radius: 50px;
      border-bottom-left-radius: 50px;
      text-align: justify;
      border: 3px solid #81B6D1;
      padding: 0px;   
    }

    .reglement fieldset p {
      padding: 10px;
    }

    .reglement fieldset legend {
      font-size: 25px;
      padding: 10px;
      color: #81B6D1;
      font-family: Georgia;
      font-style: italic;
      text-transform: uppercase;
      text-shadow: 1px 1px 0px white;
      align: center;
    }

    .soustitre {
      display: block;
    -webkit-border-radius: 20px;
      -webkit-border-top-right-radius: 50px;
      -webkit-border-bottom-left-radius: 50px;
      -moz-border-radius: 20px;
      -moz-border-radius-topright: 50px;
      -moz-border-radius-bottomleft: 50px;
      border-radius: 20px;
      border-top-right-radius: 50px;
      border-bottom-left-radius: 50px;
      margin-left: -3px;
      background-color: #81B6D1;
      text-align: center;
      color: white;
    }

    .important {
      background: #fbcea8;
      padding: 10px;
      width: 420px;
      border-radius: 100px;
    border-right: 6px solid #F4F0C6;
    border-left: 6px solid #F4F0C6;
      border-top: 12px solid #F4F0C6;
        text-align: justify;
    }


    /* copyright --------------------------------------------------------------------------------*/
    .aver {width: 200px;
    height: auto;
    text-align:justify;
    margin-left:auto;
    margin-right:auto;
    padding:8px;
    margin-top: 20px; }

    /*RETIRER SOULIGNEMENT LIENS*/
    a:link,a:active,a:visited,a:hover,a:focus
    {
      text-decoration: none;}

    /*LISTER AUTOMATIQUEMENT*/
    .postbody { display: block; padding-left: 30px; }

    /*JUSTIFIER AUTOMATIQUEMENT*/
    .postbody {
        display: block;
        text-align:justify;
    }

    /*sous catégories*/
    #slides div {
      background: #F7B379;
      height: 90px; /* Égal à la hauteur de l\'image */
      margin: 10px;
      overflow: hidden;
      position: relative;
      width: 140px; /* Égal à la largeur de l\'image */
    }
    #slides div img {
      left: 0;
      position: absolute;
      top: 0;
    }
    #slides div:hover img {
      transform: translateY(103px); /* Valeur négative égale à la hauteur de l\'image */
      -moz-transform: translateY(103px);
      -o-transform: translateY(103px);
      -webkit-transform: translateY(103px);}
    #slides div img {
      left: 0;
      position: absolute;
      top: 0;
      transition: transform 0.5s ease-in-out;
      -moz-transition: -moz-transform 0.5s ease-in-out;
      -o-transition: -o-transform 0.5s ease-in-out;
      -webkit-transition: -webkit-transform 0.5s ease-in-out;
    }
    /*image rotation*/
    .tourne {
        transition: 1.5s;
        -moz-transition: 1.5s;
        -webkit-transition: 1.5s;
    }
    .tourne:hover {
        transition: 1.5s;
        -moz-transition: 1.5s;
        -webkit-transition: 1.5s;
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }

  /* --- ici vos NOM DE CATEGORIE sauf un : il sera afficher en premier --- */

    #Hampton, #Grecs, #Atlanta, #Relaxation {
    display : none;
    }

    /*header--------------------------------------------------------------*/
    body {
    background-image : url(http://i48.tinypic.com/316afd3.png), url(http://i47.tinypic.com/5b1bp1.jpg) ;
    background-attachment: scroll, fixed ;
    background-repeat: no-repeat, repeat ;
    background-position: top center;}

    /*PAGE D'ACCEUIL------------------------------------------------------------*/
    /*PROFIL---------------------------------------------------------------------*/
    .pseudo {width: 205px;
    height: auto;
    text-align:center;
      letter-spacing: 2px;
    margin-left:auto;
    margin-right:auto;
      padding:5px;
    background-color: #FCF3D8;
    border: 1px #F27F41 solid;
    border-radius: 30px;
    margin-top: 20px; }
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image sous les catégories qui se dédouble

Message par Meblang Sam 16 Mar 2013 - 23:44

HAN!!!!!!!!!!!!! Ça fonctionne!!!!!!!!!!!! MERCI BEAUCOUP!!!!!!!!!!!!!!

avatar

Meblang
**

Messages : 52
Inscrit(e) le : 09/03/2013

http://universitylife.nice-forums.net/
Meblang a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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