Bonjour,
Je vous explique mon problème. Ma page fait une hauteur totale de 1075px, tout étant en positionnement absolu. Le header est sur fond gris (image), le contenu de la page en lui meme n'a pas de couleur et le footer est gris. Je souhaite que mon background reprenne ce gris en haut et en bas et entre les 2 une rayure jaune/blanche (qui se verra entre les différentes div de ma page). J'ai donc crée sur illustrator une image de 1075px de hauteur et peu large, reprennant les dimensions exactes des zones grises, et de la rayure.
Une fois intégrée avec un repeat-x, mon image de fond est décalée de quelques pixels par rapport aux différentes zones de la page.
J'arrive à résoudre ce décalage en modifiant la taille de mon body à 1057px au lieu de 1075px, mais cela me crée une bande blanche en bas de page et je présume que ce n'est pas la bonne façon de faire...
Pouvez vous m'aider car je ne comprends vraiment pas d'ou ce décalage peut venir car je suis sur de l'exactitude de mon fichier background.
Merci beaucoup,
<head>
<meta charset="UTF-8">
<title>Lemonaid | Marketing</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
color: #000;
height: 1075px;
font-family: Antipasto, Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-image: url(images/fond.jpg);
background-repeat: repeat-x;
background-size: contain;
}
/* ~~ ce conteneur à largeur fixe entoure tous les autres éléments ~~ */
.container {
width: 1024px; /* la valeur automatique sur les côtés, associée à la largeur, permet de centrer la mise en page */
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#apDiv1 {
width: 1024px;
margin left: 0px;
height: 200px;
position: absolute;
top: 0px;
left: auto;
}
#apDiv2 {
-moz-box-shadow: 1px 1px 12px #CCC;
-webkit-box-shadow: 1px 1px 12px #CCC;
box-shadow: 1px 1px 12px #CCC;
border-radius: 15px;
left: auto;
top: 215px;
width: 1024px;
height: 120px;
margin: auto;
position: absolute;
background-color: #FFF;
}
h1 {
font-family: Antipasto;
float:left;
font-size: 40px;
font-style: normal;
color: #333;
font-weight: lighter;
margin: auto;
margin-left: 12px;
position: absolute;
top: 0px;
left: auto;
}
h2 {
font-family: Antipasto;
font-size: 65px;
font-weight: lighter;
color: #FF0;
position: absolute;
margin: auto;
left: 340px;
top: 24px;
}
#apDiv3 {
font-family:Antipasto;
font-weight: lighter;
-moz-box-shadow: 1px 1px 12px #CCC;
-webkit-box-shadow: 1px 1px 12px #CCC;
box-shadow: 1px 1px 12px #CCC;
padding:10px;
border-radius: 15px;
position: absolute;
left: auto;
top: 350px;
width: 580px;
height: 560px;
z-index:1;
background-color: #FFF;
float: left;
}
h3 {
font-family: Antipasto;
font-size: 20px;
font-weight: 100;
color:#FF0;
margin: auto;
margin-top: 10px;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #FF6;
border-bottom-color: #FF6;
border-top-width: medium;
border-bottom-width: medium;
background-color:#E6E6E6;
text-align: justify;
padding: 10px;
}
p {
font-family: Antipasto;
font-size: 18px;
text-align: justify;
font-weight: lighter;
word-spacing: 2pt;
}
#apDiv4 {
-moz-box-shadow: 1px 1px 12px #CCC;
-webkit-box-shadow: 1px 1px 12px #CCC;
box-shadow: 1px 1px 12px #CCC;
border-radius: 15px;
position:absolute;
left: auto;
margin-left: 615px;
top: 350px;
width: 404px;
height: 580px;
z-index: 2;
background-color: #FFF;
overflow: hidden;
}
#apDiv6 {
position: absolute;
width: 1024px;
height: 130px;
top: 945px;
left: auto;
z-index: 3;
margin: auto;
clear: both;
}
li {
font-family: Antipasto;
font-size: 18px;
display: list-item;
list-style-image: url(puce.jpg);
}
-->
</style></head>
<body>
<div class="container">
<div class="content">
<div id="apDiv1"><img src="images/header_lemonaid.jpg" width="1024" height="200" alt="header"></div>
<div id="apDiv2">
<h1> <font color="#666666">Marketing</font></h1>
<h2> <font color="#FFFF00">(</font><font color="#7AA636">re</font><font color="#FFFF00">)</font><font color="#999999">définissez l'</font><font color="#7AA636">essentiel</font></h2></div>
<div id="apDiv3">
<h3> <font color=black>
De l’étude de votre entreprise et de son environnement à la mise en place d’une stratégie adéquate, notre équipe vous aide à déterminer les éléments clés de votre réussite.
</h3>
<p> </p>
<p>Nos domaines d’expertises :</p>
<li>Diagnostic : audit (points forts / points faibles), analyse concurrence, opportunités de marché, </li><br>
<li>Etudes : de marché, de lancement de produit, de clientèle …</li><br>
<li>Positionnement : segmentation, ciblage, différenciation de l’offre,
</li><br>
<li>Mix marketing : stratégie de prix, de produit, de distribution, de communication. </li>
</div>
<div id="apDiv4"><img src="CITRONNIER ENTIER.jpg" width="458" height="494"></div>
<div id="apDiv6"><img src="images/footer_lemonaid.jpg" width="1024" height="130" alt="footer"></div>
<p><!-- end .content --></p>
</div>
<!-- end .container --></div>
</body>
</html>
Je vous explique mon problème. Ma page fait une hauteur totale de 1075px, tout étant en positionnement absolu. Le header est sur fond gris (image), le contenu de la page en lui meme n'a pas de couleur et le footer est gris. Je souhaite que mon background reprenne ce gris en haut et en bas et entre les 2 une rayure jaune/blanche (qui se verra entre les différentes div de ma page). J'ai donc crée sur illustrator une image de 1075px de hauteur et peu large, reprennant les dimensions exactes des zones grises, et de la rayure.
Une fois intégrée avec un repeat-x, mon image de fond est décalée de quelques pixels par rapport aux différentes zones de la page.
J'arrive à résoudre ce décalage en modifiant la taille de mon body à 1057px au lieu de 1075px, mais cela me crée une bande blanche en bas de page et je présume que ce n'est pas la bonne façon de faire...
Pouvez vous m'aider car je ne comprends vraiment pas d'ou ce décalage peut venir car je suis sur de l'exactitude de mon fichier background.
Merci beaucoup,
<head>
<meta charset="UTF-8">
<title>Lemonaid | Marketing</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
color: #000;
height: 1075px;
font-family: Antipasto, Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-image: url(images/fond.jpg);
background-repeat: repeat-x;
background-size: contain;
}
/* ~~ ce conteneur à largeur fixe entoure tous les autres éléments ~~ */
.container {
width: 1024px; /* la valeur automatique sur les côtés, associée à la largeur, permet de centrer la mise en page */
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#apDiv1 {
width: 1024px;
margin left: 0px;
height: 200px;
position: absolute;
top: 0px;
left: auto;
}
#apDiv2 {
-moz-box-shadow: 1px 1px 12px #CCC;
-webkit-box-shadow: 1px 1px 12px #CCC;
box-shadow: 1px 1px 12px #CCC;
border-radius: 15px;
left: auto;
top: 215px;
width: 1024px;
height: 120px;
margin: auto;
position: absolute;
background-color: #FFF;
}
h1 {
font-family: Antipasto;
float:left;
font-size: 40px;
font-style: normal;
color: #333;
font-weight: lighter;
margin: auto;
margin-left: 12px;
position: absolute;
top: 0px;
left: auto;
}
h2 {
font-family: Antipasto;
font-size: 65px;
font-weight: lighter;
color: #FF0;
position: absolute;
margin: auto;
left: 340px;
top: 24px;
}
#apDiv3 {
font-family:Antipasto;
font-weight: lighter;
-moz-box-shadow: 1px 1px 12px #CCC;
-webkit-box-shadow: 1px 1px 12px #CCC;
box-shadow: 1px 1px 12px #CCC;
padding:10px;
border-radius: 15px;
position: absolute;
left: auto;
top: 350px;
width: 580px;
height: 560px;
z-index:1;
background-color: #FFF;
float: left;
}
h3 {
font-family: Antipasto;
font-size: 20px;
font-weight: 100;
color:#FF0;
margin: auto;
margin-top: 10px;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #FF6;
border-bottom-color: #FF6;
border-top-width: medium;
border-bottom-width: medium;
background-color:#E6E6E6;
text-align: justify;
padding: 10px;
}
p {
font-family: Antipasto;
font-size: 18px;
text-align: justify;
font-weight: lighter;
word-spacing: 2pt;
}
#apDiv4 {
-moz-box-shadow: 1px 1px 12px #CCC;
-webkit-box-shadow: 1px 1px 12px #CCC;
box-shadow: 1px 1px 12px #CCC;
border-radius: 15px;
position:absolute;
left: auto;
margin-left: 615px;
top: 350px;
width: 404px;
height: 580px;
z-index: 2;
background-color: #FFF;
overflow: hidden;
}
#apDiv6 {
position: absolute;
width: 1024px;
height: 130px;
top: 945px;
left: auto;
z-index: 3;
margin: auto;
clear: both;
}
li {
font-family: Antipasto;
font-size: 18px;
display: list-item;
list-style-image: url(puce.jpg);
}
-->
</style></head>
<body>
<div class="container">
<div class="content">
<div id="apDiv1"><img src="images/header_lemonaid.jpg" width="1024" height="200" alt="header"></div>
<div id="apDiv2">
<h1> <font color="#666666">Marketing</font></h1>
<h2> <font color="#FFFF00">(</font><font color="#7AA636">re</font><font color="#FFFF00">)</font><font color="#999999">définissez l'</font><font color="#7AA636">essentiel</font></h2></div>
<div id="apDiv3">
<h3> <font color=black>
De l’étude de votre entreprise et de son environnement à la mise en place d’une stratégie adéquate, notre équipe vous aide à déterminer les éléments clés de votre réussite.
</h3>
<p> </p>
<p>Nos domaines d’expertises :</p>
<li>Diagnostic : audit (points forts / points faibles), analyse concurrence, opportunités de marché, </li><br>
<li>Etudes : de marché, de lancement de produit, de clientèle …</li><br>
<li>Positionnement : segmentation, ciblage, différenciation de l’offre,
</li><br>
<li>Mix marketing : stratégie de prix, de produit, de distribution, de communication. </li>
</div>
<div id="apDiv4"><img src="CITRONNIER ENTIER.jpg" width="458" height="494"></div>
<div id="apDiv6"><img src="images/footer_lemonaid.jpg" width="1024" height="130" alt="footer"></div>
<p><!-- end .content --></p>
</div>
<!-- end .container --></div>
</body>
</html>