Mettre une image en tete et fin de tableau

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

Résolu Mettre une image en tete et fin de tableau

Message par kiarie le Lun 9 Mar 2015 - 21:42

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: http://img15.hostingpics.net/pics/867530barre.png
Fin: http://img15.hostingpics.net/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

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par Kinotto le Mar 10 Mar 2015 - 19:49


Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par kiarie le Mar 10 Mar 2015 - 20:00

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/

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par Kinotto le Mar 10 Mar 2015 - 20:06

Re,

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.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par kiarie le Mar 10 Mar 2015 - 20:12

Oula! ça m'a tout déformé oO

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par Kinotto le Mar 10 Mar 2015 - 20:44

Dans ce cas essayez ainsi :

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.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par kiarie le Mar 10 Mar 2015 - 21:00

Bon ça ne déforme plus mais les images sont encore en dehors des tableaux x)

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par kiarie le Jeu 12 Mar 2015 - 23:24

Up :3

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par kiarie le Sam 14 Mar 2015 - 12:26

Up u.u

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par kiarie le Lun 16 Mar 2015 - 21:49

Up T.T

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par kiarie le Jeu 19 Mar 2015 - 9:03

S'il vous plait, quelqu'un pour mon problème? u.u

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par R-max le Jeu 19 Mar 2015 - 11:40

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 >>
en image :
la ligne table ou tu a mis l'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>
ça ne coûte rien d’essayer.........
bonne chance

R-max
# Tropactif #

Masculin
Messages : 1511
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par kiarie le Jeu 19 Mar 2015 - 21:43

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... ?

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par MlleAlys le Jeu 19 Mar 2015 - 23:18

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 :
Code:
.forumline {
  border: 3px solid #719778;
  background-color: #F0EBE5;
  border-radius: 10px;
}

- modifiez
Code:
background-color: #F0EBE5;
par
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;
(les deux images non répétées et positionnées suivies de la couleur de fond)
puis ajoutez
Code:
  background-size: contain, contain;
pour que les images prennent bien la largeur du tableau,
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
+ Hyperactif +

Messages : 4403
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par kiarie le Dim 22 Mar 2015 - 16:58

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 Smile

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par MlleAlys le Dim 22 Mar 2015 - 18:17

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 :
http://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
+ Hyperactif +

Messages : 4403
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par kiarie le Dim 22 Mar 2015 - 18:42

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.

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par MlleAlys le Dim 22 Mar 2015 - 18:50

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 :
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
+ Hyperactif +

Messages : 4403
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par kiarie le Dim 22 Mar 2015 - 18:56

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

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par MlleAlys le Dim 22 Mar 2015 - 19:15

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 :
Code:
.catBottom, .catHead {
  border: none !important;
}

MlleAlys
+ Hyperactif +

Messages : 4403
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par kiarie le Dim 22 Mar 2015 - 19:20

C'est bon ça me les a effacé! Very Happy

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?

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par MlleAlys le Dim 22 Mar 2015 - 19:43

Vous avez ce code autre part dans votre css :
Code:
.forumline {
  border: 3px solid #719778;
  background-color: #F0EBE5;
  border-radius: 10px;
}
Vous pouvez le supprimer ^^
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;
}
Et complétez le ainsi :
Code:
.forumlink {
  color: #006654;
  font-size: 12px;
  font-weight: 700;
  display: block;
  text-align: center;
}

MlleAlys
+ Hyperactif +

Messages : 4403
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par kiarie le Dim 22 Mar 2015 - 19:59

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

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;
}

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par MlleAlys le Dim 22 Mar 2015 - 20:04

Ah oui pardon, ça fait partie du css de base, erreur de ma part. ^^"

Ajoutez donc celui là ^^ :
Code:
.forumlink {
  display: block;
  text-align: center;
}

MlleAlys
+ Hyperactif +

Messages : 4403
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par kiarie le Dim 22 Mar 2015 - 20:07

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
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?

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par MlleAlys le Dim 22 Mar 2015 - 20:13

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à :
Code:
td.row1.over span.gensmall {
  display: block;
  text-align: center;
}
S'il y a des effets autre part sur le forum par contre il faudra modifier un peu le template pour pouvoir cibler précisément les sous-forums ^^"

MlleAlys
+ Hyperactif +

Messages : 4403
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par kiarie le Dim 22 Mar 2015 - 20:21

ç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?

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par MlleAlys le Dim 22 Mar 2015 - 20:46

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 Wink , 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
+ Hyperactif +

Messages : 4403
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image en tete et fin de tableau

Message par kiarie le Dim 22 Mar 2015 - 20:52

D'accord je comprends. Merci beaucoup en tout cas pour ton aide! Smile

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

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


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