28172 sujets

CSS et mise en forme, CSS3

Probleme section qui deborde dans le footer

Bonjour, j'ai un probleme avec ma section et mon footer, en effet je regler mon footer avec un margin-top:95%, donc la tout va bien, mais suivant la taille de l'ecran la partie entre la section et le footer est plus ou moins grande, et du coup sur grand écran ca se chevauche, j'aimerai que le footer soit fixer en bas ( pas fixer de facon a ce que on le voit toujours, mais de facon a que quand on scroll vers le bas on le voit a la fin, mais je n'arrive pas .. ) si quelqu'un pourrait m'aider ? je vous joint un lien vers mon site.


adresse : realite-virtuelle.ovh
La solution peut se coder en modèle tabulaire ou en flexbox.

En flexbox on peut déclarer l'élément ancêtre du layout en display:flex et l'élément principal de la page en flex 1 avec un min-height à 100%, exemple avec une structure de ce type :
body
  nav
  main
  footer

Le style :
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

main {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

L'élément main prendra toute la place disponible et repoussera le footer concomitant au fond de la page.
voila mon code html et css si tu peut me dire ce qu'il faut changer exactement je voit pas trop...


html :



<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>RV</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link href="CSS/entreprise.css" rel="stylesheet"/>
<link rel="icon" type="image/jpg" href="img/logo.png" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" >
<script type="text/javascript" src="jquery-3.1.1.js"></script>

<link href="main.css" rel="stylesheet">

<script>

var link = document.createElement( "link" );
link.type = "text/css";
link.rel = "stylesheet";

var currentTime = new Date().getHours();
if (currentTime >= 8 && currentTime < 21) {
link.href = 'CSS/jour/entreprise.css';
} else {
link.href = 'CSS/nuit/entreprise.css';
}
document.getElementsByTagName( "head" )[0].appendChild( link );

</script>


</head>

<body>





<header>
<!-- Le slider qui se trouve dans le header de nos pages -->

<div class="visible-lg"> <!-- Tout les composants de cette balise div sera visible seulement en format dekstop (visible-lg) -->
<div id="slider">
<div class="slides">
<a href="page1.html">
<div class="slider">
<div class="legend"></div>
<div class="content">
<div class="content-txt">
<h1>Découverte nouvelle</h1>
<h2>Laissez vous plongé dans la découverte de nouveaux horizons.</h2>
</div>
</div>
<div class="image">
<img alt="Oculus" src="img/banniere2.png">
</div>
</div>
</a>
<a href="page2.html">
<div class="slider">
<div class="legend"></div>
<div class="content">
<div class="content-txt">
<h1>Toujours plus loin</h1>
<h2>Utilité de la réalité virtuelle ?</h2>
</div>
</div>
<div class="image">
<img alt="casque VR" src="img/banniere1.jpg">
</div>
</div>
</a>
<a href="page3.html">
<div class="slider">
<div class="legend"></div>
<div class="content">
<div class="content-txt">
<h1>Les casques de VR</h1>
<h2>Comment ca marche ? A quoi ca sert ?</h2>
</div>
</div>
<div class="image">
<img alt="Oculus Rift" src="img/banniere3.jpg">
</div>
</div>
</a>
<a href="entreprise.html">
<div class="slider">
<div class="legend"></div>
<div class="content">
<div class="content-txt">
<h1>comme si on y était</h1>
<h2>Des entreprises qui innovent chaque jour un peu plus.</h2>
</div>
</div>
<div class="image">
<img alt="Visite en VR" src="img/banniere.png">
</div>
</div>
</a>
</div>

</div>
<!-- Début de notre menu dekstop -->

<nav>
<div class="container green borderXwidth">
<ul>
<li> <a href="accueil2.html">Accueil</a> </li>


<li class="nav-item">
<a>La réalité virtuelle</a>
<ul class="nav sub-nav">
<li class="sub-nav-item"><a href="page1.html">
<h4>Qu'est-ce que c'est ?</h4></a></li>
<li class="sub-nav-item"><a href="page2.html">
<h4>Son Fonctionnement</h4></a></li>
<li class="sub-nav-item"><a href="page3.html">
<h4>Les outils d'aujourd'hui</h4></a></li>
</ul>
</li>

<li> <a href="entreprise.html">Entreprises</a></li>
<li> <a href="contact.html">Contact</a></li>
</ul>

</div>
</nav>
</div>
<!-- Menu Burger pour smartphone -->

<div class="visible-xs"> <!-- Et ici tout sera visible qu'en format smartphone -->
<nav>
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li> <a href="accueil2.html">Accueil</a></li>
<li><br/></li>
<li class="nav-item"> <a>La réalité virtuelle</a>

<li class="sub-nav-item"><a href="page1.html">
<h4>Qu'est-ce que c'est ?</h4></a></li>
<li class="sub-nav-item"><a href="page2.html">
<h4>Son Fonctionnement</h4></a></li>
<li class="sub-nav-item"><a href="page3.html">
<h4>Les outils d'aujourd'hui</h4></a></li>



<li><a href="entreprise.html">Entreprises</a></li>
<li><br/></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</div>
</header>



<h1>Présentation de deux entreprises travaillant dans le milieu de la réalité virtuelle</h1>
<section class="Entreprise1 col-md-12">
<article>
<div class="Paragraphe1 text col-md-4">
<h2>E.mage in 3D</h2>
<p>E.mage in 3D est une entreprise spécialisée dans la 3D, elle a diverse activités dans ce domaine que se soit le scan 3D, la réalité augmenté, sculpture 3D, impression 3D.
Parmi la multitude de services proposé par cette entreprise on compte la réalité virtuelle
Dans ce domaine E.mage in 3D propose la réalisation d'environnement naturel qui est la création d’un univers où l’utilisateur peut se déplacer dans des endroits réels comme sa nouvelle cuisine, ou son nouveau salon et permet de lui donner un apercu le plus réel possible de ce qu'il souhaite ou totalement inventé comme par exemple des villes, des bâtiments, des forets,... En plus de cela cette réalisation permet l’interaction avec des éléments de l’environnement comme dans les jeux vidéos.
Elle réalise aussi des vidéos immersive où le spectateur peut choisir ses angles de vue pour observer autour de lui les différents éléments ou événements, se qui fait que chaque personnes qui regarde la vidéo aura une expérience différentes car elle ne regardera pas forcément au même endroit que les autres, cette expérience plonge tout les spectateurs au cœur de l’action offrant ainsi une forte expérience cinématographique.




</p>
<a href="http://www.emagein-3d.com/" target="_blank" class="Lien1">E.mage-in 3D</a>
</div>

<div>
<!-- Liens pour integrer la google map présente sur cette page -->
<iframe class="gmaps-frame col-md-6 visible-lg" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d21243.258182189325!2d-4.570704881145392!3d48.275780088525245!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4816eaf3f6c8fa03%3A0x941ff38422a54053!2sRue+Andr%C3%A9+Antoine%2C+29570+Camaret-sur-Mer!5e0!3m2!1sfr!2sfr!4v1480720878419" width="800" height="350" style="border:0" allowfullscreen ></iframe>
</div>

</article>
</section>

<section class="Entreprise2 col-md-12">
<article>
<div class="Paragraphe1 text col-md-4">
<h2>Immersion</h2>
<p>Immersion est une entreprise qui conçoit des produits liés au numérique et au monde de la 3D, comme TREALITY® TD-series qui est un simulateurs transportable utilisé pour la formation.
De plus elle propose ces services de développement de projet et la réalisation d'outil numérique à d'autres entreprises, Immersion grâce aux maquettes numériques et prototypes virtuels peut tester de nombreuses hypothèses, décider et collaborer en temps réel, faire des simulation et bien d’autres choses.
Parmi toutes ces activités cette entreprise propose sont aide dans la réalisation et la conception d'outil ou de programme lié à la réalité virtuelle, on peut illustré ceci par le casque de réalité virtuelle HTC Vive qui est le produit issu du partenariat entre HTC et Valve.




</p>
<a href="http://www.immersion.fr/" target="_blank" class="Lien1">Immersion</a>
</div>

<div>

<iframe class="gmaps-frame2 col-md-6 visible-lg" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d346698.4652401033!2d-1.5884313764368732!3d47.24432632835354!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4805dd81125117d7%3A0xbd2fcbc0fd01016b!2s6+Rue+de+la+Grande+Ouche%2C+44690+Ch%C3%A2teau-Th%C3%A9baud!5e0!3m2!1sfr!2sfr!4v1480724820850" width="800" height="350" style="border:0" allowfullscreen></iframe>
</div>

</article>
</section>






<footer>
<!-- Dans le footer nous avons fait un lien vers toutes les pages de notre site, puis des liens vers des sites externes et les auteurs de ce site -->
<div class="container-fluid page">
<div class="row footer">
<div class="col-xs-6 hidden-xs hidden-sm col-md-3 col-lg-2" style=" border-right: 1px solid #FF0000;">
<h3 class="Liens">Naviguations</h3>
<ul class="Liens">
<li><br/></li>
<li><a href="accueil2.html" >Accueil</a> </li>
<li><br/></li>
<li><a href="page1.html">-Qu'est-ce que c'est ?</a></li>
<li><br/></li>
<li ><a href="page2.html">-Son Fonctionnement</a></li>
<li><br/></li>
<li><a href="page3.html">-Les outils d'aujourd'hui</a></li>
<li><br/></li>
<li><a href="entreprise.html">Entreprises</a> </li>
<li><br/></li>
<li><a href="contact.html">Contact</a> </li>
</ul>
</div>

<div class="col-xs-6 hidden-xs hidden-sm col-md-2 col-lg-2" style="border-right: 1px solid #FF0000">
<ul class="Liens">
<li><h3>Liens utiles</h3></li>
<li><a target="_blank" href="https://fr.wikipedia.org/wiki/R%C3%A9alit%C3%A9_virtuelle">www.wikipedia/Réalité_virtuelle</a> </li>

<li><a target="_blank" href="http://www.realite-virtuelle.com/">http://www.realite-virtuelle.com/</a> </li>

<li><a target="_blank" href="https://www.oculus.com/">Oculus.com</a> </li>

<li><br/><a target="_blank" href="https://www.vive.com/fr/">Vive.fr</a> </li>

<li><br/><a target="_blank" href="http://www.pppra.pingfiles.fr/accueil.html">Réalité augmenté</a> </li>
</ul>
</div>

<div class="col-xs-12 col xs-pull-12 col-sm-12 col-md-2 col-lg-4 shield text-center">
<img src="img/logo.png" width="150" height="100" alt="image d'accueil"><br><a href="accueil2.html">Réalité virtuelle Expérience</a><br><br>
</div>

<div class="col-xs-6 col-md-2 col-lg-2 right" style="border-left: 1px solid #FF0000;">
<h3>Outils utilisés</h3>
<ul>
<li><a href="https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3">-HTML5</a></li>
<li><br/></li>
<li><a href="https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3">-CSS3</a></li>
<li><br/></li>
<li><a href="https://openclassrooms.com/courses/apprenez-a-coder-avec-javascript">-Javascript</a></li>
</ul>
</div>

<div class="col-xs-6 col-md-3 col-lg-2 right" style="border-left: 1px solid #FF0000;">
<h3>Site internet créer par</h3>
<a href="contact.html#alexis">Alexis Rouxel</a>
<br/>
<a href="contact.html#hugo">Hugo Fauvel</a>
<br/>
<a href="contact.html#maxime">Maxime Blondel</a>

</div>
</div>
</div>


<hr style="border: 1px solid #FF0000">
<div class="row">
<div class="col-md-12 text-center">
<p style="color: #ffffff;"> &copy; Copyright 2016 | IUT de Lannion département Informatique<br/>© Oculus</p>
</div>
</div>

<!-- Icon Animation -->
<div>
<a href="#" class="circle" aria-label="Scroll back to top">
<i class="fa fa-chevron-up bounce"></i>
</a>
</div>

</footer>




</body>



</html>










css :


@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
@import url('https://fonts.googleapis.com/css?family=Anton');

body {
background : #EDEDED;
font-family: 'Josefin Sans', sans-serif;
}
p{

font-size:20px;
}
#imagecouverture {
max-width : 100%;
}
div.container {
font-family : Raleway;
margin : 0 auto;
padding : 2em 2em;
text-align : center;
}
div.container a {
color : #FFF;
text-decoration : none;
font : 20px Raleway;
margin : 0 10px;
padding : 10px 10px;
position : relative;
z-index : 0;
cursor : pointer;
}
header {
box-shadow : -1px 4px 5px 1px rgba(0, 0, 0, 0.7);
font-family : Raleway;
background-color : #7A7A7A;
}
div.borderXwidth a:before, div.borderXwidth a:after {
position : absolute;
opacity : 0;
width : 0%;
height : 2px;
content : '';
background : #FF0000;
transition : all 0.4s;
}
div.borderXwidth a:before {
left : 0;
top : 0;
}
div.borderXwidth a:after {
right : 0;
bottom : 0;
}
div.borderXwidth a:hover:before, div.borderXwidth a:hover:after {
opacity : 1;
width : 100%;
}
.flotte {
float : left;
}
h1 {
color : #000000;
font-size : 40px;
padding-top : 4%;
}
h2 {
padding-top :0px;
color : #000000;
}
article{

margin-top:20px;
}
ul {
list-style-type : none;
margin : 0;
padding : 0;
}
li {
display : inline;
}
.nav a {
width : 210px;
}
.nav a:focus, .nav a:hover {
color : black;
font-size : 18px;
}
.nav-item {
position : relative;
}
.sub-nav {
display : none;
position : absolute;
left : -10px;
top : 2em;
white-space : nowrap;
background : #7A7A7A;
margin-top : -2px;
}
.nav-item:hover .sub-nav {
display : block;
}
#trait {
border-radius : 10px;
margin-left : 0;
margin-top : 50px;
}
#image1 {
width : 90%;
}

footer {
box-shadow : -1px -3px 5px 1px rgba(0, 0, 0, 0.7);
margin-top : 95%;
padding : 30px 40px 30px 40px;
background-color : #7A7A7A;
font-family : Corbel;
font-size : 13px;
}
a {
color : #ffffff;
}
a:hover {
color : #000000;
}
.vcard {
color : #ffffff;
}
ul {
list-style-type : none;
}
img {
display : block;
margin : auto;
}
#Paragraphe2 {
margin-top : 50px;
}
#titre {
margin-top : 50px;
}


a:hover {
text-decoration: none;
}


.circle {
display: block;
width: 40px;
height: 40px;
padding-top: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
border-radius: 50px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
font-size: 14px;
color: #ff0000;
background: #fff;
line-height: 24px;
text-align: center;

}

.circle:hover {
border: 1px solid #A7A7A7;
}


.circle:hover .bounce {
color: #ff0000;
animation: bounce 1.5s infinite;
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-20px);}
60% {transform: translateY(-20px);}
}

/* Slider */
#slider{
width:100%;
height:300px;
position:relative;
overflow:hidden;
}
@keyframes load{
from{left:-100%;}
to{left:0;}
}
.slides{
width:400%;
height:100%;
position:relative;
-webkit-animation:slide 30s infinite;
-moz-animation:slide 30s infinite;
animation:slide 30s infinite;
}
.slider{
width:25%;
height:100%;
float:left;
position:relative;
z-index:1;
overflow:hidden;
}
.slide img{
width:100%;
height:100%;
}
.slide img{
width:100%;
height:100%;
}
.image{
width:100%;
height:100%;
}
.image img{
width:100%;
height:100%;
}

/* Legend */
.legend{
border:500px solid transparent;
border-left:800px solid #A7A7A7;
opacity:0.4;
border-bottom:0;
position:absolute;
bottom:0;
}

/* Contents */
.content{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
.content-txt{
width:400px;
height:150px;
float:left;
position:relative;
top:150px;
-webkit-animation:content-s 7.5s infinite;
-moz-animation:content-s 7.5s infinite;
animation:content-s 7.5s infinite;
}
.content-txt h1{
font-family:Arial;
text-transform:uppercase;
font-size:24px;
color:#fff;
text-align:left;
margin-left:30px;
padding-bottom:10px;
}
.content-txt h2{
font-family:arial;
font-weight:normal;
font-size:14px;
font-style:italic;
color:#fff;
text-align:left;
margin-left:30px;
}

/* Switch */
.switch{
width:120px;
height:10px;
position:absolute;
bottom:50px;
z-index:99;
left:30px;
}
.switch > ul{
list-style:none;
}
.switch > ul > li{
width:10px;
height:10px;
border-radius:50%;
background:#333;
float:left;
margin-right:5px;
cursor:pointer;
}
.switch ul{
overflow:hidden;
}
.on{
width:100%;
height:100%;
border-radius:50%;
background:#f39c12;
position:relative;
-webkit-animation:on 30s infinite;
-moz-animation:on 30s infinite;
animation:on 30s infinite;
}

/* Animation */

@keyframes slide{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:-100%;
}
46%{
margin-left:-100%;
}
50%{
margin-left:-200%;
}
71%{
margin-left:-200%;
}
75%{
margin-left:-300%;
}
96%{
margin-left:-300%;
}
}


@keyframes content-s{
0%{left:-420px;}
10%{left:20px;}
15%{left:0px;}
30%{left:0px;}
40%{left:0px;}
50%{left:0px;}
60%{left:0px;}
70%{left:0;}
80%{left:-420px;}
90%{left:-420px;}
100%{left:-420px;}
}













section{

margin-top:50px;
margin-bottom:-50px;

}

#trait{

border-radius:10px;
}




/* Page Entreprise*/


.Entreprise1{
margin-top: 75px;
padding-left:10px;
}
.Entreprise2{
margin-top: 150px;
padding-left:10px;
}
.gmaps-frame{
margin-top: 100px;
margin-bottom: auto;
margin-left: 150px;

}
.gmaps-frame2{
margin-top: 40px;
margin-bottom: auto;
margin-left: 150px;

}
.Paragraphe1{
text-align: center;
margin-top: -50px;
}
.Lien1{
font-size: 24px;
color:#FF0000 ;
}


h1{

text-align: center;
}




/*Menu Burger */
a
{
text-decoration: none;
color: #232323;

transition: color 0.3s ease;
}

a:hover
{
color: #FF0000;
}

#menuToggle
{
display: block;
position: relative;
top: 30px;
left: 0px;

z-index: 1;

}

#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;

cursor: pointer;

opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */


}

/*
* Just a quick hamburger
*/
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;

background: #FF0000;
border-radius: 3px;

z-index: 1;

transform-origin: 4px 0px;

transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}

#menuToggle span:first-child
{
transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}


#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}

/*
* But let's hide the middle one.
*/
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}

/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked ~ span:nth-last-child(2)
{
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}

/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu
{
text-align: center;
border-radius: 10%;
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;

background: #999499;
list-style-type: none;

/* to stop flickering of text in safari */

transform-origin: 0% 0%;
transform: translate(-100%, 0);

transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
padding: 10px 0;
font-size: 22px;
}


#menuToggle input:checked ~ ul
{
transform: scale(1.0, 1.0);
opacity: 1;
}
.nav sub-nav-smart{
display : none;
position : absolute;
left : -10px;
top : 2em;
white-space : nowrap;
background : #7A7A7A;
margin-top : -2px;
}
la j'ai placer ce que tu ma dit dans le body et ce que tu ma dit ( le main ) dans la section du coup et ca ne marche pas, le footer remontre toute en haut ( au niveau de mon header.. )
d'habitude je me serai debrouiller moi meme mais j'ai presentation demain donc faut vite que je regle ce petit probleme ...
Humm... j'ai un peu de mal avec les codes non identés.

Je vous propose une solution, à vous de l'adapter. Je peux encore vous donner le lien d'une page utilisant ce code.

Pour expliquer mon code plus haut : 'body' est donc l'élément parent concerné par display flex, 'nav', 'main' et 'footer' sont des éléments enfants direct.

Sinon, en modèle tabulaire (un peu plus compatible avec les anciens navigateurs), un article de ce site sur lequel nous sommes : Aalsacreations - Comment fixer un pied au bas de la page ?
Modifié par Olivier C (17 Jan 2017 - 15:24)
Sujet clos
Aller à