IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Créer un footer bas d'écran


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Octobre 2009
    Messages
    506
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Octobre 2009
    Messages : 506
    Par défaut Créer un footer bas d'écran
    Bonjour,

    Vous trouverez ci-dessous un exemple de page HTML avec un "footer"

    Le truc est que j'aimerais que le "footer" soit toujours en bas d'écran, j'y arrive " un peu "... mais lorsque je réduit mon écran en hauteur, le bas de page "footer", monte, ce qui est logique, mais passe au-dessus des URL (contenu de la page), si je réduit de trop la hauteur...

    Ce que j'aimerais, c'est que le "footer", soit toujours en bas de page/d'écran, mais se limite quand même un contenu du dessus.

    J'espère être assez clair :-)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Fichiers/Documents</title>
    <style type="text/css">
    body {
            background-color: #FFFFFF;
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
    }
    body,td,th {
            color: #FFFFFF;
            font-weight: normal;
            text-align: center;
    }
    a:link {
            color: #081555;
            text-decoration: none;
    }
    a:visited {
            color: #060F25;
            text-decoration: none;
    }
    a:hover {
            text-decoration: underline;
    }
    a:active {
            text-decoration: none;
            color: #FFFFFF;
    }
    </style>
    </head>
    <body>
      <table width="100%" border="0" cellspacing="0">
        <tbody>
          <tr>
            <td height="50" bgcolor="#444444"><strong style="font-size: 36px;">FICHIERS / DOCUMENTS UTILS</strong></td>
          </tr>
        </tbody>
      </table>
      <p>&nbsp;</p>
      <p style="color: #FF4700; font-weight: bold;">NE PEUT &Ecirc;TRE UTILIS&Eacute;/MODIFI&Eacute; QU'AVEC L'ACCORD DU CLUB</p>
      <p style="color: #FF4700; font-weight: bold;">&nbsp;</p>
      <p style="color: #444444"><a href="Logo.png" target="_blank">URL </a>01</p>
      <p style="color: #444444"><a href="Logo.png" target="_blank">URL </a>02  </p>
      <p><span style="color: #444444">~</span></p>
      <p style="color: #444444"><a href="Logo.png" target="_blank">URL </a>03</p>
    <p style="color: #444444"><a href="Logo.png" target="_blank">URL </a>04 </p>
      <p><span style="color: #444444">~</span></p>
      <p style="color: #444444"><a href="Logo.png" target="_blank">URL </a>05</p>
      <p style="color: #444444">&nbsp;</p>
      <p>etc?<a href="Compte bar.pdf" target="_blank"><span style="color: #444444"><a href="Logo.png" target="_blank">Etc........</a></p>
      <p>&nbsp;</p>
    <table width="100%" border="0" cellspacing="0">
        <tbody>
          <tr>
            <td height="35" bgcolor="#444444">Version 2025 - Copyright(c) 2025 - <a href="https://www.cigale.be/" target="_blank" style="color: #FFFFFF">www.cigale.be</a></td>
          </tr>
        </tbody>
      </table>
    </body>
    </html>
    Et si possible, sans abuser une 2ème version qui bloquerait aussi le "header" au -dessus de l'écran...

    Merci d'avance pour vos lumières :-)

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 212
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 212
    Par défaut
    Bonjour,
    regarde du côté de la mise en page avec l'utilisation des grilles CSS, display:grid.

    Ressource

Discussions similaires

  1. Position Footer bas de page et chevauchement éléments
    Par sky88 dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 06/06/2020, 20h12
  2. Un footer qui reste en bas ?
    Par sperron dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 15/11/2007, 10h25
  3. footer vraiment en bas
    Par php_de_travers dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 15/11/2006, 16h38
  4. [CSS] Séparer le footer vers bas...
    Par S~C dans le forum Mise en page CSS
    Réponses: 18
    Dernier message: 12/05/2006, 04h56
  5. Footer devra être toujours en bas...
    Par SangKou dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 20/12/2005, 05h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo