Bonjour à tous,
Je viens vers vous après plusieurs recherches.
Je pense avoir un rendu plutôt correct pour tous les navigateurs, mais je tombe sur un hic.
Sur une résolution en 1024 mon site n'est pas centré, à cause de mes images background.
Physiquement dans mon CSS mon site fait plus de 1024px, mais le contenu lui fait moins.
Je souhaiterais donc qu'en 1024 mon site (le background) soit rogner de chaque côté, pour au final centrer le contenu qui lui peut être afficher dans sa totalité.
Je me suis peut être mal pris dans la découpe, mais je ne voudrais pas avoir une seule et même image en background tout simplement pour une question d'esthétisme et de chargement de la page.
J'espère que j'ai réussi à me faire comprendre ^^.
Merci de votre aide.
Modifié par Steeve (04 Mar 2011 - 15:48)
Je viens vers vous après plusieurs recherches.
Je pense avoir un rendu plutôt correct pour tous les navigateurs, mais je tombe sur un hic.
Sur une résolution en 1024 mon site n'est pas centré, à cause de mes images background.
Physiquement dans mon CSS mon site fait plus de 1024px, mais le contenu lui fait moins.
Je souhaiterais donc qu'en 1024 mon site (le background) soit rogner de chaque côté, pour au final centrer le contenu qui lui peut être afficher dans sa totalité.
Je me suis peut être mal pris dans la découpe, mais je ne voudrais pas avoir une seule et même image en background tout simplement pour une question d'esthétisme et de chargement de la page.
body { background-image:url(../IMG/fond-degrade.jpg); background-repeat:repeat-x; background-color:#ededee; margin:auto;}
* { margin:0; padding:0;}
/* DESIGN */
.header { background-image:url(../IMG/header.jpg); height:141px; width:1148px; margin:auto; overflow:hidden;}
.contenu { background-image:url(../IMG/contenu.jpg); background-repeat:no-repeat; height:398px; width:1148px; margin:auto; overflow:hidden;}
.footer { background-image:url(../IMG/footer.jpg); background-repeat:no-repeat; height:207px; width:1148px; overflow:hidden; margin:auto; text-align:center; font-size:13px; padding-top:4px;color:#999;}
<body>
<div class="header">
<div class="nav">
<p>
<span class="btnACCUEIL"><a href="index.html"></a></span>
</p>
<p>
<span class="btnSERVICES"><img style="float:left;" src="IMG/btn-services-on.jpg" alt="services"/></span>
</p>
<p>
<span class="btnCONTACT"><a href="contact.php"></a></span>
</p>
</div>
</div>
<div class="contenu">
<div class="texte">
<h5>SERVICES</h5>
<p>LOREM IPSUM</p>
</div>
<div class="galerie">
<h5>GALERIE</h5>
<p>
<a href="IMG/galerie/image1.jpg" rel="lightbox[galerie]"><img id="un" src="IMG/galerie/mini1.jpg" /></a><a href="IMG/galerie/image2.jpg" rel="lightbox[galerie]"><img id="un" src="IMG/galerie/mini2.jpg" /></a><a href="IMG/galerie/image3.jpg" rel="lightbox[galerie]"><img id="un" src="IMG/galerie/mini3.jpg" /></a>
<a href="IMG/galerie/image4.jpg" rel="lightbox[galerie]"><img id="deux" src="IMG/galerie/mini4.jpg" /></a><a href="IMG/galerie/image5.jpg" rel="lightbox[galerie]"><img id="deux" src="IMG/galerie/mini5.jpg" /></a><a href="IMG/galerie/image6.jpg" rel="lightbox[galerie]"><img id="deux" src="IMG/galerie/mini6.jpg" /></a>
<a href="IMG/galerie/image7.jpg" rel="lightbox[galerie]"><img id="trois" src="IMG/galerie/mini7.jpg" /></a><a href="IMG/galerie/image8.jpg" rel="lightbox[galerie]"><img id="trois" src="IMG/galerie/mini8.jpg" /></a><a href="IMG/galerie/image9.jpg" rel="lightbox[galerie]"><img id="trois" src="IMG/galerie/mini9.jpg" /></a>
</p>
</div>
</div>
<div class="footer">Site test - <a href="#">Lien du bas</a></div>
</body>
J'espère que j'ai réussi à me faire comprendre ^^.
Merci de votre aide.
Modifié par Steeve (04 Mar 2011 - 15:48)
).