supprimer marge en bas de page par me_moi - page 1

me_moi

26 février 2016 à 12:54:32

Bonjour,

j'ai une marge entre le footer et le bas de page que j'aimerais supprimer. J'ai essayé avec

{margin-bottom: 0;} et

{padding-bottom: 0;} et aussi avec

{position: absolute; bottom: 0;}

ça ne marche pas. Quelqu'un a une idée ?

beeg

26 février 2016 à 13:06:29

Avec le code de toute ta page ça serait plus facile

( Le top serait un lien vers la page si ce n'est pas en local )

XxpowaxX

26 février 2016 à 13:18:45

body
{
     margin: 0px;
}

Essaie ca

Sinon en effet il faudrait le code de ta page..

-
Edité par XxpowaxX 26 février 2016 à 13:19:05

Si débugger est l'art de corriger les bugs, alors programmer est l'art d'en créer.

me_moi

26 février 2016 à 13:53:42

Ma page html :

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="description" content="" />
		<meta name="author" content="" />
		<link rel="icon" href="../../favicon.ico" />
		
		<!-- Bootstrap core CSS -->
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
		<!-- SmartMenus jQuery Bootstrap Addon CSS -->
		<link href="../addons/bootstrap/jquery.smartmenus.bootstrap.css" rel="stylesheet">
		
		<title>Starter Template for Bootstrap</title>
		<link href="page_accueil.css" rel="stylesheet" />
	</head>
	
	<body>
	
		<!-- Navbar static top -->
		<header id="en_tete" class="navbar navbar-static-top">
			
			<nav>
				<a class="navbar-brand" href="page_accueil.php">
					<h1 class="hidden-xs">FindMyZivug</h1>
					<h1 class="visible-xs">FMZ</h1>
				</a>
			</nav>
			<div class="container-fluid" role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle col-xs-pull-2" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<nav class="navbar-collapse collapse">
					<div>
						<!-- Left nav -->
						<ul class="nav navbar-nav col-sm-push-3 col-md-push-3 col-lg-push-3 col-lg-4">
							<li><a href="page_accueil.php">Accueil</a></li>
							<li><a href="accueil.php">F.A.Q</a></li>
							<li><a href="accueil.php">Réussite</a></li>
							<li><a href="accueil.php">Contact</a></li>
						</ul>
					</div>
				</nav>
			</div><!--/.container -->
			<nav class="btn-group col-xs-push-10" id="change_langue">
				<button class="btn" id="bouton_langue">
					<a href="page_accueil.php" id="francais" class="hidden-xs">Français</a>
					<a href="page_accueil.php" id="francais_mobile" class="visible-xs">FR</a>
				</button>
				<button class="btn dropdown-toggle" data-toggle="dropdown" id="bouton_fleche"> 
					<span class="caret"></span> 
				</button>
				<ul class="dropdown-menu">
					<li><a href="langues.php?changer_langue=Choisir%20une%20autre%20langue" id="choix_langue">Choisir une autre langue</a></li>
				</ul>
			</nav>
		</header>
		
		
		<script>$('#bouton_fleche').mouseover(function(){
    $(this).dropdown('toggle');
});</script>		
		<section id="presentation_site">
			<img src="images/image_fond.jpg" alt="Image de fond" id="image_fond" />
			<p id="photos_site">
				<a href="images/photo_site_1.jpg">
					<img src="images/photo_site_1_miniature.jpg" alt="Photo du site" title="Photo du site" class="col-xs-6 col-xs-push-3" id="photo_site" />
				</a>
			</p>
		</section>
		
		<script src="page_accueil.js"></script>
		
		<!-- Navbar static top -->
		<footer id="pied_page" class="navbar navbar-static-bottom visible-md visible-lg">
			
			<nav>
				<a class="navbar-brand" href="page_accueil.php">
					<h1>FindMyZivug</h1>
				</a>
			</nav>
			<div class="container-fluid" role="navigation">
				<div class="navbar-header">
				</div>
				<nav class="navbar-collapse collapse">
					<div>
						<!-- Left nav -->
						<ul class="nav navbar-nav col-md-push-3 col-lg-push-3 col-lg-4">
							<li><a href="page_accueil.php">Accueil</a></li>
							<li><a href="accueil.php">F.A.Q</a></li>
							<li><a href="accueil.php">Réussite</a></li>
							<li><a href="accueil.php">Contact</a></li>
						</ul>
					</div>
				</nav>
			</div><!--/.container -->
		</footer>			
		<!-- Bootstrap core JavaScript
		================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
		<!-- SmartMenus jQuery plugin -->
		<script type="text/javascript" src="../jquery.smartmenus.js"></script>
		<!-- SmartMenus jQuery Bootstrap Addon -->
		<script type="text/javascript" src="../addons/bootstrap/jquery.smartmenus.bootstrap.js"></script>
	</body>
</html>

et ma page css

// barre_navigation.css
.navbar
{
    background-color: #a74140;
}

.navbar-brand, .navbar-nav li a
{
    color: #ffffff;
}

.navbar-brand:hover
{
    color: #000000;
}

.navbar-brand h1
{
    font-size: 1em;
    margin: 0;
}

.navbar-brand p
{
    font-size: 0.7em;
}

.navbar-nav
{
    margin: 0 -15px 0 -15px;
    padding: 0 0 0 0; /* supprime les marges internes dans les petites résolutions */
}

.navbar-nav li a
{
    text-align: center;
}

.navbar-nav li a:hover, .navbar-nav li a:focus
{
    color: #a74140;
    background-color: #ffffff;
}

@media all and (min-width: 768px)
{
    .navbar-brand
	{
        padding-top: 5px;
    }
}




// pied_page.css
#pied_page
{
    border-top: #000000 2px solid;
	border-radius: 0;
}

Frogweb

26 février 2016 à 13:57:46

Salut,

si j'ai bien compris tu cherche avoir le footer toujours en bas quelque soit la hauteur du contenu.

Si c'est ça, les solutions sont ici :

https://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible/

-
Edité par Frogweb 26 février 2016 à 13:57:56

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

me_moi

26 février 2016 à 15:14:03

J'ai essayé les solutions et il y a toujours une marge en bas de page. ça ne marche pas.

Frogweb

26 février 2016 à 15:29:26

edit...

-
Edité par Frogweb 26 février 2016 à 15:29:44

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

me_moi

26 février 2016 à 15:35:41

Djokx

26 février 2016 à 15:45:06

Salut,

Alors il faut faire attention avec les marges de tes éléments (surtout ceux du footer), elles peuvent être à l'origine de cette marge. (Je ne sais pas si tu nous as donné l'intégralité de ton code ici).

N'hésite pas non plus à mettre un box-sizing: border-box; , ça évite souvent de grosses prises de tête.

me_moi

26 février 2016 à 15:58:28

J'ai revu mon code css, ce n'est pas dû aux marges de mes éléments. J'utilise également bootstrap. j'ai essayé box-sizing: border-box;, ça ne donne rien. Quelqu'un a une idée ?

Djokx

26 février 2016 à 17:53:51

Si jamais tu as un serveur sur lequel tu peux héberger tes pages,ce sera plus facile pour nous de t'aider je pense.

me_moi

27 février 2016 à 21:31:46

Je n'en ai pas. J'en cherche un qui soit gratuit et qui ne m'engage pas. Une sorte de bac à sable.

GuillaumeBo1

28 février 2016 à 13:05:38

alwaysdata, Hostinger, 2freehosting et j'en passe pour ma part j'utilise alwaysdata.

Sinon voici la correction de ton code

jamais de commentaire comme ceci

// pied_page.css

ça ne fonctionnera pas et peut te créer des erreurs mais plutôt

/* pied_page.css*/

ensuite c'est tout bête ton footer à pour class navbar et dans ton css tu as

.navbar {
     margin-bottom: 20px;
}

Ce css ce trouve dans le fichier navbar.less en ligne 15

en gros tu as deux possibilité, soit modifier le fichier navbar.less, soit mettre du css dans ta balise comme ceci

 <footer id="pied_page" class="navbar navbar-static-bottom visible-md visible-lg" style="margin-bottom:0;">

-
Edité par GuillaumeBo1 28 février 2016 à 13:14:08

Un homme azerty en vaut deux.

me_moi

28 février 2016 à 14:14:57

Dans mon fichier navabr.less, il n y a pas du tout

.navbar
{
     margin-bottom: 20px;
}

Et mettre le css directement la balise ne fait rien.

GuillaumeBo1

28 février 2016 à 14:29:43

Comme tu peux voir d'apres le code que tu as fourni l'on peut voir sur le site de couleur jaune pisse(c'est mozilla qui choisit la couleur) représente le margin qui est appliqué.

Sur la fenêtre qui se trouve au centre nommé "inspecteur" je t'ai entouré sur la droite en rouge le code qui pose problème en vert la ligne problématique et en bleu le nom du fichier ainsi que le ligne problématique.

-
Edité par GuillaumeBo1 28 février 2016 à 14:30:50

Un homme azerty en vaut deux.

me_moi

28 février 2016 à 14:57:37

J'ai essayé avec navabr.less en remplaçant

  margin-bottom: @navbar-margin-bottom;

par

margin-bottom: 0;

ça ne marche pas non plus.

GuillaumeBo1

28 février 2016 à 15:14:52

alors en dur dans le HTML en rajoutant à ton footer style="margin-bottom:0;"

Un homme azerty en vaut deux.

me_moi

28 février 2016 à 16:57:22

j'ai déjà essayé, ça ne marche pas non plus !

GuillaumeBo1

28 février 2016 à 17:05:42

tu n'as pas hébergé ton site ?

Un homme azerty en vaut deux.

me_moi

28 février 2016 à 17:12:39

https://shidduch-grophies.c9users.io/page_accueil.php

GuillaumeBo1

28 février 2016 à 17:43:57

pour moi ça marche sur IE, Google et Chrome.

<footer style="margin-bottom:0;" id="pied_page" class="navbar navbar-static-bottom visible-md visible-lg">

Un homme azerty en vaut deux.

me_moi

21 mars 2016 à 14:21:46

J'ai trouvé la solution à mon problème, je poste donc le code au cas où quelqu'un d'autre serait dans la même situation.

#pied_page
{
    border-top: #000000 2px solid;
	border-radius: 0;
	margin-bottom: 0;
}

footer .navbar-brand p
{
	margin-bottom: 0; /* Supprime la marge inférieure du bas de page */
}

Mon problème venait du fait qu'en lg (puisque j'utilise bootstrap), il y a une phrase en plus, et c'est cette phrase qui créait cette marge. j'ai donc utilisé cette phrase (ou plutôt sa classe, donc .navbar-brand p) pour la supprimer.

me_moi

22 mars 2016 à 19:27:02

Finalement, mon problème n'est toujours pas résolu. La solution proposée sur la page :

https://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible/

ne marche pas.

J'aimerais que même s'il n y a aucun contenu dans la page , ça soit quand même collé au bas de la page, et pas seulement au bas de la fenêtre. Donc, si la page est très rempli et qu'il y a une barre de défilement sur le côté, ça reste aussi collé au bas de la page et pas seulement au bas de la fenêtre juste tant qu'on est dans le haut de la page. Mais je ne veux pas non plus que ça reste collé sans arrêt au bas de la fenêtre et que ça soit toujours visible comme c'est le cas avec navbar-fixed-bottom, parce que ça n'est pas très élégant

supprimer marge en bas de page

Supprimer

Modérer

Signaler le message aux modérateurs