Mettre une image en tete et fin de tableau
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Mettre une image en tete et fin de tableau
Détails techniques
Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://seattle-university.forumactif.info
Description du problème
Bonjour a tous!Alors voila en plein dans la préparation d'une futur version pour mon RPG je cherche a implanté des images en tête et fin de chaque tableau (catégorie mère?)
Sur l'image que j'ai joind on peu voir l'effet que je voudrais mais celui ci est du au faite que j'ai placé l'image directement dans le titre de categorie avec le code
- Code:
<center><IMG SRC="http://img15.hostingpics.net/pics/867530barre.png" class="HORS JEU"></center>
mais en faite cela me deforme donc le reste quand on rentre dans la dite catégorie. et en plus je ne peux pas mettre ma barre en pied de tableau.
Mes images sont donc:
Tête: https://2img.net/r/hpimg15/pics/867530barre.png
Fin: https://2img.net/r/hpimg15/pics/236367barre2.png
Et en plus de mon css, les templats suivant sont deja modifié
index_box, overall_footer_end, overall_header et viewtopic_body
Dernière édition par kiarie le Dim 22 Mar 2015 - 20:53, édité 1 fois
Re: Mettre une image en tete et fin de tableau
Bonsoir
La réponse est ici : https://forum.forumactif.com/t321723-image-en-haut-et-en-bas-des-categories
Cordialement.
La réponse est ici : https://forum.forumactif.com/t321723-image-en-haut-et-en-bas-des-categories
Cordialement.
Invité- Invité
Re: Mettre une image en tete et fin de tableau
Hey! Merci pour ta réponse!
J'ai changé les codes et en effet ça marche par contre ça me met les images en dehors des tableaux et non dedans comme si c'était le cadre :/
http://seattle-university.forumactif.info/
J'ai changé les codes et en effet ça marche par contre ça me met les images en dehors des tableaux et non dedans comme si c'était le cadre :/
http://seattle-university.forumactif.info/
Re: Mettre une image en tete et fin de tableau
Re,
Dans ce cas, en reprenant toutes les explications :
remplacez :
par :
et :
par :
Cordialement.
Dans ce cas, en reprenant toutes les explications :
remplacez :
- Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
par :
- Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="URL DE L'IMAGE DU HAUT" /></td></tr></table>
<tr>
et :
- Code:
<!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
par :
- Code:
<!-- BEGIN tablefoot -->
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="URL DE L'IMAGE DU BAS" /></td></tr></table>
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Cordialement.
Invité- Invité
Re: Mettre une image en tete et fin de tableau
Oula! ça m'a tout déformé oO
Re: Mettre une image en tete et fin de tableau
Dans ce cas essayez ainsi :
Cordialement.
- Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<img src="URL DE L'IMAGE DU HAUT" />
<tr>
- Code:
<!-- BEGIN tablefoot -->
<img src="URL DE L'IMAGE DU BAS" />
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Cordialement.
Invité- Invité
Re: Mettre une image en tete et fin de tableau
Bon ça ne déforme plus mais les images sont encore en dehors des tableaux x)
Re: Mettre une image en tete et fin de tableau
S'il vous plait, quelqu'un pour mon problème? u.u
Re: Mettre une image en tete et fin de tableau
bonjour , si tu veut tu peut faire un essais de cette façon ...
la table forumline c'est l'arriere plan de tes catégories.
essaye plutôt de l'insérer comme ceci , en jaune c'est la position actuel comme sur ce lien
et le rouge c'est la ligne ou tu peut un essais ,c'est la ligne <h2>titre catégorie<h2>d'ailleur le titre est invisible
explication >>
la ligne que je t'indique tu verra mieux^^
bonne chance
la table forumline c'est l'arriere plan de tes catégories.
essaye plutôt de l'insérer comme ceci , en jaune c'est la position actuel comme sur ce lien
et le rouge c'est la ligne ou tu peut un essais ,c'est la ligne <h2>titre catégorie<h2>d'ailleur le titre est invisible
explication >>
- en image :
- Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"><img src="http://img15.hostingpics.net/pics/867530barre.png" />
la ligne que je t'indique tu verra mieux^^
- Code:
<tr><th colspan="4" nowrap="nowrap" width="100%" class="secondarytitle"> <h2>HORS JEU</h2> </th></tr>
bonne chance
Invité- Invité
Re: Mettre une image en tete et fin de tableau
Hello!
Déjà merci pour ton aide! Je veux bien essayé ta technique mais par contre j'ai pas compris se que tu voulais que je reprendre et recolle ou x) L'image que tu me montre n'est pas ce que je vois dans mes templats donc c'est que je dois remettre mon templats a zéro ou... ?
Déjà merci pour ton aide! Je veux bien essayé ta technique mais par contre j'ai pas compris se que tu voulais que je reprendre et recolle ou x) L'image que tu me montre n'est pas ce que je vois dans mes templats donc c'est que je dois remettre mon templats a zéro ou... ?
Re: Mettre une image en tete et fin de tableau
Bonjour,
sinon pourquoi ne pas mettre les images en fond des tableaux ?
- Retirez toutes les couleurs des cellules dans le panneau d'administration,
- localisez le code suivant dans votre css :
- modifiez
puis ajoutez
Il reste alors à modifier le border-radius pour le faire coller à l'image de fond, avec 40px je crois que c'est bon xP
Ce qui donne finalement :
Et puis peut être après faire quelques réglages avec les en-tête et lesp ieds du tableau pour que les forums apparaissent bien entre les images et pas dessus ^^
Si vous voulez que cela n'apparaisse que sur l'index, il faut juste ajouter une classe aux tableau .forumline sur l'index pour modifiez .forumline des codes au dessus par la nouvele classe ^^
sinon pourquoi ne pas mettre les images en fond des tableaux ?
- Retirez toutes les couleurs des cellules dans le panneau d'administration,
- localisez le code suivant dans votre css :
- Code:
.forumline {
border: 3px solid #719778;
background-color: #F0EBE5;
border-radius: 10px;
}
- modifiez
- Code:
background-color: #F0EBE5;
- Code:
background: url(http://img15.hostingpics.net/pics/867530barre.png) no-repeat top center, url(http://img15.hostingpics.net/pics/236367barre2.png) no-repeat bottom center, #F0EBE5;
puis ajoutez
- Code:
background-size: contain, contain;
Il reste alors à modifier le border-radius pour le faire coller à l'image de fond, avec 40px je crois que c'est bon xP
Ce qui donne finalement :
- Code:
table.forumline {
border: 3px solid #719778;
background: url(http://img15.hostingpics.net/pics/867530barre.png) no-repeat top center, url(http://img15.hostingpics.net/pics/236367barre2.png) no-repeat bottom center, #F0EBE5;
background-size: contain, contain;
border-radius: 40px;
}
Et puis peut être après faire quelques réglages avec les en-tête et lesp ieds du tableau pour que les forums apparaissent bien entre les images et pas dessus ^^
Si vous voulez que cela n'apparaisse que sur l'index, il faut juste ajouter une classe aux tableau .forumline sur l'index pour modifiez .forumline des codes au dessus par la nouvele classe ^^
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Mettre une image en tete et fin de tableau
Salut MlleAlys!
Alors j'ai remis mon templat de base et appliqué ton code, ça semble bien marché sauf que tu coup les categorie apparaisse sur l'image. comment crée un espace entre les deux partie?
Merci beaucoup en tout cas
Alors j'ai remis mon templat de base et appliqué ton code, ça semble bien marché sauf que tu coup les categorie apparaisse sur l'image. comment crée un espace entre les deux partie?
Merci beaucoup en tout cas
Re: Mettre une image en tete et fin de tableau
Je crois que j'ai trouvé encore plus pratique en fait !! 8D
Il s'agit de mettre l'image en bordure du tableau plutôt qu'en fond en utilisant la propriété css border-image ! ^^
Donc j'ai refusionner les images avec une bordure comme ça :
https://www.zupimages.net/up/15/12/9t13.png
et puis j'ai utilisé ce générateur très pratique ^^ :
http://border-image.com/
Donc au final, vous pouvez remplacer le code précédent :
par celui-ci :
Et l'image apparaitra en bordure, et donc les éléments du tableau seront bien au centre et non sur les images ^^
Il s'agit de mettre l'image en bordure du tableau plutôt qu'en fond en utilisant la propriété css border-image ! ^^
Donc j'ai refusionner les images avec une bordure comme ça :
https://www.zupimages.net/up/15/12/9t13.png
et puis j'ai utilisé ce générateur très pratique ^^ :
http://border-image.com/
Donc au final, vous pouvez remplacer le code précédent :
- Code:
table.forumline {
border: 3px solid #719778;
background: url(http://img15.hostingpics.net/pics/867530barre.png) no-repeat top center, url(http://img15.hostingpics.net/pics/236367barre2.png) no-repeat bottom center, #F0EBE5;
background-size: contain, contain;
border-radius: 40px;
}
par celui-ci :
- Code:
table.forumline {
border-radius: 40px;
border-style: solid;
border-width: 137px 8px 137px 4px;
-moz-border-image: url(http://zupimages.net/up/15/12/9t13.png) 137 8 137 4 stretch;
-webkit-border-image: url(http://zupimages.net/up/15/12/9t13.png) 137 8 137 4 stretch;
-o-border-image: url(http://zupimages.net/up/15/12/9t13.png) 137 8 137 4 stretch;
border-image: url(http://zupimages.net/up/15/12/9t13.png) 137 8 137 4 fill stretch;
}
Et l'image apparaitra en bordure, et donc les éléments du tableau seront bien au centre et non sur les images ^^
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Mettre une image en tete et fin de tableau
En effet ça marche très bien! Par contre en bas ça va mais en haut ça me fais un grand espace entre la barre et la 1er catégorie, un moyen de modifier ça?
ah mais en plus je viens de voir que mes titre de forum du coup n'apparaissent plus dans les barres, d'ou l'espace en faite.
ah mais en plus je viens de voir que mes titre de forum du coup n'apparaissent plus dans les barres, d'ou l'espace en faite.
Re: Mettre une image en tete et fin de tableau
C'est le titre de votre catégorie, qui n'est pas visible car de la même couleur que le fond =P
Vous pouvez réduire la hauteur du bloc titre en minimisant la hauteur de ligne, et puis remonter le titre avec une position relative pour qu'il se superpose à l'image de bordure, et puis après arbitrairement j'ajoute un effet d'ombre pour le détacher un peu du fond =P (mais vous pouvez à la place modifier la couleur ou autre ^^
Ce qui donne en complétant ce code :
Celui là :
Vous pouvez réduire la hauteur du bloc titre en minimisant la hauteur de ligne, et puis remonter le titre avec une position relative pour qu'il se superpose à l'image de bordure, et puis après arbitrairement j'ajoute un effet d'ombre pour le détacher un peu du fond =P (mais vous pouvez à la place modifier la couleur ou autre ^^
Ce qui donne en complétant ce code :
- Code:
.secondarytitle, .secondarytitle h2 {
font-size: 55px;
font-family: "Raleway Dots";
color: #F0EBE5;
}
Celui là :
- Code:
.secondarytitle, .secondarytitle h2 {
font-size: 55px;
font-family: "Raleway Dots";
color: #F0EBE5;
line-height: 1px;
position: relative;
top: -40px;
text-shadow: 1px 1px 5px black;
}
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Mettre une image en tete et fin de tableau
Ok j'ai changé et en effet c'est pas mal! C'est le top: -40px qui regle la hauteur du texte?
par contre quand on rentre dans un sujet ou autre, il y a une espèce de trace de tableau en haut et en bas, comment l'enlevé?
http://seattle-university.forumactif.info/t28-teste#70
par contre quand on rentre dans un sujet ou autre, il y a une espèce de trace de tableau en haut et en bas, comment l'enlevé?
http://seattle-university.forumactif.info/t28-teste#70
Re: Mettre une image en tete et fin de tableau
oui, position:relative permet de repositionner l'élément par rapport à sa position d'origine, et du coup top:-40px remonte le texte de 40px par rapport à sa position d'origine ^^
Pour ce que j'appelle les bordures parasites, essayez d'ajouter ce code dans votre css :
Pour ce que j'appelle les bordures parasites, essayez d'ajouter ce code dans votre css :
- Code:
.catBottom, .catHead {
border: none !important;
}
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Mettre une image en tete et fin de tableau
C'est bon ça me les a effacé!
par contre autre question, avec le premier code j'avais pu changé la couleur de fond des catégories la je ne vois pas le code background et quand je passe par l'administration des couleur directement ça ne me colorie que vraiment les catégories et pas tout le tableau.
j'aurais besoin d'aide pour un autre sujet par la suite, centre les titres de mes caté ainsi que les sous forum et placé un encadré autour des textes de présentation, je peu le faire ici ou faut il que j'ouvre un nouveau sujet?
par contre autre question, avec le premier code j'avais pu changé la couleur de fond des catégories la je ne vois pas le code background et quand je passe par l'administration des couleur directement ça ne me colorie que vraiment les catégories et pas tout le tableau.
j'aurais besoin d'aide pour un autre sujet par la suite, centre les titres de mes caté ainsi que les sous forum et placé un encadré autour des textes de présentation, je peu le faire ici ou faut il que j'ouvre un nouveau sujet?
Re: Mettre une image en tete et fin de tableau
Vous avez ce code autre part dans votre css :
Vos catégories auront alors un fond vert pâle, et c'est en fait dans le panneau d'administration la couleur de contour "Couleur du cadre des cellules" ^^
EDIT
pardon, j'avais oublié la suite ><"
Les titres des catégories apparaissent déjà centrés chez moi, pour les titres des forums, localisez ce code dans votre css :
- Code:
.forumline {
border: 3px solid #719778;
background-color: #F0EBE5;
border-radius: 10px;
}
Vos catégories auront alors un fond vert pâle, et c'est en fait dans le panneau d'administration la couleur de contour "Couleur du cadre des cellules" ^^
EDIT
pardon, j'avais oublié la suite ><"
Les titres des catégories apparaissent déjà centrés chez moi, pour les titres des forums, localisez ce code dans votre css :
- Code:
.forumlink {
color: #006654;
font-size: 12px;
font-weight: 700;
}
- Code:
.forumlink {
color: #006654;
font-size: 12px;
font-weight: 700;
display: block;
text-align: center;
}
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Mettre une image en tete et fin de tableau
Oui pardon je voulais parler des titres de forum et non de catégorie.
Pour ce qui est de forumlink je ne trouve que deux codes chez moi et ils ne correspondent pas au votre
Pour ce qui est de forumlink je ne trouve que deux codes chez moi et ils ne correspondent pas au votre
- Code:
a.forumlink:link, a.forumlink:visited {
font-family:"Coming Soon";
text-transform:uppercase;
font-size:18px;
color:#006654;
padding-left: 20px;
letter-spacing: -1pt;
-moz-transition-property : letter-spacing ;
-moz-transition-duration : 1s ;
}
a.forumlink:hover{
letter-spacing: 3pt;
}
Re: Mettre une image en tete et fin de tableau
Ah oui pardon, ça fait partie du css de base, erreur de ma part. ^^"
Ajoutez donc celui là ^^ :
Ajoutez donc celui là ^^ :
- Code:
.forumlink {
display: block;
text-align: center;
}
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Mettre une image en tete et fin de tableau
d'accord ça marche nickel^^ et du coup pour les sous forum? x)
Pour les titres de forum j'ai un effet de texte, si je ne me trompe pas c'est ce code
comment l'appliqué aussi au sous forum?
Pour les titres de forum j'ai un effet de texte, si je ne me trompe pas c'est ce code
- Code:
a.mainmenu{
color:#006654;
cursor:crosshair;
margin:-3px;
font-size:12px;
font-family:"Coming Soon";
text-transform:uppercase;
-moz-transition-property: color, background-color;
-webkit-transition-property: color, background-color;
-o-transition-property: color, background-color;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
comment l'appliqué aussi au sous forum?
Re: Mettre une image en tete et fin de tableau
oups pardon ^^"
non .mainmenu c'est pour les liens de la barre de navigation et des boites de la messagerie personnelle ^^
Je ne vois pas de code pour les sous-forums en tout cas, ajoutez celui là :
non .mainmenu c'est pour les liens de la barre de navigation et des boites de la messagerie personnelle ^^
Je ne vois pas de code pour les sous-forums en tout cas, ajoutez celui là :
- Code:
td.row1.over span.gensmall {
display: block;
text-align: center;
}
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Mettre une image en tete et fin de tableau
ça marche! par contre je remarque un truc, certain titre ne se centre pas comme il faut. Dans la caté université les forum comme hall, couloir, self, etc ne sont pas bien centré par rapport aux autres titres. en faite je crois que tous les titres on un problème de centrage x)
Sinon du coup au niveau de mes forum j'aimerais appliquer cette apparence
je devrais peu etre crée un nouveau sujet pour ça?
Sinon du coup au niveau de mes forum j'aimerais appliquer cette apparence
je devrais peu etre crée un nouveau sujet pour ça?
Re: Mettre une image en tete et fin de tableau
exact pour le centrage, c'est à cause de la largeur de la cellule qui n'est pas fixe, qui se règle en fonction de la largeur du titre et de celle des stats à droite du titre ("X messages dans X sujets")... et pour corriger cela le plus direct est de passer par les templates.
Mais effectivement, le problème sur les images d'en tête et de pied de catégories étant réglé, mieux vaut ouvrir un nouveau sujet si vous avez des problèmes avec la modification de vos catégories (à titre de rappel par contre, le forum des forums n'est un un forum de commande de codages , si vous ne l'avez pas fait essayez d'abord de faire quelque chose par vous même, et du coup d'avoir des questions un minimum précises ^^ )
Mais effectivement, le problème sur les images d'en tête et de pied de catégories étant réglé, mieux vaut ouvrir un nouveau sujet si vous avez des problèmes avec la modification de vos catégories (à titre de rappel par contre, le forum des forums n'est un un forum de commande de codages , si vous ne l'avez pas fait essayez d'abord de faire quelque chose par vous même, et du coup d'avoir des questions un minimum précises ^^ )
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Mettre une image en tete et fin de tableau
D'accord je comprends. Merci beaucoup en tout cas pour ton aide!
Sujets similaires
» comment mettre une image sur le tableau,enlever les lignes de colonne et mettre des sous un certain truc
» Mettre une image en tête de catégorie
» Mettre une vidéo sous l'image "en-tête" du forum
» Mettre une image différente à chaque en-tête de catégorie
» Créer un tableau spécial en tete
» Mettre une image en tête de catégorie
» Mettre une vidéo sous l'image "en-tête" du forum
» Mettre une image différente à chaque en-tête de catégorie
» Créer un tableau spécial en tete
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum