Partage

Probleme de Fotter

2 janvier 2018 à 21:49:24

Salut

J'ai besoin de votre aide

Mon footer ne se positionne pas en bas dans ma page comme il de devrait l’être.

Auriez vous une idée ?

VOILA MON HTML ET LE RÉSULTAT (le footer s'est placé en bas à droite)

</footer>

		 <footer>
		 
		     <div id="Horaires">
                 <h4>Lundi au Vendredi</h4>
                 <p>6H00 - 23H00</p>
		         <h4>Samedi au Dimanche</h4>
                 <p>8H00 - 21H00</p>
             </div>
			 
			  <div id="Adresse">
                 <p>SportAddict Diderot 60-62 Boulevard Diderot, 75012 Paris</p>
				 <p>contact@sportaddict.fr</p>
                 <p>0139478077</p>
             </div>
			 
			 <div id="NousTrouver">
		     <div id="map">
 <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2625.587837606371!2d2.380019!3d48.847!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe52437187a409209!2sFitness+Park+Diderot!5e0!3m2!1sen!2sfr!4v1514751167338" 
 width="160" height="190" frameborder="0" style="border:10"></iframe>
                 </div>
             </div>
			 
		 </footer>
2 janvier 2018 à 22:00:57

Salut tu ne nous donne passer de code !

Il nous faut aussi le CSS pour t'aider car la mise en page ce fait via ce dernier..

Mais je devine que soit il y a un float:left; sur la balise juste avant soit un balise non fermer !

Problème résolu = Bouton en haut à droit + Un petit pouce en l'air sur le sujet qui ta aidé
2 janvier 2018 à 22:08:33

/* Footer */

footer
{
    display: flex;
    padding-top: 25px;
}

footer p, footer ul
{
    font-size: 0.8em;
}

footer h1
{
    font-size: 1.1em;
}

#horaires
{
	float:right;
	width: 40%;
}
#Adresse
{
	float: center;
	width:  40%;
}

#NousTrouver
{
    width: 40%;
	justify-content: space-between;
    margin-top: 0;
}
2 janvier 2018 à 23:16:46

Oki bon visiblement tu n'as pas tout compris dans mon message d'avant :

il nous faut plus que ca car ton footer doit passer à coter de la balise qu'il y a avant mais sans voir ta page completement il nous est impossible de t'aider donc :

Il nous faut pour t'aider :

Tout le HTML de la page conserner

Le CSS qui lui correspond

ou mieux :

Une page en ligne de ton site

ou alors :

poste ton code sur https://jsfiddle.net/ ou https://codepen.io/

Problème résolu = Bouton en haut à droit + Un petit pouce en l'air sur le sujet qui ta aidé
3 janvier 2018 à 0:01:55

alala les problème de footer... j'en ai tellement rencontré que si on me trouve un problème que je n'ai jamais vu j'arrête le codage :lol:

Sinon oui un peut de code stp ;)

3 janvier 2018 à 0:18:06

Bonsoir,

Il existe pourtant une solution simple : https://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible 

Prendre la dernière version (tout en bas) et voir si tu peux l'adapter avec ta structure actuelle.

-
Edité par pipelette13 3 janvier 2018 à 0:18:46

3 janvier 2018 à 10:32:46

Salut

Voila mon Html et le Css, j’espère que c'est compréhensible ;)

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css2.css" />
        <title>Accueil</title>
    </head>
	
	<style>
	
@import url('https://fonts.googleapis.com/css?family=Alice');
	
div.gallery {
    border: 1px solid #ccc;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    
}

.clearfix:after 
{
    content: "";
    display: table;
    clear: both;
}
	
