[Résolu] Colonne et pied de page

griggione · 16-02-2015 15:58:49

Bonjour tous

Les css de fluxbb sont du type "properties driven" et c'est fort déroutant, je me demande comment font ceux qui utilisent, quelle perte de temps !

J'ai décidé de faire une colonne droite, à coté des catégories et du footer.
Pas de problème, c'est en place, d'ailleurs faudra que je le fasse sur le style de base de FluxBB et que je propose ce théme à moins qu'il existe déjà un theme avec colonne (sauf que je sais pas quel est le theme de base)

Ensuite, comme on le voit ICI, j'ai rajouté un pied de page (nommé ainsi pour séparé du footer natif)
J'ai placé la div aprés la <div id="pun<pun_page>" class="pun">

Hé bien impossible de la caler en bas, la div reste bloquée sous <pun_announcement>
Cette colonne existe uniquement sur le FO (main.tpl), sur l'admin, mon pied de page va bien.

On voit, le pied de page, en bordeaux :

  <body>
    <div id="pun<pun_page>" class="pun">
      <div class="end-box"></div>
    </div>
    <div id="pieddepage">
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </body>

#pieddepage { 
  margin-bottom: 3px;
  background-image: url("Technetium/footer_bg.gif");
  background-repeat: repeat-x;
  height: 40px;
  color: #ffffff;
  text-align: center;
}
#pieddepage ul  {
  margin: 20px auto 0 auto;
  padding: 7px 0 0 0;
}
#pieddepage ul li {
  list-style-type: none;
  display: inline;
}
#pieddepage ul li a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  text-decoration: underline;
  vertical-align: middle;
}

Otomatic · 16-02-2015 17:32:34

Bonjour,
La div de pied de page doit être ajoutée par un <pun_include....> dans main.tpl, juste après <pun_footer> :

<pun_footer>
<pun_include "pied_bas.php"> <!--modif oto ligne ajoutée-->

Et, dans le fichier mon_forum\include\user\pied_bas.php, on met (À modifier) :

<div class="block">
  <div class="box">
  	<p>Pied de page</p>
  </div>
</div>

avec, éventuellement, un style='clear:both;' sur la div de class block.

griggione · 16-02-2015 18:18:53

Bonjour Otomatic

J'ai créé le fichier pieddepage.php, mis ma ligne d'include <pun_include "pieddepage.php">, rajouté un clear: both;

Il y a affichage mais à 80% qui correspond à ma div categorie puisque je suis dedans, juste aprés <pun_footer>
Or j'aimerais l'avoir comme dans l'exemple ICI

Déjà je viens d'apprendre comment rajouter des div via les includes smile

Otomatic · 16-02-2015 18:55:55

Bonjour,

Sans garanties (N'ayant pas de colonne à droite, je ne peux pas vérifier).
Au lieu de mettre le <pun_include....> juste après <pun_footer>, le déplacer, pas-à-pas en direction du </body>
Donc, d'abord :

<pun_footer>
</div>
<pun_include "pieddepage.php"> <!--modif oto ligne ajoutée-->
<div class="end-box"></div>
</div>

puis :

<pun_footer>
</div>
<div class="end-box"></div>
<pun_include "pieddepage.php"> <!--modif oto ligne ajoutée-->
</div>

et ainsi de suite.

[HS]
Au lieu de ...bébéWeb, dans ma signature, je pourrais mettre : 71 ans... et papyWeb - Usenet en 1986 - La toile en 1994

griggione · 16-02-2015 19:43:08

RE

Pense bien que j'ai déjà essayé, toutes les autres positions me renvoient en haut.
L'idéal serait :

    <div id="pun<pun_page>" class="pun">
      <div class="punwrap"> 
        ..............
        <pun_announcement>
        <div id="categorie">
          <div id="brdmain">
            <pun_main>
          </div>
          <pun_footer>
        </div>
        <div id="colonne">
          <img src="style/Technetium/355.png" alt="" />
        </div>
      </div> 
      <pun_include "pieddepage.php"> <!--modif griggione ligne ajoutée-->
      <div class="end-box"></div>
    </div>

#categorie {
  width: 79%;
  float: left;
}
#colonne {
  width: 20%;
  margin-left: 2px;
  float: right;
  background-color: #fbfff4;
  border: #e3c55b solid 1px;
  border-radius: 0.3em 0.3em 0 0;
  margin-bottom: 10px;
}

Otomatic a écrit :

Usenet en 1986 - La toile en 1994

La toile en 1988 pour le travail

Otomatic a écrit :

71 ans... et papyWeb -

Otomatic · 16-02-2015 20:07:08

Bonsoir,

Dans ton css, essayer :

#pieddepage { 
  margin-bottom: 3px;
  background-image: url("Technetium/footer_bg.gif");
  background-repeat: repeat-x;
  height: 40px;
  color: #ffffff;
  text-align: center;
  clear:both;
  z-index:1000;
}

Et dans le css #colonne ajoute z-index:10;

griggione · 17-02-2015 09:28:35

Bonjour tous,

Alors, c'est de ma faute, j'avais mis :

<div id="pieddepage" class="clear">
  <ul>
    <li></li>
    <li></li>
  </ul>
</div>

#pieddepage .clear {
  clear: both;
}

En voyant ton dernier code, ça m'a fait tilt, pourquoi une class en plus ?
J'ai rectifié comme ça et tout se met en place :

#pieddepage { 
  margin-bottom: 3px;
  background-image: url("Technetium/footer_bg.gif");
  background-repeat: repeat-x;
  height: 40px;
  color: #ffffff;
  text-align: center;
  clear: both;
}

Ensuite, au choix, selon que je le met dans ou aprés la <div id="pun<pun_page>" class="pun">, ben j'ai mon background-image en 990px ou tout l'écran.

Je te remercie Otomatic

Ha oui, c'est quoi le theme de base ?
Existe-t-il un tgeme avec colonne ?

Otomatic · 17-02-2015 12:03:35

Bonjour,

griggione a écrit :

En voyant ton dernier code, ça m'a fait tilt, pourquoi une class en plus ?

On peut très bien utiliser des class multiples, mais, en principe, on ne le fait pas sur un 'id', qui, par définition, est unique pour une page. Ne pas oublier, en cas de class multiples, que c'est la dernière (lu de gauche à droite) qui est prioritaire et peut annuler ou modifier les définitions des class précédentes.

griggione a écrit :

Ha oui, c'est quoi le thème de base ?

En principe, Air.

FluxBB.fr

#1 16-02-2015 15:58:49

[Résolu] Colonne et pied de page

#2 16-02-2015 17:32:34

Re : [Résolu] Colonne et pied de page

#3 16-02-2015 18:18:53

Re : [Résolu] Colonne et pied de page

#4 16-02-2015 18:55:55

Re : [Résolu] Colonne et pied de page

#5 16-02-2015 19:43:08

Re : [Résolu] Colonne et pied de page

#6 16-02-2015 20:07:08

Re : [Résolu] Colonne et pied de page

#7 17-02-2015 09:28:35

Re : [Résolu] Colonne et pied de page

#8 17-02-2015 12:03:35

Re : [Résolu] Colonne et pied de page

Pied de page des forums