Sujets similaires

Bonjour à tous,

J'ai quelques difficultés à résoudre certains problèmes qui se posent à moi. J'ai parcouru pas mal de tuto mais ... je suis un vrai noob en CSS alors il y a surement plein de trucs qui m'échappent. XD

J'ai fait un screenshot (dans la balise spoiler en dessous) de mon forum de test avec mes questions. Smile

Merci par avance de votre aide. ^^

Spoiler:

Voici l'adresse du forum de test : http://tplimite.forumactif.org/

... et voici mon code css (en plein chantier) XD

Code:: body {
margin : 0px;
background-position:center top;
background-image: url("http://i.imgur.com/j0xP3yV.jpg");
  /*http://i.imgur.com/rebM06s.png*/
background-attachment: fixed;
background-color: #5A5E6B;
background-repeat:no-repeat;
}

.bodylinewidth {
   margin-bottom: 15px;
}

.mainmenu{
   font-size : 14px;
}

a.mainmenu img {
display:none;
}

.navi {
  position: fixed;
  top: 0px;
  z-index: 999;

  width: 1000px;
  height:30px;

  margin-left:-504px; /* retirer la moitier de : la largeur du cadre (1000px) + taille des bordures (2 x 4px) */
  left:50%;
  background-color: #5d3452;

  border:4px #000000 outset;
  border-top:none;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
}

/*span.navi:hover{
  border:4px #000000 inset;
}
*/

.navi a.mainmenu{
  /*color : #006699;*/
text-decoration:none!important;
/* V1 */
  color:#000000;
text-shadow: 2px 2px 2px #5A5E6B;
  margin:-5px;
  padding: 10px;

/*V2
color:#4b4977;
text-shadow: 0px 0px 12px #000000;*/
}

.navi a.mainmenu:hover {
/*V1 */
  color : #BA9B61;
  text-shadow: 2px 2px 2px #370028;
  border-bottom:4px #BA9B61 solid;
  background:#723E64;
  background-image:radial-gradient(circle, #723E64, #5d3452);

/*V2
color : #BA9B61;
  text-shadow: 0px 0px 3px #370028;
  border-bottom:4px #BA9B61 solid;
  background:#723E64;
  background-image:radial-gradient(circle, #723E64, #370028);*/

}

.bodyline {
/*border-radius:40px;
border : 1px solid rgba(255,255,255,0.5) ;*/
/*background-color:rgba(255,255,255,0.5);*/
  /*background-color: rgba(114,62,100,0.5) !important;*/
  border:none;
  background-color: transparent !important;
}

td.catHead , th, td.catBottom td {
background-image: none!important;
background-color: rgba(114,62,100,0.8) !important;
color : #5A5E6B;
   /*border:1px solid rgba(255,255,255,0.8);*/

}

.forumline {
  background-image: none !important;
  background-color: rgba(114,62,100,0.2) !important;
  border: 4px ridge rgba(114,62,100,0.8);
}

/* encadrement de l avatar */
.postdetails.poster-profile a img {
border-radius:10px;
border: 4px solid #000000;
}

/* texte en justifié dans les messages */
.postbody {
   text-align: justify !important;
}

Pour enlever les textes en haut, il faut toucher aux templates. Jette un coup d'oeil à ceci, cela pourra t'aider. Là c'est purement du HTML. Personnellement je serai toi je n'enlèverai pas ces liens, ils sont plutôt utiles pour l'utilisateur Wink

Pour le titre des catégories, ce code CSS devrait marcher.

Code:: .secondarytitle {
text-align: left;
}

Pour tout ce qui est arrondissement, tu peux regarder là.
Pour l'espacement de 1px :

Code:: table.forumline {
border-spacing: 0;
}

Nihil a écrit:: Pour enlever les textes en haut, il faut toucher aux templates. Jette un coup d'oeil à ceci, cela pourra t'aider. Là c'est purement du HTML. Personnellement je serai toi je n'enlèverai pas ces liens, ils sont plutôt utiles pour l'utilisateur

Je suis d'accord avec toi. En réalité, je souhaite les mettre dans un menu déroulant de ma barre de navigation. =)

Merci pour toutes les infos. ^^

En réalité je voulais arrondir aussi les bords de la table. J'ai dû aller un peu plus loin que le tuto.

Voici comment j'ai fait :

Code:: /* Espacement entre les tables du forum */
table.forumline {
  border-collapse:separate;
  border-spacing: 0;
}

/* Arrondi QEEL : entête */
.forumline tr:first-child td:first-child {
border-radius: 15px 15px 0 0;
}

/*Arrondi Catégories du forum : entêtes */
.forumline th:first-child {
  border-radius : 15px 0 0 0;
}
.forumline th:last-child {
  border-radius : 0 15px 0 0;
}

/* Arrondi Catégories du forum : pieds */
.forumline tr:last-child td:last-child {
  border-radius: 0 0 15px 0;
}

.forumline tr:last-child td:first-child {
  border-radius: 0 0 0 15px;
}

Je ne sais pas si ce que j'ai fait est propre... j'ai un peu improvisé. N'hésitez pas à me conseiller pour simplifier ou rendre ce code plus "propre". Smile

Toujours est-il que pour le QEEL je n'y arrive pas. J'ai lu sur le net qu'il fallait modifier le code html. Je me demandais si cela était vraiment la seule possibilité. J'irai faire un tour ici : http://www.css-actif.com/f96-qui-est-en-ligne

L'autre problème de cette méthode c'est que lorsque l'on entre dans les forums... les entêtes et pieds de tables deviennent tout foireux :
Bordures intérieures et extérieures des catégories XtKoEkz

Bordures intérieures et extérieures des catégories XtKoEkz

J'ai vu un tuto la dessus sur le forum il me semble... je vais aller le rechercher.

Je vois que tu modifies régulièrement ton forum, du coup certains problèmes ne sont plus d'actualités Wink

Je pense que tu es sur la bonne voie, je te laisse me faire une liste précise des problèmes auxquels tu ne trouves vraiment pas de solution.

Je t'invite fortement à lire ce sujet pour te simplifier la vie Razz

Salut,

Merci pour le lien. J'ai installé et testé et j'adore Smile

Je n'arrive pas à remettre la main sur le sujet qui est en lien avec le problème de cadres foireux dans les entêtes et pieds de pages. Si tu vois de quoi je parle et que tu as le lien, je prends. Smile

Je ne sais plus du tout est où est ce tutoriel, désolée.

Peut être que si tu m'indiques précisément ton problème, je pourrai t'aider Wink

Hello

Nihil a écrit:: Je ne sais plus du tout est où est ce tutoriel, désolée.

Peut être que si tu m'indiques précisément ton problème, je pourrai t'aider

Avec grand plaisir merci. Smile

Voici le programme :

> Pour les sujets :
Bordures intérieures et extérieures des catégories 707623sujets

> Pour les messages :
Bordures intérieures et extérieures des catégories 373966messagesentete

Bordures intérieures et extérieures des catégories 822226messagesmilieu

Bordures intérieures et extérieures des catégories 532395messagespied

J'aimerais aussi refaire le QEEL mais, avant de mon plonger dans les tuto QEEL pour bien comprendre sa structure, je me demandais comment je pouvais rapidement et facilement :
1. arrondir les angles inférieurs du tableau (et non du cadre) QEEL
2. changer la couleur de la police du titre QEEL

Voici la partie de mon CSS ou je touche à la forumline / bodyline.

Code:: .bodyline {
  border:none;
  background-color: transparent !important;
}

/* Titre des catégories */
.secondarytitle {
   text-align: left;
}

/* Supprimer les images forumactifs des entêtes de catégories */
td.catHead, th, tr.catBottom {
background-image: none!important;
background-color: rgba(114,62,100,0.8) !important;
color : #BA9B61;
   /*border:1px solid rgba(255,255,255,0.8);*/
}

.forumline {
  background-image: none !important;
  background-color: rgba(114,62,100,0.2) !important;

  /* cadre des catégories */
  border: 4px inset rgba(114,62,100,0.6);
  border-radius: 20px;

  /*padding:5px;*/
}

/* Espacement entre les tables du forum */
table.forumline {
  border-collapse:separate;
  border-spacing: 0;
  /*border-radius:20px;*/
}

/* Arrondi QEEL : entête */
.forumline tr:first-child td:first-child {
border-radius: 15px 15px 0 0;
}

/*Arrondi Catégories du forum : entêtes */
.forumline th:first-child {
  border-radius : 15px 0 0 0;
}
.forumline th:last-child {
  border-radius : 0 15px 0 0;
}

/* Arrondi Catégories du forum : pieds */
.forumline tr:last-child td:last-child {
  border-radius: 0 0 15px 0;
}

.forumline tr:last-child td:first-child {
  border-radius: 0 0 0 15px;
}

Il faut y aller petit à petit hein xD.

Bordures intérieures et extérieures des catégories 707623sujets

Il y a des modification CSS, d'autre ces sont des modifications dans les template d'affichage de la liste des sujets. Cela va se passer pour viewforum_body et topic_list_box. Pour ce qui est de supprimer des éléments cela devrait le faire. Pour déplacer l'auteur, c'est comme les tutos pour la partie "Catégorie" pour enlever les colonnes Sujets et Messages (même principe).

Bordures intérieures et extérieures des catégories

Bordures intérieures et extérieures des catégories

Sujets similaires

Sujets similaires

Partenaires Or