[type="search"] 
{
   -webkit-appearance: textfield;
   -webkit-box-sizing: content-box;
   weight: 20%;
}
</style>
    <body>
        <div id="bloc_page">
     	   <header>
	
                <div id="titre_principal">
                <h1>SportAddict</h1>    
                 </div>
             				
			   	 <br /> 
				
				 <ul id="menu-demo2">
	                 <li><a href="accueil.html">Accueil</a>
	                 </li>
	                 <li><a href="sportaddict.html">SportAddict</a>
		         <ul>
		              	 <li><a href="#cross"></a>Cross Training</li>
			             <li><a href="#musculation"></a>Musculation</li>
			             <li><a href="#cardio"></a>Cardio Training</li>
						 <li><a href="#pilates"></a>Pilates</li>
		         </ul>
	                    </li>
					<li><a href="club.html">Le Club</a>
				 <ul>
		              	 <li><a href="#team">TeamAddict</li>
			             <li><a href="#statfit">StayFit</a></li>
			             <li><a href="#news">News</a></li>
		         </ul>
	                 </li>
	                 <li><a href="contact.html">Contact</a>
	                 </li>
                 </ul>
				 				 
				<input type="search" placeholder="Entrez un mot-clef" name="the_search">
								
            </header>
				        
            
            <div id="banniere_image">
                <div id="banniere_description">
                </div>
            </div>
            
       
             <h1>SportAddict c'est quoi</h1>
		     <p>Salut à tous j'espere que vous êtes en forme parcque je vous préviens ca va suer !!! </p>
					
			     <nav>
	         <h2>Du Sport Haut de Gamme</h2>
			    </nav>
				
			    <section>
			<p>Sport Addict c'est une salle de sport avec plus de 100 machines haut de gamme de cardio-training et de musculationlibreet guidée. 
			Un système audio vous permet de brancher un casque sur votre machine pour visionner un programme TV sur de grands écrans, 
			et vous pouvez recharger votre mobile ou tablette grâce à un port USB intégré.
			Nos coachs font rimer sport avec plaisir ! Ils vous guident sur les machines du lundi au vendredi 
			de 18h à 20h00 et vous font bouger lors des cours collectifs.</p>
				</section> 
					 
				<nav>
		     <h2>Des Tarifs Imbattables</h2>
    		    </nav>
										 
			   <section>
			<p> Un accès libre et illimité 7J/7a tout notre matériel ainsi qu’a tout les services proposés ». 
		    Seulement pour 39,95 €/ Mois <p>
			    </section>
				
				<br /> 
				<hr color= width="75%" "#f44289">
				<br /> 
				 
				<h2>Les Activités</h2>
                <h4>1, 2, 3 PARTEZ ! Entrez dans l’univers de SportAddict La visite commence par ici : </h4>

             <div class="responsive">
             <div class="gallery">
                 <a target="_blank" href="courses.jpg">
                 <img src="../test/courses.jpg" alt="CrossTraining" width="300" height="200">
                 </a>
             <div class="desc">Espace CrossTraining</div>
             </div>
             </div>

             <div class="responsive">
             <div class="gallery">
                 <a target="_blank" href="effort.jpg">
                 <img src= "../test/muscu.jpg" alt="Musculation" width="600" height="400">
             <div class="desc">Espace Musculation</div>
             </div>
             </div>

             <div class="responsive">
             <div class="gallery">
                 <a target="_blank" href="cardio.jpg">
                 <img src= "../test/gym.jpg" alt="CardioTraining" width="600" height="400">
                 </a>
             <div class="desc">Espace CardioTraining</div>
             </div>
             </div>

             <div class="responsive">
             <div class="gallery">
                 <a target="_blank" href="pilates.jpg">
                 <img src= "../test/pilates.jpg" alt="Pilates" width="600" height="400">
				 </a>
			 <div class="desc">Espace Pilates</div>
			 </div>
			 </div>


		 
		     <footer>
		 
		     <div id="Horaires">
                 <h4>Lundi au Vendredi</h4>
                 <p>6H00 - 23H00</p>
		         <h4>Samedi au Dimanche</h4>
                 <p>8H00 - 21H00</p>
				   </div>
             </div>
			 
			  <div id="Adresse">
                 <p>SportAddict Diderot 60-62 Boulevard Diderot, 75012 Paris</p>
				 <p>contact@sportaddict.fr</p>
                 <p>0139478077</p>
				   </div>
	             </div>
			 
			 <div id="NousTrouver">
		     <div id="map">
                 <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2625.587837606371!2d2.380019!3d48.847!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe52437187a409209!2sFitness+Park+Diderot!5e0!3m2!1sen!2sfr!4v1514751167338" 
                 width="160" height="190" frameborder="0" style="border:10"></iframe>
                 </div>
             </div>
			 
		     </footer>
		  
	   
      
    </body>
</html>

CSS

/* Eléments principaux de la page */

body
{
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
}

#bloc_page
{
    width: 900px;
    margin: auto;
}

#map
{
    float: center;
}

nav
{
    float: left;
    width: 150px;
    border-radius: 1px solid black;
	margin: 10px;
	padding: 10px; 
}

section
{
    margin-left: 250px;
	
}

/* Titre */

h3
{
   color: #f44289;
   text-align: center;
   font-family: 'Alice', serif;
}

h4
{
   color: black;
   text-align: center;
}

h2
{
    font-family: Dayrom, serif;
    font-weight: normal;
}
 
.flotte 
{
float: left;
margin: 50px;
}
 
.Phrase
{
    position:absolute;
    left: 18px;
    top: 31px;
    font-family: Gabriola, "Gentium Basic", Georgia;
    font-size: 20px;
    color:#FFFFFF;
}

/* Bannière */
#menu-demo2, #menu-demo2 ul
{
padding: 0;
margin:0;
list-style:none;
text-align:center;
}
#menu-demo2 li
{
	
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#menu-demo2 ul li
{
display:inherit;
border-radius:0;
}
#menu-demo2 ul li:hover
{
border-radius:0;
}
#menu-demo2 ul li:last-child
{
border-radius:0 0 8px 8px;
}
#menu-demo2 ul
{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul
{
max-height:15em;
}

/* background des liens menus */
#menu-demo2 li:first-child
{
background-color: #FFC300;
background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
}
#menu-demo2 li:nth-child(2)
{
background-color: #FF5733;
background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}
#menu-demo2 li:nth-child(3)
{
background-color: #C70039;
background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}
#menu-demo2 li:last-child
{
background-color: #900C3F;
background-image:-webkit-linear-gradient(top, #white 0%, #black 100%);
background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:white;
}
#menu-demo2 li:nth-child(2) li{
background:#333A40;
}
#menu-demo2 li:nth-child(3) li{
background:#9F391A;
}
#menu-demo2 li:last-child li{
background:#677F35;
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#900C3F  ;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:#729EBF;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#F6AD1A;
}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:#CFFF6A;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
font-family:arial;
}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
color:white;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#000;
}


section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}

/* Header */

header
{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
	font-family: Dayrom, serif;
    font-size: 1.1em;
    margin-top: 0px;
    font-weight: normal;
}	

#titre_principal
{
    display: flex;
    flex-direction: column;
}


/* Bannière */
#banniere_image
{
    margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    background: url('../test/dan.jpg') no-repeat;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}

#banniere_description
{
    position: absolute;
    bottom: 0;
    border-radius: 0px 0px 5px 5px;
    width: 99.5%;
    height: 33px;
    padding-top: 15px;
    padding-left: 4px;
    background-color: rgba(24,24,24,0.8);
    color: white;
    font-size: 0.8em;
}

.phrasescoachs
{
    text-align: center;
}

section
{
    display: flex;
    margin-bottom: 20px;
}

/* Accueil */
.edito
{
    vertical-align: middle;
    margin-right: 8px;
}

/* Formulaire */

form 
{
	background-color:#FAFAFA;
	padding:10px;
	width:900px;
}

fieldset 
{
	padding:0 20px 20px 20px;
	margin-bottom:10px;
	border:1px solid #DF3F3F;
	text-align: center;
}

label 
{
	margin-top:10px;
	display:block;
}

label.inline 
{
	 display:inline;
	margin-right:50px;
}
 
input, textarea, select, option 
{
	background-color:#FFF3F3;
}

input, textarea, select 
{
	padding:3px;
	border:1px solid #F5C5C5;
	border-radius:5px;
	width:200px;
	box-shadow:1px 1px 2px #C0C0C0 inset;
 }
select 	
{
  margin-top:10px;
}

input[type=radio] 
{
	background-color:transparent;
	border:none;
	width:10px;
}

input[type=submit], input[type=reset] 
{
	width:100px;
	margin-left:5px;
	box-shadow:1px 1px 1px #D83F3D;
	cursor:pointer;
}

input:focus, textarea:focus 
{
	background-color:white;
}

input[type=submit]:focus, input[type=reset]:focus 
{
	background-color:#FFF3F3;
}

input[type=submit]:hover, input[type=reset]:hover 
{
	background-color:#FCDEDE;
}

input[type=submit]:active, input[type=reset]:active 
{
 background-color:#FCDEDE;
 box-shadow:1px 1px 1px #D83F3D inset;
}

/* Barre Témoignage */
.Gallery 
{

    background-color: #EBEBEB;
	padding: 50px;
    margin: 50px 50px;
    border: 1px solid #ccc;
    float: right;
    width: 150px;
    height: auto;
	padding: 45px;
    text-align: center;
}

/* Evenement */
.News
{

    background-color: #EBEBEB;
	padding: 30px;
    margin: auto;
    border: 1px soliD #ccc;
    float: center;
    width: justify;
    height: auto;
	padding: 15px;
    text-align: center;
}

/* Page Contact */
.GalleryMichael
{
	background-color: #EBEBEB;
	padding: 50px;
	border: 1px solid #ddd;
    border-radius: 4px;
    padding: 25px;
    float: left;
    width:30%;
    height: auto;
    text-align: center;
}

.GallerySandra 
{

    background-color: #EBEBEB;
	padding: 50px;
	border: 1px solid #ddd;
    border-radius: 4px;
    padding: 25px;
    float: right;
    width:30%;
    height: auto;
    text-align: center;
}

.News
{

    background-color: #EBEBEB;
	padding: 30px;
    margin: auto;
    border: 1px solid #ddd;
	border-radius: 4px;
    float: center;
    width: 60%;
    height: auto;
	padding: 15px;
    text-align: center;
}

/* Footer */

footer
{
    display: flex;
    padding-bottom: 0px;
	justify-content: space-between;
	padding:0px 0px;/*Marge verticale*/
	background-color:#59719A; /*Couleur de fond*/
	text-align:center;/*texte centré*/
}

footer p, footer ul
{
    font-size: 0.9em;
}

footer h1
{
    font-size: 1.1em;
}

#horaires
{
	float:right;
	width: 40%;
}
#Adresse
{
	float: center;
	width:  40%;
}

#NousTrouver
{
    width: 40%;
	justify-content: space-between;
    margin-top: 0;
}

#map
{
    float: left;
	width: 90%;
}





3 janvier 2018 à 10:48:20

Bonjour,

La galerie avant ton footer étant en float, essaye d'ajouter la propriété clear:both sur ton footer.

-
Edité par Mewen_bzh 3 janvier 2018 à 10:48:56

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?

Probleme de Fotter

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown