[RESOLU] Problèmes de footer Bouton_active[RESOLU] Problèmes de footer Bouton_hover[RESOLU] Problèmes de footer Fb-hover[RESOLU] Problèmes de footer 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
» Système d'onglets simple et personnalisable
[RESOLU] Problèmes de footer EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
[RESOLU] Problèmes de footer EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
[RESOLU] Problèmes de footer EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
[RESOLU] Problèmes de footer EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
[RESOLU] Problèmes de footer EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
[RESOLU] Problèmes de footer EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
[RESOLU] Problèmes de footer EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
[RESOLU] Problèmes de footer EmptySam 11 Fév 2023, 06:04 par Krager

-28%
Le deal à ne pas rater :
-28% Machine à café avec broyeur à grain MELITTA Purista
229.99 € 318.99 €
Voir le deal

Partagez
 

[RESOLU] Problèmes de footer

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



[RESOLU] Problèmes de footer Empty
Bonsoir à tous,

Je travaille activement sur un site internet qui trainait déjà depuis un petit moment. Je rencontre deux soucis avec le footer que j'aimerai finir au plus vite pour me lancer dans la suite.
- Impossible de mettre une couleur de fond… Je comprends absolument pas pourquoi, j'ai essayé avec le background-color et le background seul, ça ne fonctionne pas… Je n'ai rien fait de plus que sur ma page d'accueil, où la couleur de fond par exemple est bien présente…
- J'aimerai (et je cherche par tout les moyens), à ce que mon footer ne traine pas en plein milieu de ma page, et se colle en bas, et y reste. Y'a pas moyen non plus.

Voici les codes :

CSS
Code:
.footer {
   background-color:#FFF;
   height:200px;
   width:100%;
    padding: 0;
    margin: 0;
   z-index:auto;
   vertical-align: initial;
    display: inline;
}
.facebook {
position: relative;
font-size: 20px;
height: 2em;
width: 2em;
background: #CCC;
display: block;
border-radius: 0.3em;
opacity: 0.8;
-webkit-transition: opacity 0.5s ease-in-out;/*chrome*/
-moz-transition: opacity 0.5s ease-in-out;/*mozilla*/
  transition: opacity 0.5s ease-in-out;/*autre navigateur*/
}
.facebook:hover {
opacity: 1;
}

.facebook::before {
left: 0.85em;
top: 0.7em;
position: absolute;
display: block;
content: "";
height: 0.3em;
width: 0.85em;
background: #EDEEE8;
}
.facebook::after {
left: 1.1em;
top: 0.1em;
position: absolute;
display: block;
content: "";
height: 1.5em;
width: 0.3em;
border-radius: 0.4em 0 0 0;
border: 0.3em solid #EDEEE8;
border-right: 0;
border-bottom: 0;
}
.titre {
    display:inline-block;  
   color:#f3f3f3;
   text-decoration:none;
    text-transform:uppercase;
    font-family:Arial, Helvetica, sans-serif;
   }
.texte {
   color:#f3f3f3;
   font-family:Arial, Helvetica, sans-serif;
}

HTML
Code:
<div style"footer"><table width="800" border="0" align="center">
  <tr>
    <th width="200" scope="col"><div class="titre">Récemment...</div></th>
    <th width="200" scope="col"><div class="titre">Nos Projets</div></th>
    <th width="200" scope="col"><div class="titre">A Propos</div></th>
    <th width="200" scope="col"></th>
  </tr>
  <tr>
    <td><div class="texte">Récemment il y a...</div></td>
    <td><div class="texte">Aucun projet en cours.</div></td>
    <td><div class="texte">Qui sommes nous ?<br />
    Nous contacter</div></td>
    <td><center><div class="facebook"></div></center></td>
  </tr>
</table></div>

Merci d'avance pour l'aide qui sera apportée ! :3


Dernière édition par Akya le Mer 29 Jan 2014, 16:02, édité 1 fois
MessageSujet: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptySam 25 Jan 2014, 13:48
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



[RESOLU] Problèmes de footer Empty
Serait il possible d'avoir un lien pour voir directement ?

Dans ton HTML, tu as un problème pour ta div avec la class "footer". Je pense que tu as eu une petite inattention ^^, c'est pas style"footer" mais class="footer". Après ce changement, normalement mettre une couleur de fond devrait marcher Very Happy
Code:
<div style"footer">

Pour que le footer se colle en bas, il y a pleins de manières différentes, je te conseille de chercher sur Google "sticky footer". Pour ma part en général je ne me casse pas la tête, je fais en sorte que le contenu de la page (au dessus) soit dans une div qui englobe tout, et que cette div ai une hauteur minimum (min-height) pour coller le footer en bas.
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptySam 25 Jan 2014, 15:02
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



[RESOLU] Problèmes de footer Empty
Coucou merci pour ta réponse ! :3

Pour le lien, j'aimerais que personne n'accède au site pour l'instant, mais si c'est vraiment nécessaire, je peux te l'envoyer par MP. A toi de me dire.
Que suis-je bête ! En effet, une parfaite faute d'inattention que je viens de corriger. Cependant, ça ne change en rien nos soucis… Bizarre.
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptySam 25 Jan 2014, 16:34
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



[RESOLU] Problèmes de footer Empty
Tu peux mettre le lien sous la balise hide tout simplement sinon. ^^
Par ce que je viens de tester, moi je peux bien changer la couleur de fond maintenant.

Code:
[hide]TON LIEN[/hide]
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptySam 25 Jan 2014, 18:01
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



[RESOLU] Problèmes de footer Empty
Voici :

C'est bizarre ça. :/
En tout cas pour la position du footer, dans le pire des cas c'est ce que je ferai, mais dans ce cas j'aimerai au moins supprimer avec certitude les marge entre le bas du footer et la fenêtre, de sorte à ce qu'il soit collé.
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyDim 26 Jan 2014, 05:03
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



[RESOLU] Problèmes de footer Empty
Tiens c'est marrant quand j'avais essayé ça marchait, mais là le BG fonctionne plus o_O. Pour la class footer, enlève le "display:inline" ^^ et le fond se remettra (si ça ça marche pas, alors je vois pas XD).

Citation :
supprimer avec certitude les marge entre le bas du footer et la fenêtre, de sorte à ce qu'il soit collé.
Est ce que tu pourrais me faire une screen de ces marges ? Car chez moi, le footer est simplement juste après la barre du haut.
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyDim 26 Jan 2014, 06:09
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



[RESOLU] Problèmes de footer Empty
Ok nickel ! la couleur est bien apparue. Very Happy
Alors j'ai pas compris précisément ce que tu voulais, mais voilà un screen de ce que moi, je recherche. Je pensais que
Code:
padding: 0;  margin: 0;
suffiraient, mais visiblement, non.

Screen : https://i.servimg.com/u/f55/12/03/49/16/captur11.jpg
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyDim 26 Jan 2014, 06:30
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



[RESOLU] Problèmes de footer Empty
Ok ok, le footer se place ici justement par ce qu'il n'y a pas encore de contenu dans ta page Smile
As tu regardé sur Google les différents tutoriels pour faire un "sticky footer" (il y en a en Français au cas où tu n'es pas super à l'aise en anglais) ?
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyDim 26 Jan 2014, 08:45
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



[RESOLU] Problèmes de footer Empty
Oui, j'ai trouvé ceci : http://www.cssstickyfooter.com/fr/comment-faire.html
Je viens d'essayer mais ça ne fonctionne pas… Voici ma page :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans titre</title>
<style type="text/css">
html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#basfooter {position: relative;
   margin-top: -150px; /* negative value of footer height */
   height: 150px;
   clear:both;}
   
.footer {
   background-color:#CCC;
   height:200px;
   width:100%;
    padding: 0;
    margin: 0;
   z-index:auto;
   vertical-align: initial;
}
.facebook {
position: relative;
font-size: 20px;
height: 2em;
width: 2em;
background: #CCC;
display: block;
border-radius: 0.3em;
opacity: 0.8;
-webkit-transition: opacity 0.5s ease-in-out;/*chrome*/
-moz-transition: opacity 0.5s ease-in-out;/*mozilla*/
  transition: opacity 0.5s ease-in-out;/*autre navigateur*/
}
.facebook:hover {
opacity: 1;
}

.facebook::before {
left: 0.85em;
top: 0.7em;
position: absolute;
display: block;
content: "";
height: 0.3em;
width: 0.85em;
background: #EDEEE8;
}
.facebook::after {
left: 1.1em;
top: 0.1em;
position: absolute;
display: block;
content: "";
height: 1.5em;
width: 0.3em;
border-radius: 0.4em 0 0 0;
border: 0.3em solid #EDEEE8;
border-right: 0;
border-bottom: 0;
}

.googleplus {
position: relative;
font-size: 20px;
height: 2em;
width: 2em;
background: #CCC;
display: block;
border-radius: 0.3em;
overflow: hidden;
opacity: 0.8;
-webkit-transition: opacity 0.5s ease-in-out;/*chrome*/
-moz-transition: opacity 0.5s ease-in-out;/*mozilla*/
  transition: opacity 0.5s ease-in-out;/*autre navigateur*/
}
.googleplus:hover {
opacity: 1;
}
.googleplus::before {
left: -0.1em;
font-size: 2.9em;
top: -0.36em;
position: absolute;
display: block;
content: "g";
color: #EDEEE8;
font-family: georgia;
}
.googleplus::after {
left: 0.9em;
top: -0.3em;
position: absolute;
display: block;
content: "+";
font-size: 1.25em;
font-weight: bold;
color: #EDEEE8;
font-family: georgia;
}

.titre {
    display:inline-block; 
   color:#f3f3f3;
   text-decoration:none;
    text-transform:uppercase;
    font-family:Arial, Helvetica, sans-serif;
   }
.texte {
   color:#f3f3f3;
   font-family:Arial, Helvetica, sans-serif;
}
   
</style>
</head>

<body>
<div id="wrap">

   <div id="main" class="clearfix">
<div class="footer"><table width="800" border="0" align="center">
  <tr>
    <th width="200" scope="col"><div class="titre">Récemment...</div></th>
    <th width="200" scope="col"><div class="titre">Nos Projets</div></th>
    <th width="200" scope="col"><div class="titre">A Propos</div></th>
    <th width="200" scope="col"></th>
  </tr>
  <tr>
    <td><div class="texte">Récemment il y a...</div></td>
    <td><div class="texte">Aucun projet en cours.</div></td>
    <td><div class="texte">Qui sommes nous ?<br />
    Nous contacter</div></td>
    <td><center><p><div class="facebook"></div><div class="googleplus"></div></p>
    </center></td>
  </tr>
</table></div>
   </div>

</div>

<div id="basfooter">

</div>
</body>
</html>
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyDim 26 Jan 2014, 09:51
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



[RESOLU] Problèmes de footer Empty
Attention, je pense tu as sauté quelques étapes du tutoriel ^^

J'ai corrigé ton code en suivant le tutoriel, chez moi cela fonctionne :

Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Document sans titre</title>
    <style type="text/css">
      html, body, #wrap {height: 100%; margin:0}

      body > #wrap {height: auto; min-height: 100%;}

      #main {padding-bottom: 200px;}  /* must be same height as the footer */
      
      .footer {
         background-color:#CCC;
         width:100%;
         padding: 0;
         z-index:auto;
         vertical-align: initial;
         position: relative;
         margin-top: -200px; /* negative value of footer height */
         height: 200px;
         clear:both;
      }
      .facebook {
      position: relative;
      font-size: 20px;
      height: 2em;
      width: 2em;
      background: #CCC;
      display: block;
      border-radius: 0.3em;
      opacity: 0.8;
      -webkit-transition: opacity 0.5s ease-in-out;/*chrome*/
      -moz-transition: opacity 0.5s ease-in-out;/*mozilla*/
        transition: opacity 0.5s ease-in-out;/*autre navigateur*/
      }
      .facebook:hover {
      opacity: 1;
      }

      .facebook::before {
      left: 0.85em;
      top: 0.7em;
      position: absolute;
      display: block;
      content: "";
      height: 0.3em;
      width: 0.85em;
      background: #EDEEE8;
      }
      .facebook::after {
      left: 1.1em;
      top: 0.1em;
      position: absolute;
      display: block;
      content: "";
      height: 1.5em;
      width: 0.3em;
      border-radius: 0.4em 0 0 0;
      border: 0.3em solid #EDEEE8;
      border-right: 0;
      border-bottom: 0;
      }

      .googleplus {
      position: relative;
      font-size: 20px;
      height: 2em;
      width: 2em;
      background: #CCC;
      display: block;
      border-radius: 0.3em;
      overflow: hidden;
      opacity: 0.8;
      -webkit-transition: opacity 0.5s ease-in-out;/*chrome*/
      -moz-transition: opacity 0.5s ease-in-out;/*mozilla*/
        transition: opacity 0.5s ease-in-out;/*autre navigateur*/
      }
      .googleplus:hover {
      opacity: 1;
      }
      .googleplus::before {
      left: -0.1em;
      font-size: 2.9em;
      top: -0.36em;
      position: absolute;
      display: block;
      content: "g";
      color: #EDEEE8;
      font-family: georgia;
      }
      .googleplus::after {
      left: 0.9em;
      top: -0.3em;
      position: absolute;
      display: block;
      content: "+";
      font-size: 1.25em;
      font-weight: bold;
      color: #EDEEE8;
      font-family: georgia;
      }

      .titre {
         display:inline-block;
        color:#f3f3f3;
        text-decoration:none;
         text-transform:uppercase;
         font-family:Arial, Helvetica, sans-serif;
        }
      .texte {
        color:#f3f3f3;
        font-family:Arial, Helvetica, sans-serif;
      }
     
    </style>
    </head>

    <body>
    <div id="wrap"> CONTENU DE LA PAGE
   
   <div id="main" class="clearfix"></div>
   </div>
     
    <div class="footer"><table width="800" border="0" align="center">
      <tr>
        <th width="200" scope="col"><div class="titre">Récemment...</div></th>
        <th width="200" scope="col"><div class="titre">Nos Projets</div></th>
        <th width="200" scope="col"><div class="titre">A Propos</div></th>
        <th width="200" scope="col"></th>
      </tr>
      <tr>
        <td><div class="texte">Récemment il y a...</div></td>
        <td><div class="texte">Aucun projet en cours.</div></td>
        <td><div class="texte">Qui sommes nous ?<br />
        Nous contacter</div></td>
        <td><center><p><div class="facebook"></div><div class="googleplus"></div></p>
        </center></td>
      </tr>
    </table></div>
     

   

 
    </body>
    </html>
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyDim 26 Jan 2014, 17:01
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



[RESOLU] Problèmes de footer Empty
Ah oui en effet, j'ai du louper quelque chose… Merci bien en tout cas, ça fonctionne maintenant. Smile
En revanche, j'ai encore deux micros soucis, ça devrait aller beaucoup mieux une fois ceux ci résolu.

- Depuis que j'ai mis ce système en place, avec ce tutoriel, ma page c'est allongée de quelques pixels sur la largeurs, du coup ça me créé un ascenseur horizontal, qui ne devrait pas être là. J'ignore si quand toi tu visualises la page ça le fait, mais chez moi en tout ce c'est ça qui a déclenché cet espace inexpliqué.
- Concernant le tableau même présent dans mon footer, les logos facebook et google + se mettent l'un au dessus de l'autres, au lieu d'être côte à côte… Comment gérer cela ?

Merci infiniment pour ton aide en tout cas ! Very Happy
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyLun 27 Jan 2014, 13:44
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



[RESOLU] Problèmes de footer Empty
J'ai l'impression que le problème vient du bouton "power". Essaye de commenter cette partie là dans le HTML, pour vérifier. Je crois que cela vient d'un margin-left que tu as mis à plus de 1200px, un truc comme ça.

Pour les boutons FB et Google+, dans le CSS tu leur as chacun mis "display: block", essaye en remplaçant par "display: inline-block" ^^

Dis moi si tout cela fonctionne Wink !
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyLun 27 Jan 2014, 15:24
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



[RESOLU] Problèmes de footer Empty
Waouh on peut dire que t'es franchement calée. Very Happy Ces deux soucis sont résolus sans soucis, merci bien ! J'en arrive avec un troisième. /PAS TAPEY/  [RESOLU] Problèmes de footer 1920415962 
J'espère vraiment que tu m'en voudras pas… J'suis désolée d'abuser de ta gentillesse. ^^"

J'ai pensé le site de sorte à en faire quelque chose de dynamique et facile à modifier. Par conséquent, j'ai une page concernant le header (entre autre la barre de navigation et le logo), et le footer, comme tu as pu le voir. Du coup, dans mes pages, j'inclue ces deux "pièces" sous la forme suivante :

Code:
<?php include_once("header.php") ?>

Jusque là ça fonctionne très bien. Oui, mais en regardant de plus près le code du footer, il y a bien la ligne
Code:
<div id="wrap">CONTENU DE LA PAGE
  </div>

Du coup, on tourne en rond sans rien pouvoir faire… Car mon footer est censé être un "module" à ajouter, mais qui ne doit pas recevoir. Et du coup, par conséquent, tu constateras par toi même sur le lien suivant que dès que j'intègre du contenu avec le système expliqué ci-dessus, j'ai un grand espace entre le contenu et le footer…

MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyLun 27 Jan 2014, 15:41
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



[RESOLU] Problèmes de footer Empty
Hum, j'dois être un peu fatiguée après ma journée de cours XD, tu pourrais me copier / coller ton code en mettant un commentaire là où ça pose problème pour que je comprenne mieux le problème Razz(oui, j'ai répété 2 fois le mot problème, 3 fois maintenant, je n'ai officiellement plus toute ma tête \ o /) ?

Edit : rajoute aussi le contenu des fichiers php à inclure pendant que tu es lancée sur le Copier / coller xD
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyLun 27 Jan 2014, 15:52
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



[RESOLU] Problèmes de footer Empty
Ahahah ! Y'a aucun soucis, ça se comprends. Je vais essayé de ré-expliquer tranquillement. MDR

Alors. Là, dans l'immédiat, j'ai trois pages qui m'intéressent.
header.php, footer.php et essai.php (le lien que je t'ai fournie plus haut)

Le header et le footer sont tout les deux intégrés dans les pages du site internet par le biais de :
Code:
<?php include_once("header.php") ?>
Code:
<?php include_once("footer.php") ?>

Ce qui donnerait donc pour une page parfaitement simpliste :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Le luxe pour ce félin du quotidien | KITTYPAWS.FR | Mon chat & moi</title>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.vegas.min.js"></script>
<link rel="stylesheet" type="text/css" href="/js/jquery.vegas.min.css" />
<style type="text/css">

</style>
</head>

<body bgcolor="#e9e7e6">
<?php include_once("analyticstracking.php") ?>
<?php include_once("header.php") ?>
<SCRIPT type="text/javascript">
$( function() {
  $.vegas('slideshow', {
      delay:5000,
      backgrounds:[
        { src:'/img/slide01.jpg', fade:1000 },
        { src:'/img/slide02.jpg', fade:1000 },
        { src:'/img/slide03.jpg', fade:1000 }
      ]
  })('overlay', {
      src:'/vegas/overlays/11.png'
  });
});
</SCRIPT>
<?php include_once("article.php") ?>
<?php include_once("footer.php") ?>
</body>
</html>

La partie suivante :
Code:
<?php include_once("article.php") ?>

est en fait l'espèce de fiche de présentation que tu peux voir sur le lien suivant :


Je l'ai en fait isolé dans une autre page php afin que ça soit plus simple au niveau de la gestion. (Car je prévoie de lier le tout à une base de données et donc de gérer mes futurs articles par cette base de données)

Le soucis est : A cause du code du footer, et plus précisément la partie suivante :
Code:
    <div id="wrap">CONTENU DE LA PAGE
  </div>
 

J'ai en premier lieu un grand espace qui se créé entre ma fiche et mon footer,
En deuxième lieu, cela m'oblige à gérer mon contenu via ma page footer.php, or je ne veux plus avoir à toucher à cette page, je souhaite gérer mon contenu dans des pages à part, pour la suite.

Je me doute bien que ça doit pas être simple de me déchiffrer, donc j'te souhaite bon courage. Very Happy
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyLun 27 Jan 2014, 15:58
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



[RESOLU] Problèmes de footer Empty
Ok je comprends maintenant Very Happy
En fait, le truc c'est que en fait tu devrais plutôt avoir quelque chose comme ceci :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Le luxe pour ce félin du quotidien | KITTYPAWS.FR | Mon chat & moi</title>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.vegas.min.js"></script>
<link rel="stylesheet" type="text/css" href="/js/jquery.vegas.min.css" />
<style type="text/css">

</style>
</head>

<body bgcolor="#e9e7e6">
<?php include_once("analyticstracking.php") ?>
<div id="wrap">
   <?php include_once("header.php") ?>

  <div id="main" class="clearfix">
   <?php include_once("article.php") ?>
  </div>
</div>
<?php include_once("footer.php") ?>

<script type="text/javascript">
$( function() {
  $.vegas('slideshow', {
      delay:5000,
      backgrounds:[
        { src:'/img/slide01.jpg', fade:1000 },
        { src:'/img/slide02.jpg', fade:1000 },
        { src:'/img/slide03.jpg', fade:1000 }
      ]
  })('overlay', {
      src:'/vegas/overlays/11.png'
  });
});
</script>
</body>
</html>

D'après ce que j'ai compris dans les explications, le contenu autre que le footer doit etre dans le #wrap.
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyLun 27 Jan 2014, 17:34
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



[RESOLU] Problèmes de footer Empty
Je teste ça ce soir, là je suis sur la tablette donc j'ai pas ce qu'il faut. Mais en observant le code, en effet, ça ressemblerait sans doute a quelquel chose comme cela. Et donc du coup, j'aurais plus qu'à remplacer
Code:
<?php include_once('article.php') ?>

Par la page de contenu concernée puisque ça ne sera pas toujours des articles.

Je te tiens au courant ce soir, si jamais ça fonctionne ou pas.  [RESOLU] Problèmes de footer 73120010 
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyMar 28 Jan 2014, 02:56
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



[RESOLU] Problèmes de footer Empty
Oui normalement c'est ça Very Happy
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyMar 28 Jan 2014, 04:04
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



[RESOLU] Problèmes de footer Empty
OK donc ça fonctionne bien, par contre ! J'ai du laisser le code suivant :

Code:
<div id="main" class="clearfix"></div>

car sinon ma fiche de collait avec le footer. Du coup, il faudrait que je gère la hauteur du clearfix, pour baisser un peu la hauteur. Je fais ça en css ? Ou alors, peut être que ça correspond à

Code:
clear:both;

dans ma class ".footer" ?
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyMar 28 Jan 2014, 10:54
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



[RESOLU] Problèmes de footer Empty
Akya a écrit:
OK donc ça fonctionne bien, par contre ! J'ai du laisser le code suivant :

Code:
<div id="main" class="clearfix"></div>

car sinon ma fiche de collait avec le footer.

J'ai pas compris pourquoi tu mets "j'ai du laisser". En effet, c'est normal de le laisser, cela fait parti du tuto ^^
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyMar 28 Jan 2014, 13:14
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



[RESOLU] Problèmes de footer Empty
Je voulais te faire une capture d'écran pour te montrer ce que ça faisait sans le clearfixe, mais en effet, maintenant ça fonctionne. C'est à rien y comprendre. xD
En tout cas, ce topic touche à sa fin. Je voulais juste savoir si niveau JS tu t'y connaissais bien ? J'ai un autre soucis qui concerne l'espèce de diaporama de fond que tu as certainement pu voir, donc si tu penses pouvoir m'aider j'ouvrirai un autre sujet. 3

Merci infiniment pour ton aide sur le footer en tout cas, c'est clairement appréciable, tu as de très bonnes compétences !
Et au fait Mamzelle, j'suis Cali93110 sur le FdF, et tu m'es déjà venu en aide dernièrement pour d'autres choses. ^_^ Je tenais simplement à te le dire, t'as pas du faire le rapprochement à mon avis, vu que je n'ai pas le même pseudo.

Merci encore !
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyMer 29 Jan 2014, 14:00
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



[RESOLU] Problèmes de footer Empty
Ah oui je n'avais pas fait le rapprochement Very Happy. Je ne passe plus trop sur FdF depuis 2 semaines, car j'ai un peu plus de boulot au niveau des cours ^^

Oui je suis à l'aise en JS, donc n'hésite pas à ouvrir un nouveau topic (:
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyMer 29 Jan 2014, 15:45
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



[RESOLU] Problèmes de footer Empty
Oui, c'est bien pour ça que je te l'ai mentionné. Wink
Ah nickel ! Very Happy Je fonce ouvrir le topic dans ce cas. Very Happy

Merci encore !
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer EmptyMer 29 Jan 2014, 16:02
Revenir en haut Aller en bas
Contenu sponsorisé




[RESOLU] Problèmes de footer Empty
MessageSujet: Re: [RESOLU] Problèmes de footer   [RESOLU] Problèmes de footer Empty
Revenir en haut Aller en bas
 

[RESOLU] Problèmes de footer

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

 Sujets similaires

-
» Problèmes de dimension du footer + structures des forums (tableaux)
» [résolu]Problème décalage Navigation et footer
» [Prioritaire: Spécialiste] Footer défilement, placement [résolu]
» Problème tableau de défilement des partenaires dans le footer [Résolu ^^]
» [RESOLU] Problème Divers - Qeel, slideshow infini horizontale, et navigation en footer

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 | Cookies | Forum gratuit