Bonjour,
Ma page regroupe 3 blocs Header, le milieu de page et mon footer.
j'ai fixed mon header. Donc j'ai relative avec un décalage de pixels mon bloc du milieu de page. Me voila avec un décalage que je n'arrive pas a faire oublier car quand je veux mettre mon footer en dessous de mon milieu de page, mon footer est recouvert, je n'arrive pas trouver un moyen pour bloquer mon milieu de page et de faire suivre mon bas de page sans sortir de mon body.
Sur Firebug je constate que mon body n'englobe pas toute ma page je ne sais pas pourquoi.
Si quelqu'un pouvait jeter un coup d’œil sur mon code. Afin de peu etre mieux organiser mon css, je pense qu'il doit y avoir une erreur avec le fixed de mon header et le relative de mon milieu de page.
Merci d'avance.
Modifié par moifrederic (29 Nov 2014 - 22:00)
Ma page regroupe 3 blocs Header, le milieu de page et mon footer.
j'ai fixed mon header. Donc j'ai relative avec un décalage de pixels mon bloc du milieu de page. Me voila avec un décalage que je n'arrive pas a faire oublier car quand je veux mettre mon footer en dessous de mon milieu de page, mon footer est recouvert, je n'arrive pas trouver un moyen pour bloquer mon milieu de page et de faire suivre mon bas de page sans sortir de mon body.
Sur Firebug je constate que mon body n'englobe pas toute ma page je ne sais pas pourquoi.
Si quelqu'un pouvait jeter un coup d’œil sur mon code. Afin de peu etre mieux organiser mon css, je pense qu'il doit y avoir une erreur avec le fixed de mon header et le relative de mon milieu de page.
Merci d'avance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="style.css"/>
<title>Site SARL Frederic</title>
</head>
<body>
<div id="header">
<a href="#"><img src="http://ardezin.com/wp-content/uploads/LogoSitewebExpress.jpg" alt="logo" title="Site Web de qualité" ></a>
<p>L'entreprise de fréderic dduvalloisé péré marché</p>
</div>
<div id="mega">
<nav>
<ul>
<li> <a href="#Accuil">Acceuil</a> </li>
<li> <a href="#News">Nouvelles</a> </li>
<li> <a href="#WhoWeAre">Qui sommes nous</a> </li>
<li> <a href="#Contact">Contact</a> </li>
</ul>
</nav>
<div id="middlePage">
<div id="id2">
<p>blalalalalallalalal</p>
</div>
<div id="id3">
<p>blalalalalallalalal</p>
</div>
</div>
</div>
<div id="footer">
<p>Copyright © 2014 Frederic SARL. All rights Reserved.</p>
</div>
</body>
</html>body {
margin: 0;
padding: 0;
background-image:url("http://img0.mxstatic.com/wallpapers/0a259fa23838670a69c22c248d192bd0_large.jpeg") ;
/*************Un arrière-plan extensible intelligent********************************/
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
background-color: red;
}
#header{
z-index: 1;
position:fixed;
margin:0px auto;
display: inline-block;
background-color: black;
width: 100%;
}
nav{
margin-left: auto;
margin-right: auto;
width: 768px;
border: 1px solid black;
}
ul {
margin-left: 150px;
list-style-type: none;
}
li{
margin: 4px;
padding: 10px;
border: 1px solid blue;
display: inline;
}
#mega{
position: relative;
top:65px;
display: block;
}
#middlePage {
margin-left: auto;
margin-right: auto;
width: 768px;
border: 1px solid red;
}
#middlePage #id2{
float:left;
width:50%;
border: 1px solid green;
}
#middlePage #id3{
margin-left:50%;
border: 1px solid yellow;
}
p{
color:red;
}
#footer{
border: 1px solid #000000;
background-color: white;
}
img{
margin: 2px 2px 2px 50px;
float: left;
height: 60px;
width: 150px;
}
#header p{
min-height: 20px;
min-width: 20px;
border: 1px solid red;
margin-left:250px;
}
#footer p{
margin-left: auto;
margin-right: auto;
width: 470px;
color: black;
font-size: 15px;
font-family: Arial;
}Modifié par moifrederic (29 Nov 2014 - 22:00)