Bordures intérieures et extérieures des catégories Bouton_activeBordures intérieures et extérieures des catégories Bouton_hoverBordures intérieures et extérieures des catégories Fb-hoverBordures intérieures et extérieures des catégories Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Structure de Qui Est En Ligne (1)
Bordures intérieures et extérieures des catégories EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Bordures intérieures et extérieures des catégories EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Bordures intérieures et extérieures des catégories EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Bordures intérieures et extérieures des catégories EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Bordures intérieures et extérieures des catégories EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Bordures intérieures et extérieures des catégories EmptyMar 07 Fév 2023, 08:40 par Oxtran

» Mettre votre © Copyright dans le footer de votre forum
Bordures intérieures et extérieures des catégories EmptyMar 07 Fév 2023, 07:35 par Oxtran

» Barre(s) Hitskinienne
Bordures intérieures et extérieures des catégories EmptyVen 03 Fév 2023, 17:22 par Krager

-17%
Le deal à ne pas rater :
Casque de réalité virtuelle Meta Quest 2 128 Go Blanc (+29,99€ ...
249.99 € 299.99 €
Voir le deal

Partagez
 

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

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://etatlimite.bbactif.com/
Laellyn
Laellyn
{ Membre }
{ Membre }

Masculin Messages : 36



Bordures intérieures et extérieures des catégories Empty
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;
}
MessageSujet: Bordures intérieures et extérieures des catégories   Bordures intérieures et extérieures des catégories EmptyVen 01 Nov 2013, 20:43
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Bordures intérieures et extérieures des catégories Empty
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;
}
MessageSujet: Re: Bordures intérieures et extérieures des catégories   Bordures intérieures et extérieures des catégories EmptySam 02 Nov 2013, 09:54
Revenir en haut Aller en bas
http://etatlimite.bbactif.com/
Laellyn
Laellyn
{ Membre }
{ Membre }

Masculin Messages : 36



Bordures intérieures et extérieures des catégories Empty
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 Wink
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. ^^
MessageSujet: Re: Bordures intérieures et extérieures des catégories   Bordures intérieures et extérieures des catégories EmptySam 02 Nov 2013, 10:14
Revenir en haut Aller en bas
http://etatlimite.bbactif.com/
Laellyn
Laellyn
{ Membre }
{ Membre }

Masculin Messages : 36



Bordures intérieures et extérieures des catégories Empty
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
J'ai vu un tuto la dessus sur le forum il me semble... je vais aller le rechercher.
MessageSujet: Re: Bordures intérieures et extérieures des catégories   Bordures intérieures et extérieures des catégories EmptySam 02 Nov 2013, 12:14
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Bordures intérieures et extérieures des catégories Empty
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
MessageSujet: Re: Bordures intérieures et extérieures des catégories   Bordures intérieures et extérieures des catégories EmptySam 02 Nov 2013, 18:25
Revenir en haut Aller en bas
http://etatlimite.bbactif.com/
Laellyn
Laellyn
{ Membre }
{ Membre }

Masculin Messages : 36



Bordures intérieures et extérieures des catégories Empty
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
MessageSujet: Re: Bordures intérieures et extérieures des catégories   Bordures intérieures et extérieures des catégories EmptyDim 03 Nov 2013, 10:23
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Bordures intérieures et extérieures des catégories Empty
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
MessageSujet: Re: Bordures intérieures et extérieures des catégories   Bordures intérieures et extérieures des catégories EmptyLun 04 Nov 2013, 12:31
Revenir en haut Aller en bas
http://etatlimite.bbactif.com/
Laellyn
Laellyn
{ Membre }
{ Membre }

Masculin Messages : 36



Bordures intérieures et extérieures des catégories Empty
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 Wink
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;
}
MessageSujet: Re: Bordures intérieures et extérieures des catégories   Bordures intérieures et extérieures des catégories EmptyMer 06 Nov 2013, 09:06
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Bordures intérieures et extérieures des catégories Empty
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).
MessageSujet: Re: Bordures intérieures et extérieures des catégories   Bordures intérieures et extérieures des catégories EmptyMer 06 Nov 2013, 15:04
Revenir en haut Aller en bas
Contenu sponsorisé




Bordures intérieures et extérieures des catégories Empty
MessageSujet: Re: Bordures intérieures et extérieures des catégories   Bordures intérieures et extérieures des catégories Empty
Revenir en haut Aller en bas
 

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

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Arrondir les bordures de la CB ?
» Problème de script pour l'affichage des sous catégories et forums dans un système de catégories en onglet. ( forum en phpBB2)
» Des bordures indésirables
» Problème de bordures.
» Bordures du menu

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit