Je dévellope un site pour m'amuser avec materializecss est je souhaiterais que le footer sois en bas de la page le problème c'est que les seul solution que j'ai trouver disait de mettre la position a absolute sauf que vus que j'ai des écriture sur le footer bas les ecriture ne reste pas dans le footer et en plus le footer n'est pas tous en bas
<footer class="card-panel blue-grey darken-3">
<div class="container footer-container">
<div class="row">
<div class="col s12 col m12 col l4">
<b>Localisation</b>
<p>France</p>
<p>Haute-Loire(43)</p>
</div>
<div class="col s12 col m12 col l4">
<b>Réseaux sociaux</b>
</div>
<div class="col s12 col m12 col l4">
<b>A propos du site</b>
<p>J'ai programmer ce site de A-Z le design viens du thème StanleyWP de wordpress</p>
</div>
</div>
</div>
</footer>
Tu n'as pas lu l'article en entier, la méthode avec position: absolute est uniquement dedans à titre historique. Lis jusqu'au bout, et utilise la dernière méthode, la plus récente.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
j'ai enlever ce que j'avais mis j'ai mis le display table-row j'ai essayer de mixer les deux méthode mais ça ne fonctionne pas j'ai lus tous l'article est j'ai rien vus d'autre
Pas besoin de mixer tu choisis une méthode et tu la suis. Ici, le mieux c'est "La méthode moderne améliorée (IE 10+)". (table-row, c'est compatible IE8+, à moins que tu aies ça chez tes utilisateur⋅trice⋅s, nul besoin de bidouiller)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
C'est un site que j'ai découper en plusieurs morceau il sera donc plus facile pour moi de vous le faire télécharger le footer est dans include et le style.css dans css
J'ai utilisé mon serveur local pour voir ton code, je me permet donc de mettre le code généré ici :
l'HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/style.css" media="screen, projection">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8">
<title>Maxime Mazet</title>
</head>
<body>
<nav role="navigation" class=" card-panel blue darken-2 navbar">
<div class="container navbar-container">
<div class="row">
<a class="col s12 col m12 col l6" href="index.php"><b href="index.php" class="title">Maxime Mazet</b></a>
<li class="col s12 col m12 col l2"><a href="work.php">Mes projets</a></li><li class="col s12 col m12 col l2"><a href="about.php">A propos</a></li><li class="col s12 col m12 col l2"><a href="contact.php">Contact</a></li> </div>
</div>
</nav><div class=" card-panel blue lighten-5">
<div class="container presentation-container">
<div class="row">
<center><img class="img-present" src="img/moi.png" alt="moi"></center>
<div class="title-present center-align"><p><b>Bonjour, Je suis Maxime</b></p></div>
<div class="body-present-perso center-align"><p>Bonjour, Je suis Maxime Mazet un jeune programmeur altiligérien de 18ans. Pasionné d'informatique et de programmation j'en fait depuis mes 11ans</p></div><br>
<div class="body-present-perso center-align"><p>Je suis programmeur en C++ spécialisé dans les jeux vidéo avec le framework SFML</p></div>
</div>
</div>
</div>
<footer class="card-panel blue-grey darken-3">
<div class="container footer-container">
<div class="row">
<div class="col s12 col m12 col l4">
<b>Localisation</b>
<p>France</p>
<p>Haute-Loire(43)</p>
</div>
<div class="col s12 col m12 col l4">
<b>Réseaux sociaux</b>
</div>
<div class="col s12 col m12 col l4">
<b>A propos du site</b>
<p>J'ai programmé ce site de A à Z. Le design viens du thème <a class="stanley" href="http://justfreethemes.com/demo?theme=StanleyWP">StanleyWP</a> du CMS Wordpress</p>
</div>
</div>
</div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
Si vous voulez utiliser son code pensez a prendre le cdn de materialize css^^
Sinon le probleme viens du fait que tu as mis uniquement l'élément footer en flex, type colonne, et l'enfant de celui-ci, footer-container en column 1. Donc oui pour les contraintes que tu lui as défini il est bien dispositionné et si l'écran est large, vue le peu de contenu dans la div au dessus, il colle donc la div.
Pour y remedier, j'aurais mis le body en flex type colonne, et j'aurais mis la div avec le contenu .card-panel en flex:1 pour une colonne. Et enfin pour que le footer se colle en bas, un petit min-height: 100vh sur le body afin qu'il prenne minimum toute la taille de la fenetre ce qui donne :
Si seulement je savais faire et d'où ça vien je ne demanderais le code est fourni j'ai essayer plusieurs chose qu'on ma dit et que j'ai vus avant de demander et rien ne marche
C'est pourquoi on a besoin de voir ton html (pas ton php) et ton css.
Mais en attendant, je t'assure que le code fourni par le tuto fonctionne très bien, le voici tel quel : https://codepen.io/anon/pen/zzNwzV
Et je ne peux que t'encourager à appliquer le conseil du dernier point de l'article pour bien suivre un tutoriel :
si vous avez du mal, essayez plutôt d’intégrer votre code à un exemple qui fonctionne, plutôt que d’intégrer l’exemple à votre code existant.
Part de l'exemple fonctionnel, puis ajoute petit à petit ton code à toi.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
css faire que le footer sois en bas de la page
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !