18041 sujets

Questions générales et questions de débutants

Tuto Design à 2 colonnes : problème de background décalé de 1px

Bonjour j'ai suivu le tuto pour faire une mise en page avec 2 colonnes en float que j'ai un peu modifié pour mes besoins. Seul probleme, j'ai mis un fond dans le body, qui se répète en y et centré. Sous FF pas de problème, c'est clean, mais sous IE il est pas centré, il ets décalé d'un pixel ou 2 et je comprend pas...

( ah et je n'arrive pas non plus à ce que les 2 colonnes en float Nav, et Content soient étirés jusqu'au footer... )

@charset "utf-8";
/* CSS Document */
html, body {
height:100%;
margin: 0;
background-color:#000000;
padding:0;
background-image:url(bg.jpg);
background-position:center;
background-repeat:repeat-y;


	}
div#global {
	min-height:100%;
	width: 800px;
	margin: 0 auto;
	position:relative;
	}
	div#header {
	height:100px;
	margin: 0 auto;
	position:relative;
	background-image:url(header.jpg);
	}
	div#header h1 {
	margin: 0;
	}
div#center {
	overflow: auto;
	padding-bottom: 50px;
	width:800px;
	height:100%;
	}
h1{
font-family:Arial, Helvetica, sans-serif;
color:#666666;
font-size:10px;
padding-left:10px;
margin:0;

}
.a1{
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-weight:bold;
font-style:normal;
font-size:20px;
text-decoration:none;
padding-left:10px;
text-align:justify;
}
.a1:hover{
font-family:Arial, Helvetica, sans-serif;
color:#00CCFF;
font-weight:bold;
font-style:normal;
font-size:20px;
text-decoration:none;
padding-left:10px;
}
	
	ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	}
	
	div#nav {
	float: left;
	width:170px;
	
	}
div#content {
	float: right;
	width: 630px;
	margin: 0 ;

	}
ul#galerie_mini
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;

}

ul#galerie_mini li
{
float:left;
margin:0;

}

ul#galerie_mini li a img
{
	margin: 2px 1px ;
	border:none;

}

dl#photo
{
	clear: both ;
	margin: 0 auto ;

}

dl#photo dt
{
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
}

dl#photo dd
{
	margin: 0 ;

}

dl#photo img
{

}
div#footer {
width:100%; 
height:50px;  
position:absolute;
bottom:0;
background-image:url(footer.jpg);
margin:0;
	}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accueil</title>
	    <link href="ks.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="gal.js"></script>
</head>
<body>
	<div id="global">
		<div id="header">
		</div>
		<div id="center">
			<div id="content">
	<ul id="galerie_mini">
		<li><a href="test.jpg" title="Titre de la photo 1"><img src="thumb.jpg"/></a></li>

		<li><a href="test2.jpg" title="Titre de la photo 2"><img src="thumb.jpg"/></a></li>
		<li><a href="test3.jpg" title="Titre de la photo 3"><img src="thumb.jpg"/></a></li>
	</ul>

	
	<dl id="photo">
		<dt>test1</dt>
		<dd><img src="test.jpg" name="big" id="big" /></dd>
	</dl>
			</div>
		  <div id="nav">
				<h1>menu</h1>
			<ul id="menu">
					<li><a class="a1" href="index.html">infos</a></li>
					<li><a class="a1" href="print.html">print</a></li>
					<li><a class="a1" href="sceno.html">scénographie</a></li>
					<li><a class="a1" href="design.html">design</a></li>
					<li><a class="a1" href="video.html">vidéo</a></li>
					<li><a class="a1" href="photo.html">photo</a></li>
                    <li><a class="a1" href="photo.html">KS.Corp</a></li>
			</ul>
		  </div>
		</div>
		<div id="footer">
			<p>Footer</p>
		</div>
</div>
</body>
</html>


merci d'avance ! Smiley smile
Modifié par kompleet (20 Sep 2008 - 12:43)
Si tu as une image de fond centrée sur BODY et un conteneur global de largeur fixe également centré, tu auras du mal à ce que ça tombe pile comme tu le souhaites au pixel près. Suivant la résolution, le navigateur et le sens du vent, ça peut bouger d'un pixel à gauche ou à droite. À toi de prévoir ton image de fond en prenant en compte ce paramètre. Smiley cligne
Sujet clos
Aller à