Bonjour à tous, j'aimerai qu'on m'éclaire sur un problème que je n'arrive pas à résoudre : j'ai créé un site Web tout bête, 5 ou 6 pages en XHTML Strict, avec un fichier CSS et quelques images et je me rends compte d'un détail. Lorsque je suis sur ma page d'accueil, où une image est affichée, le body est décalé vers la gauche de quelques pixels, ce qui est visuellement gênant.
Donc j'ai vérifié mes pages, XHTML et CSS valides, commenter pas à pas toute ma feuille de style, pour finalement me rendre compte que la source du problème est l'image placée sur la page d'accueil. Lorsque que j'enlève l'image, toutes les pages sont alignées.
Quelqu'un sait comment remédier à ce problème ?
Code XHTML de index.html
CSS :
Donc j'ai vérifié mes pages, XHTML et CSS valides, commenter pas à pas toute ma feuille de style, pour finalement me rendre compte que la source du problème est l'image placée sur la page d'accueil. Lorsque que j'enlève l'image, toutes les pages sont alignées.
Quelqu'un sait comment remédier à ce problème ?
Code XHTML de index.html
<!--
index.html
Copyright 2008 Stéphane <steph@steph-desktop>
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
MA 02110-1301, USA.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>GLAM'Esthetic</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.13" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="header">Bienvenue sur le site de GLAM'Esthetic</div>
<div id="page">
<div id="menu">
<ul>
<li><a href="index.html">News</a></li>
<li><a href="bio.html">Bio</a></li>
<li><a href="galerie.html">Galerie</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="liens.html">Liens</a></li>
</ul>
</div> <!-- fin du menu -->
<div id="content">
<h3><b>Bienvenue sur le site de GLAM'</b></h3><br />
<p><b>Entrez dans le monde d'une performeuse aux gants noirs, une artiste dont les supports d'expression sont des corps humains vivants, et dont les pinceaux sont des aiguilles...</b></p><br />
<img alt="Yoshka" src="style/img/yoshka.jpg" width="225" height="148" />
<p> La prochaine peformance actuellement prévue se déroulera en plein air à Castelnau le Lez, le 25 jullet 2008, durant le concert du groupe I WIsh (rock metal electro) pour la finale des tremplins Castel'Rock. Un stand piercing sera installé pendant la soirée.</p>
<br /><p>D'ici là, ce nouveau site vous permettra d'explorer l'univers de Glam'Performing.</p>
<p>Nous sommes toujours à la recherche de nouveaux modèles pour mes performances, n'hésitez pas à nous contacter.</p>
</div> <!-- fin du contenu -->
</div> <!-- fin de la page -->
<div id="footer"><a href="index.html">Retour au site</a></div>
</body>
</html>
CSS :
* {
margin:0;
padding:0;
}
body {
color:white;
background:black url("img/rose.png") repeat;
width:770px;
margin:0 auto;
}
div#header {
margin-top:5%;
text-indent:-150%;
height:300px;
background:url("img/header.png") no-repeat top center;
}
div#page {
margin:0 auto;
width:748px;
border:1px white solid;
border-top:none;
border-bottom:none;
}
div#menu {
background:black url("img/menu.png") no-repeat top left;
height:105px;
position:relative;
}
div#menu ul {
position:absolute;
top:25px;
left:150px;
text-align:center;
padding-bottom:3px;
border-bottom:3px solid #5F0000;
}
div#menu li {
vertical-align:bottom;
list-style:none;
display:inline;
padding:0 10px;
}
div#menu a {
text-transform:uppercase;
font-family:sans-serif;
font-weight:bold;
font-size:0.9em;
color:white;
text-decoration:none;
}
div#menu a:hover {
background:url("img/hover.png") repeat-x center;
}
div#content {
background:black url("img/lacet.png") repeat-y top left;
font-size:1.2em;
font-family:monospace;
text-align:center;
padding:0px 30px 40px 60px;
}
div#footer {
background:black url("img/footer.png") no-repeat top center;
text-align:center;
height:250px;
}
div#footer a {
text-decoration:none;
color:white;
font-size:0.8em;
font-weight:bold;
font-family:sans-serif;
}
