J'ai partiellement réglé mon problème. L'image de fond avait 800px de large (intérieur) et le div contenu par dessus à la même largeur (800px). J'ai résolu mon problème en modifiant la distance intérieur à 798px de l'image. Mais pour résoudre avec le code, j'ai toujours pas trouvé.
------------------------------------------------------------
Bonjour,
Je réécris le code de mon site et j'ai un problème avec Safari et Chrome. J'ai une marge qui se créer à droite quand l'on joue avec la taille de la fenêtre du navigateur. 1px ce n'est pas immense, mais suffisant pour gâcher l'effet visuel du design. L'erreur se créer aussi dans le div "tete" qui affiche l'image du haut et le menu. Quelqu'un a une idée?
le site: ici
le code:
index.html
ephoto.css
Modifié par Epheme (10 Feb 2010 - 17:58)
------------------------------------------------------------
Bonjour,
Je réécris le code de mon site et j'ai un problème avec Safari et Chrome. J'ai une marge qui se créer à droite quand l'on joue avec la taille de la fenêtre du navigateur. 1px ce n'est pas immense, mais suffisant pour gâcher l'effet visuel du design. L'erreur se créer aussi dans le div "tete" qui affiche l'image du haut et le menu. Quelqu'un a une idée?
le site: ici
le code:
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Photographe, photographie, photograph, photography, photo, picture" />
<meta name="description" lang="en" content="Ephème's pictures" />
<meta name="description" lang="fr" content="Les photos d'Ephème." />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/ephoto.css" type="text/css" />
<title>Ephème / Photographe</title>
</head>
<body id="bm">
<div id="back1">
<div id="m1">
<div id="tete">
<h1 class="tic">Ephème / Photographe</h1>
<ul id="menu">
<li><img src="m/01.png" class="m0 imgroll m/11.png"></li>
<li><img src="m/00.png" class="m0"></li>
<li><img src="m/02.png" class="m0 imgroll m/12.png"></li>
<li><img src="m/00.png" class="m0"></li>
<li><img src="m/03.png" class="m0 imgroll m/13.png"></li>
<li><img src="m/00.png" class="m0"></li>
<li><img src="m/04.png" class="m0 imgroll m/14.png"></li>
<li><img src="m/00.png" class="m0"></li>
<li><img src="m/05.png" class="m0 imgroll m/15.png"></li>
</ul>
</div><!-- Fin tete -->
<div id="crp">
<h2 class="t2">Portrait</h2>
<p><a href="pics/001.png" rel="lightbox[pics]" title="Cointreau sur le lac © 2010 Ephème"><img src="pics/101.png" class="pb"></a>
<a href="pics/002.png" rel="lightbox[pics]" title="Charlotte - Regard de feu © 2010 Ephème"><img src="pics/102.png" class="pb"></a>
<a href="pics/004.png" rel="lightbox[pics]" title="Le manteau rouge 1/3 © 2010 Ephème"><img src="pics/104.png" class="pb"></a>
<a href="pics/001.png" rel="lightbox[pics]" title="Cointreau sur le lac © 2010 Ephème"><img src="pics/101.png" class="pb"></a></p>
<p><a href="pics/003.png" rel="lightbox[pics]" title="Charlotte dort 1/2 © 2010 Ephème"><img src="pics/103.png" class="pb"></a>
<a href="pics/005.png" rel="lightbox[pics]" title="Charlotte dort (HDR) 2/2 © 2010 Ephème"><img src="pics/105.png" class="pb"></a>
<a href="pics/006.png" rel="lightbox[pics]" title="Yuki - À la fenêtre © 2010 Ephème"><img src="pics/106.png" class="pb"></a>
<a href="pics/003.png" rel="lightbox[pics]" title="Charlotte dort 1/2 © 2010 Ephème"><img src="pics/103.png" class="pb"></a></p>
<!-- EXTRA -->
<p><a href="pics/001.png" rel="lightbox[pics]" title="Cointreau sur le lac © 2010 Ephème"><img src="pics/101.png" class="pb"></a>
<a href="pics/002.png" rel="lightbox[pics]" title="Charlotte - Regard de feu © 2010 Ephème"><img src="pics/102.png" class="pb"></a>
<a href="pics/004.png" rel="lightbox[pics]" title="Le manteau rouge 1/3 © 2010 Ephème"><img src="pics/104.png" class="pb"></a>
<a href="pics/001.png" rel="lightbox[pics]" title="Cointreau sur le lac © 2010 Ephème"><img src="pics/101.png" class="pb"></a></p>
<p><a href="pics/003.png" rel="lightbox[pics]" title="Charlotte dort 1/2 © 2010 Ephème"><img src="pics/103.png" class="pb"></a>
<a href="pics/005.png" rel="lightbox[pics]" title="Charlotte dort (HDR) 2/2 © 2010 Ephème"><img src="pics/105.png" class="pb"></a>
<a href="pics/006.png" rel="lightbox[pics]" title="Yuki - À la fenêtre © 2010 Ephème"><img src="pics/106.png" class="pb"></a>
<a href="pics/003.png" rel="lightbox[pics]" title="Charlotte dort 1/2 © 2010 Ephème"><img src="pics/103.png" class="pb"></a></p>
<p><a href="pics/001.png" rel="lightbox[pics]" title="Cointreau sur le lac © 2010 Ephème"><img src="pics/101.png" class="pb"></a>
<a href="pics/002.png" rel="lightbox[pics]" title="Charlotte - Regard de feu © 2010 Ephème"><img src="pics/102.png" class="pb"></a>
<a href="pics/004.png" rel="lightbox[pics]" title="Le manteau rouge 1/3 © 2010 Ephème"><img src="pics/104.png" class="pb"></a>
<a href="pics/001.png" rel="lightbox[pics]" title="Cointreau sur le lac © 2010 Ephème"><img src="pics/101.png" class="pb"></a></p>
<p><a href="pics/003.png" rel="lightbox[pics]" title="Charlotte dort 1/2 © 2010 Ephème"><img src="pics/103.png" class="pb"></a>
<a href="pics/005.png" rel="lightbox[pics]" title="Charlotte dort (HDR) 2/2 © 2010 Ephème"><img src="pics/105.png" class="pb"></a>
<a href="pics/006.png" rel="lightbox[pics]" title="Yuki - À la fenêtre © 2010 Ephème"><img src="pics/106.png" class="pb"></a>
<a href="pics/003.png" rel="lightbox[pics]" title="Charlotte dort 1/2 © 2010 Ephème"><img src="pics/103.png" class="pb"></a></p>
</div><!-- fin corps -->
</div><!-- fin m1 -->
<div id="pied">
<img src="img/bas.png" border="0"/>
<div id="piedc">
Copyrights © 2010 Ephème & Charlotte Pernin<br />Safari, Firefox, Chrome 1024*968 & +
</div><!-- fin contenur pied -->
</div><!-- fin pied -->
</div><!-- fin back -->
<script type="text/javascript" src="js/rollover.js"></script>
</body>
</html>ephoto.css
@charset "UTF-8";
/* CSS reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0px;
padding:0px;
border:0px;
outline:0px;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body{
line-height:1;
}
ul{
list-style: none;
}
/* background et main */
#bm{
background-image:url(../img/bgx.png);
background-position:top;
background-repeat:repeat-x;
background-attachment:fixed;
background-color:#999999;
}
#back1{
background-image:url(../img/bgy.png);
background-position:top;
background-repeat:repeat-y;
}
#m1{
background-color:#333333;
margin:0 auto;
width:800px;
}
/* tete et menu */
#tete{
background-image:url(../img/top.png);
background-repeat:no-repeat;
width:800px;
height:130px;
overflow:hidden;
}
.tic{
position:fixed;
top:-30px;
}
#menu li{
display:inline;
margin:0px;
padding:0px;
position:relative;
left:392px;
top:99px;
}
.m0{
border:0px;
}
/* corps */
#crp{
clear:both;
overflow:hidden;
position:relative;
top:15px;
text-align:center;
}
.pb{
padding:10px;
}
.t2{
text-align:left;
text-indent:65px;
text-shadow:0px 0px 5px #fff;
font-family:arial;
color:#fff;
}
/* pied */
#pied{
margin:0px auto;
width:800px;
background-color:#333;
}
#piedc{
background-color:#000;
margin:0 auto;
padding:5px;
text-align:center;
font-family:arial;
font-size:10px;
color:#999;
}
Modifié par Epheme (10 Feb 2010 - 17:58)
.