28172 sujets

CSS et mise en forme, CSS3

Safari et Chrome gèrent les divs différement?

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

<!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&egrave;me's pictures" />
<meta name="description" lang="fr" content="Les photos d'Eph&egrave;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&egrave;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 &copy; 2010 Eph&egrave;me"><img src="pics/101.png" class="pb"></a>
	<a href="pics/002.png" rel="lightbox[pics]" title="Charlotte - Regard de feu &copy; 2010 Eph&egrave;me"><img src="pics/102.png" class="pb"></a>
	<a href="pics/004.png" rel="lightbox[pics]" title="Le manteau rouge 1/3 &copy; 2010 Eph&egrave;me"><img src="pics/104.png" class="pb"></a>
	<a href="pics/001.png" rel="lightbox[pics]" title="Cointreau sur le lac &copy; 2010 Eph&egrave;me"><img src="pics/101.png" class="pb"></a></p>
	<p><a href="pics/003.png" rel="lightbox[pics]" title="Charlotte dort 1/2 &copy; 2010 Eph&egrave;me"><img src="pics/103.png" class="pb"></a>
	<a href="pics/005.png" rel="lightbox[pics]" title="Charlotte dort (HDR) 2/2 &copy; 2010 Eph&egrave;me"><img src="pics/105.png" class="pb"></a>
	<a href="pics/006.png" rel="lightbox[pics]" title="Yuki - &Agrave; la fen&ecirc;tre &copy; 2010 Eph&egrave;me"><img src="pics/106.png" class="pb"></a>
	<a href="pics/003.png" rel="lightbox[pics]" title="Charlotte dort 1/2 &copy; 2010 Eph&egrave;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 &copy; 2010 Eph&egrave;me"><img src="pics/101.png" class="pb"></a>
	<a href="pics/002.png" rel="lightbox[pics]" title="Charlotte - Regard de feu &copy; 2010 Eph&egrave;me"><img src="pics/102.png" class="pb"></a>
	<a href="pics/004.png" rel="lightbox[pics]" title="Le manteau rouge 1/3 &copy; 2010 Eph&egrave;me"><img src="pics/104.png" class="pb"></a>
	<a href="pics/001.png" rel="lightbox[pics]" title="Cointreau sur le lac &copy; 2010 Eph&egrave;me"><img src="pics/101.png" class="pb"></a></p>
	<p><a href="pics/003.png" rel="lightbox[pics]" title="Charlotte dort 1/2 &copy; 2010 Eph&egrave;me"><img src="pics/103.png" class="pb"></a>
	<a href="pics/005.png" rel="lightbox[pics]" title="Charlotte dort (HDR) 2/2 &copy; 2010 Eph&egrave;me"><img src="pics/105.png" class="pb"></a>
	<a href="pics/006.png" rel="lightbox[pics]" title="Yuki - &Agrave; la fen&ecirc;tre &copy; 2010 Eph&egrave;me"><img src="pics/106.png" class="pb"></a>
	<a href="pics/003.png" rel="lightbox[pics]" title="Charlotte dort 1/2 &copy; 2010 Eph&egrave;me"><img src="pics/103.png" class="pb"></a></p>
    	<p><a href="pics/001.png" rel="lightbox[pics]" title="Cointreau sur le lac &copy; 2010 Eph&egrave;me"><img src="pics/101.png" class="pb"></a>

	<a href="pics/002.png" rel="lightbox[pics]" title="Charlotte - Regard de feu &copy; 2010 Eph&egrave;me"><img src="pics/102.png" class="pb"></a>
	<a href="pics/004.png" rel="lightbox[pics]" title="Le manteau rouge 1/3 &copy; 2010 Eph&egrave;me"><img src="pics/104.png" class="pb"></a>
	<a href="pics/001.png" rel="lightbox[pics]" title="Cointreau sur le lac &copy; 2010 Eph&egrave;me"><img src="pics/101.png" class="pb"></a></p>
	<p><a href="pics/003.png" rel="lightbox[pics]" title="Charlotte dort 1/2 &copy; 2010 Eph&egrave;me"><img src="pics/103.png" class="pb"></a>
	<a href="pics/005.png" rel="lightbox[pics]" title="Charlotte dort (HDR) 2/2 &copy; 2010 Eph&egrave;me"><img src="pics/105.png" class="pb"></a>
	<a href="pics/006.png" rel="lightbox[pics]" title="Yuki - &Agrave; la fen&ecirc;tre &copy; 2010 Eph&egrave;me"><img src="pics/106.png" class="pb"></a>
	<a href="pics/003.png" rel="lightbox[pics]" title="Charlotte dort 1/2 &copy; 2010 Eph&egrave;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 &copy; 2010 Eph&egrave;me &amp; Charlotte Pernin<br />Safari, Firefox, Chrome 1024*968 &amp; +
 </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)
Le liens vers ton site n'aboutis pas.

Et sinon j'ai du mal à saisir l'agencement de ton CSS, ça vient d'une galerie photo toute faite ?
Modifié par epheo (10 Feb 2010 - 14:23)
epheo a écrit :
Le liens vers ton site n'aboutis pas.

Et sinon j'ai du mal à saisir l'agencement de ton CSS, ça vient d'une galerie photo toute faite ?


J'ai corrigé le lien, maintenant ça fonctionne. Pour le CSS, je ne suis pas certain de comprendre ce que tu veux dire pour l'agencement? Mais ce n'est pas une page préfaite Smiley murf .
Sujet clos
Aller à