PB tuto "Encadrer chacun de vos forums de façon originale" Bouton_activePB tuto "Encadrer chacun de vos forums de façon originale" Bouton_hoverPB tuto "Encadrer chacun de vos forums de façon originale" Fb-hoverPB tuto "Encadrer chacun de vos forums de façon originale" Fb-active
AccueilForumÉquipe 
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
» Fiche de Présentation RPG
PB tuto "Encadrer chacun de vos forums de façon originale" EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
PB tuto "Encadrer chacun de vos forums de façon originale" EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
PB tuto "Encadrer chacun de vos forums de façon originale" EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
PB tuto "Encadrer chacun de vos forums de façon originale" EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
PB tuto "Encadrer chacun de vos forums de façon originale" EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
PB tuto "Encadrer chacun de vos forums de façon originale" EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
PB tuto "Encadrer chacun de vos forums de façon originale" EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
PB tuto "Encadrer chacun de vos forums de façon originale" EmptyMar 07 Fév 2023, 08:40 par Oxtran

Le Deal du moment : -40%
Tefal Ingenio Emotion – Batterie de cuisine 10 ...
Voir le deal
59.99 €

CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolusPartagez
 

PB tuto "Encadrer chacun de vos forums de façon originale"

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://generation-experie.forumactif.org/
Ronce
Ronce
{ Membre }
{ Membre }

Féminin Messages : 17



PB tuto "Encadrer chacun de vos forums de façon originale" Empty
Bonjour !

J'ai un problème dans la réalisation ce tutoriel : http://www.css-actif.com/t2246-encadrer-chacun-de-vos-forums-de-facon-originale

Juste pour le tester, j'ai utilisé les images données par l'auteur du tutoriel (qui est génial et que je remercie beaucoup !), et j'ai essayé de suivre à lettre les indications données, mais visiblement ça n'a pas beaucoup d'effet sur mon forum test^^
Voici un petit montage de avant/après la réalisation du tuto : https://2img.net/r/ihimizer/img37/9918/pbtuto.jpg
Sinon, mon forum test est par là si vous voulez !

Et je ne sais pas si ça peut aider, mais si vous voulez, voici le CSS ajouté de mon forum :

Code:
.ajout_haut {
  background-color: transparent;
  background-image: url('http://nsa10.casimages.com/img/2010/01/14/100114065535545189.png') center top no-repeat;
  width: 900px;
  height: 32px;
  border: none;
}

.ajout_bas {
  background-color: transparent;
  background-image: url('http://nsa10.casimages.com/img/2010/01/14/100114070515465818.png') center top no-repeat;
  width: 900px;
  height: 26px;
  border: none;
}

.forumline {
  background-color: transparent;
  background-image: url('http://nsa11.casimages.com/img/2010/01/14/100114065612568113.png') center repeat-y;
  padding: 10px; /* Il vaut mieux ajouter quelques pixels de marge intérieure, sinon le forum est collé à l'image intérieure, et ça ne rend pas bien. Faites le test sinon !*/
  border: none;
}

.categorie{
  width: 98%;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #ffffff;
  border-top: 3px solid #;
  border-bottom: 1px solid #;
  border-right: 1px solid #;
  border-left: 1px solid #;
  box-shadow: 0px 0px 5px #;
  -moz-box-shadow: 0px 0px 5px #;
  -o-box-shadow: 0px 0px 5px #;
  -htm-box-shadow: 0px 0px 5px #;
  -webkit-box-shadow: 0px 0px 5px #;
  border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;}

.forum{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  background: #ffffff;
  border: 1px dotted #;
  padding: 2px;
 border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;}

.forumlink{
  display: block;
  width: 450px;
  font-variant: small-caps;
  letter-spacing: 2px;
  padding-left: 20px;
  text-shadow: 1px 1px 0px #d0e8d5;
  border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;}

.forumlink a{
  font-size: 16px;
  border-bottom: 2px dotted #459E76;
 border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;}

.description{
  display: block;
  width: 490px;
  margin: auto;
  font-size: 11px;
  text-align: justify;
  color: #000000;}

.illu{
  float: right;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 10px;
  border: 1px solid #;
  background: #ebf4e9;
  padding: 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;}

.stats_last{
  display: block;
  width: 160px;
  margin: auto;
  background: #ebf4e9;
  padding: 10px;
  border: 1px dotted #;
  border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -moz-box-shadow: 0px 0px 3px #91b38b;
  box-shadow: 0px 0px 3px #91b38b;
  -webkit-box-shadow: 0px 0px 3px #91b38b;}
.stats{ 
  display: block;
  text-align: center;
  font-size: 10px;
  color: #000000;
  border-bottom: 1px solid #;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -moz-box-shadow: 0px 0px 3px #000000;
  box-shadow: 0px 0px 3px #000000;
  -webkit-box-shadow: 0px 0px 3px #000000;}

.last{
  display: block;
  text-align: center;
  font-size: 11px;}

.sous_forum{
  display: block;
  width: 98%;
  margin: auto;
  background: #ebf4e9;
  padding: 2px;
  text-align: center;
  border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;}

Voilà, si vous avez une idée d'où vient le problème je suis toute à vous ! Merci en tout cas de m'avoir lue jusque là =)

Avec tout mon amour ♥️ PB tuto "Encadrer chacun de vos forums de façon originale" 1001172573
MessageSujet: PB tuto "Encadrer chacun de vos forums de façon originale"   PB tuto "Encadrer chacun de vos forums de façon originale" EmptyVen 05 Avr 2013, 20:51
Revenir en haut Aller en bas
http://www.css-actif.com
Orange
Orange
RocketMan
RocketMan

Masculin Messages : 3086



PB tuto "Encadrer chacun de vos forums de façon originale" Empty
Bonjour,

Je n'ai pas fait d'analyse approfondie, mais ce tutoriel contient visiblement une erreur Siffle. La propriété background-image que as mis dans ton CSS ne peut contenir que l'url de l'image que tu veux mettre en fond, et en aucun cas sa position et sa répétition comme c'est le cas ici.

L'idéal serait de remplacer:
Code:

background-color: transparent;
background-image: url('http://nsa10.casimages.com/img/2010/01/14/100114070515465818.png') center top no-repeat;

par
Code:

background: url('http://nsa10.casimages.com/img/2010/01/14/100114070515465818.png') transparent center top no-repeat

Aux trois endroits dans ton CSS, en prenant bien soin de changer l'url de l'image pour ne pas avoir la même partout et le no-repeat par repeat-y dans le bloc du forumline. Wink

Reviens nous en donner des nouvelles lorsque c'est fait !
MessageSujet: Re: PB tuto "Encadrer chacun de vos forums de façon originale"   PB tuto "Encadrer chacun de vos forums de façon originale" EmptySam 06 Avr 2013, 09:36
Revenir en haut Aller en bas
http://generation-experie.forumactif.org/
Ronce
Ronce
{ Membre }
{ Membre }

Féminin Messages : 17



PB tuto "Encadrer chacun de vos forums de façon originale" Empty
Merci d'avoir répondu =)

Je comprend ce qui ne marchais pas ce CSS, j'aurais dû m'en rendre compte après la lecture des premiers cours ^^'
Alors j'ai changé le CSS ; donc voilà comment il est maintenant :

Code:
.ajout_haut {
  background: url('http://nsa10.casimages.com/img/2010/01/14/100114065535545189.png') transparent center top no-repeat;
  width: 900px;
  height: 32px;
  border: none;
}

.ajout_bas {
  background: url('http://nsa10.casimages.com/img/2010/01/14/100114070515465818.png') transparent center top no-repeat;
  width: 900px;
  height: 26px;
  border: none;
}

.forumline {
  background: url('http://nsa11.casimages.com/img/2010/01/14/100114065612568113.png') transparent center top repeat-y;
  padding: 10px; /* Il vaut mieux ajouter quelques pixels de marge intérieure, sinon le forum est collé à l'image intérieure, et ça ne rend pas bien. Faites le test sinon !*/
  border: none;
}

.categorie{
  width: 900px;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #ffffff;
  border-top: 3px solid #;
  border-bottom: 1px solid #;
  border-right: 1px solid #;
  border-left: 1px solid #;
  box-shadow: 0px 0px 5px #;
  -moz-box-shadow: 0px 0px 5px #;
  -o-box-shadow: 0px 0px 5px #;
  -htm-box-shadow: 0px 0px 5px #;
  -webkit-box-shadow: 0px 0px 5px #;
  border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;}

.forum{
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  background: #ffffff;
  border: 1px dotted #;
  padding: 2px;
 border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;}

.forumlink{
  display: block;
  width: 450px;
  font-variant: small-caps;
  letter-spacing: 2px;
  padding-left: 20px;
  text-shadow: 1px 1px 0px #d0e8d5;
  border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;}

.forumlink a{
  font-size: 16px;
  border-bottom: 2px dotted #459E76;
 border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;}

.description{
  display: block;
  width: 490px;
  margin: auto;
  font-size: 11px;
  text-align: justify;
  color: #000000;}

.illu{
  float: right;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 10px;
  border: 1px solid #;
  background: #ebf4e9;
  padding: 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;}

.stats_last{
  display: block;
  width: 160px;
  margin: auto;
  background: #ebf4e9;
  padding: 10px;
  border: 1px dotted #;
  border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -moz-box-shadow: 0px 0px 3px #91b38b;
  box-shadow: 0px 0px 3px #91b38b;
  -webkit-box-shadow: 0px 0px 3px #91b38b;}
.stats{ 
  display: block;
  text-align: center;
  font-size: 10px;
  color: #000000;
  border-bottom: 1px solid #;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -moz-box-shadow: 0px 0px 3px #000000;
  box-shadow: 0px 0px 3px #000000;
  -webkit-box-shadow: 0px 0px 3px #000000;}

.last{
  display: block;
  text-align: center;
  font-size: 11px;}

.sous_forum{
  display: block;
  width: 900px;
  margin: auto;
  background: #ebf4e9;
  padding: 2px;
  text-align: center;
  border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;}

Mais du coup c'est toujours pas bon^^ (mon forum test est par là !)
Un problème dans le code des templates ?
J'en profite aussi car j'ai un autre problème : la largeur de mon forum, qui ne veut pas changer^^ Je l'ai mise à 900px, et c'est pas du 900px là^^ Je me disais que c'était peut être mon css qui interférait, du coup j'ai mit toutes les largeurs, dans le css, qui étaient en pourcentage, à 900px, mais rien^^ Aucune idée de si c'est lié ou pas à l'autre problème, mais je ne pense pas^^

Encore merci ! PB tuto "Encadrer chacun de vos forums de façon originale" 577704309
MessageSujet: Re: PB tuto "Encadrer chacun de vos forums de façon originale"   PB tuto "Encadrer chacun de vos forums de façon originale" EmptyDim 07 Avr 2013, 12:22
Revenir en haut Aller en bas
http://www.css-actif.com
Orange
Orange
RocketMan
RocketMan

Masculin Messages : 3086



PB tuto "Encadrer chacun de vos forums de façon originale" Empty
Déjà, tu as confondu le lien de l'image du milieu avec le lien de l'image du bas ^^. Inverse l'url dans .forumline et .ajout_bas et ça devrait fonctionner.

Pour ce qui est de l'aggrandissement, c'est à cause de ta bannière... elle fait 1300px de large et élargie tout le forum en conséquence, va falloir que tu passes par les template pour sortir ta bannière du .bodyline et y'a un tuto pour ça: http://www.css-actif.com/t1146-profiter-dune-banniere-de-fond-et-dun-fond Wink

Voilà.
MessageSujet: Re: PB tuto "Encadrer chacun de vos forums de façon originale"   PB tuto "Encadrer chacun de vos forums de façon originale" EmptyDim 07 Avr 2013, 13:46
Revenir en haut Aller en bas
http://generation-experie.forumactif.org/
Ronce
Ronce
{ Membre }
{ Membre }

Féminin Messages : 17



PB tuto "Encadrer chacun de vos forums de façon originale" Empty
Ah oui, d’accord, je suis stupide, désolée^^

Je vais suivre le tuto que tu m'as donné =) Par contre, je pense qu'il restera un problème pour la page d'accueil : elle ne sera pas dans le cadre, si ? Je dis ça parce que là l'image du bas du cadre est au dessus de la ligne qui me sert actuellement de page d'accueil^^

Voilà désolée, encore merci =)

Edit : en fait je veux un fond uni, donc je vais juste mettre ma bann en fond, mais merci ♥
MessageSujet: Re: PB tuto "Encadrer chacun de vos forums de façon originale"   PB tuto "Encadrer chacun de vos forums de façon originale" EmptyLun 08 Avr 2013, 07:15
Revenir en haut Aller en bas
Melone
Melone
{ Modérateur }
{ Modérateur }

Féminin Messages : 805



PB tuto "Encadrer chacun de vos forums de façon originale" Empty
Bonjour,

Est-ce que cela signifie que le problème est résolu ? Smile
MessageSujet: Re: PB tuto "Encadrer chacun de vos forums de façon originale"   PB tuto "Encadrer chacun de vos forums de façon originale" EmptyLun 08 Avr 2013, 13:34
Revenir en haut Aller en bas
http://generation-experie.forumactif.org/
Ronce
Ronce
{ Membre }
{ Membre }

Féminin Messages : 17



PB tuto "Encadrer chacun de vos forums de façon originale" Empty
ll reste un problème pour la page d'accueil qui n'est pas dans le cadre^^ Mais sinon c'est pas grave, je peux essayer de me débrouiller seule, vous m'avez déjà bien aidée =)
MessageSujet: Re: PB tuto "Encadrer chacun de vos forums de façon originale"   PB tuto "Encadrer chacun de vos forums de façon originale" EmptyLun 08 Avr 2013, 13:50
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



PB tuto "Encadrer chacun de vos forums de façon originale" Empty
Bonjour,

Oh tiens, un des dessins de Yuumei, pense à la créditer (avec un beau lien dans une zone bien visible), elle mérite d'être connue cette artiste.

Pour ton problème, je ne comprends pas quelle est cette histoire de page d'accueil pas dans le cadre, tu peux expliciter ?
MessageSujet: Re: PB tuto "Encadrer chacun de vos forums de façon originale"   PB tuto "Encadrer chacun de vos forums de façon originale" EmptyMar 09 Avr 2013, 08:03
Revenir en haut Aller en bas
http://generation-experie.forumactif.org/
Ronce
Ronce
{ Membre }
{ Membre }

Féminin Messages : 17



PB tuto "Encadrer chacun de vos forums de façon originale" Empty
Oui Yuumei est géniale ! =) Là c'est juste le forum test, mais je le ferais sur le vrai Very Happy Et puis CSS-Actif aussi^^

J'ai fait un petit montage pour expliquer mon problème :

https://2img.net/r/ihimizer/img441/9572/pbpa.jpg

(j'ai peut-être mal placé un code dans les templates, mais lequel ?^^)

Merci à vous !
MessageSujet: Re: PB tuto "Encadrer chacun de vos forums de façon originale"   PB tuto "Encadrer chacun de vos forums de façon originale" EmptyMar 09 Avr 2013, 13:24
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



PB tuto "Encadrer chacun de vos forums de façon originale" Empty
Est-ce qu'on peut voir ton template index_body ? Tu as bien suivi le tutoriel pour cette partie ?
MessageSujet: Re: PB tuto "Encadrer chacun de vos forums de façon originale"   PB tuto "Encadrer chacun de vos forums de façon originale" EmptyMar 09 Avr 2013, 13:41
Revenir en haut Aller en bas
http://generation-experie.forumactif.org/
Ronce
Ronce
{ Membre }
{ Membre }

Féminin Messages : 17



PB tuto "Encadrer chacun de vos forums de façon originale" Empty
J'ai trouvé l'erreur ! C'était ma faute ^^'

En tout cas merci beaucoup pour toute l'aide que vous m'avez apporté, et désolée d'être une telle boulette --'

Vous pouvez archiver Smile
MessageSujet: Re: PB tuto "Encadrer chacun de vos forums de façon originale"   PB tuto "Encadrer chacun de vos forums de façon originale" EmptyMar 09 Avr 2013, 16:21
Revenir en haut Aller en bas
http://www.school-of-pub.net/forum.htm
Murtagh
Murtagh
{ Modérateur }
{ Modérateur }

Masculin Messages : 1492



PB tuto "Encadrer chacun de vos forums de façon originale" Empty
Je déplace, donc. Bon dimanche PB tuto "Encadrer chacun de vos forums de façon originale" 510527
MessageSujet: Re: PB tuto "Encadrer chacun de vos forums de façon originale"   PB tuto "Encadrer chacun de vos forums de façon originale" EmptyDim 14 Avr 2013, 07:20
Revenir en haut Aller en bas
Contenu sponsorisé




PB tuto "Encadrer chacun de vos forums de façon originale" Empty
MessageSujet: Re: PB tuto "Encadrer chacun de vos forums de façon originale"   PB tuto "Encadrer chacun de vos forums de façon originale" Empty
Revenir en haut Aller en bas
 

PB tuto "Encadrer chacun de vos forums de façon originale"

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

 Sujets similaires

-
» [Résolu] Affichage des forums, sous-forums : remplacer l'image par un texte
» Impossibilité de rentrer dans les forums et sous-forums
» Tutorial "Encadrer chacun de vos forums de façon originale" qui ne marche pas [résolu]
» Tutorial "<Template PHPBB2> Encadrer chacun de vos forums de façon originale" - Problème
» Question sur le tuto "des sous forums en retour à la ligne" (résolu!!)

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-
ChatBox
:
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  Connexion  S'enregistrerS'enregistrer  

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