28220 sujets

CSS et mise en forme, CSS3

bonjour comme d'ahb je viens cers vous avec une nouvelle énigme, j'avoue ne pas comprendre pourquoi ca fait ca mais j'ai un écart différent a gauche de mon menu en gris, selon que je sois sous explorer ou firefox.

http://skalpl.free.fr/skapiso/

le code de ma page est celui-ci:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
	<title>Skapiso beta 1.0</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Language" content="fr" />
	<meta name="keywords" content="" />
	<meta name="description" content=""/>

	<link rel="stylesheet" type="text/css" href="./style.css" />
</head>

<div id="conteneur">

	<div id="head"></div>

	<div id="logo"></div>
	
	<div id="menu">
	<ul>
	<li><a href="#" id="lien1">Home</a></li>
	<li><a href="#" id="lien2">Tutos</a></li>
	<li><a href="#" id="lien3">Blog</a></li>
	<li><a href="#" id="lien4">CV</a></li>
	<li><a href="#" id="lien5">Home</a></li>
	</ul>
	</div>

	<div id="gauche">
	<div id="head_gauche"></div>
	
	<div id="texte_gauche">
	<br/>dfdfdf 
	<br/>dfdfdf 
	<br/>dfdfdf 
	<br/>dfdfdf 
	<br/>dfdfdf 
	<br/>dfdfdf 
	<br/>dfdfdf 
	<br/>dfdfdf 
	<br/>dfdfdf 
	<br/>dfdfdf 
	<br/>dfdfdf 
	<br/>dfdfdf 
	<br/>dfdfdf 
	<br/>dfdfdf 
	<br/>dfdfdf 
	</div>
	
	<div id="foot_gauche"></div>
	
	</div>
	<div id="contenu">
	
	<h1>Après 1up, IGN et Gamespot font du</h1>
	
	<p>Après 1up, IGN et Gamespot font du publi-rédactionnel pour Ritual et son SiN Episodes, aperçu au CES. Si vous avez déjà vu la vidéo d'avant-hier (Gamespot propose aussi une vidéo similaire en direct-feed), les articles ne servent qu'à explique le fonctionnement du système de régulation de la difficulté mis en place.

En gros, les ennemis s'adaptent à la manière dont vous jouez : si vous faites plein de headshots ils se mettront à porter des casques. Logique, non ? Mais on voit mal l'inverse se produire finalement : une fois qu'ils seront protégés à la tête, vous serez contraints de leur tirer dans le bide. Vont-ils alors retirer leurs équipements pour prendre un gilet en kevlar ?

A en croire les explications d'IGN, oui : si le jeu repère que vous ne faites pas assez de frags à l'aide de bidons explosifs, les soldats ennemis auront tendeance à se regrouper en masse autour d'eux pour encourager le joueur à s'en servir. Oui, c'est complètement débile. Ritual est d'ailleurs très fier de ce système et se vante qu'il faille la même durée à un newbie et à un progamer de la CPL pour torcher leur jeu.
» Il y a l'image associée à cette news

Après 1up, IGN et Gamespot font du publi-rédactionnel pour Ritual et son SiN Episodes, aperçu au CES. Si vous avez déjà vu la vidéo d'avant-hier (Gamespot propose aussi une vidéo similaire en direct-feed), les articles ne servent qu'à explique le fonctionnement du système de régulation de la difficulté mis en place.

En gros, les ennemis s'adaptent à la manière dont vous jouez : si vous faites plein de headshots ils se mettront à porter des casques. Logique, non ? Mais on voit mal l'inverse se produire finalement : une fois qu'ils seront protégés à la tête, vous serez contraints de leur tirer dans le bide. Vont-ils alors retirer leurs équipements pour prendre un gilet en kevlar ?

A en croire les explications d'IGN, oui : si le jeu repère que vous ne faites pas assez de frags à l'aide de bidons explosifs, les soldats ennemis auront tendeance à se regrouper en masse autour d'eux pour encourager le joueur à s'en servir. Oui, c'est complètement débile. Ritual est d'ailleurs très fier de ce système et se vante qu'il faille la même durée à un newbie et à un progamer de la CPL pour torcher leur jeu.
» Il y a l'image associée à cette news
	</p></div>
	
	<div id="foot"></div>
	
</div>

<body>


</body>

</html>


et voici ma feuille de style:
body{
		margin:  0;
		padding: 0;
		font: 0.8em Verdana, Geneva, Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
		background: #113343;
	}
	
html>body #conteneur{
		height: auto;
		min-height: 350px;
		}
	
#conteneur{
		position: absolute;
		width: 770px;
		left: 50%;
		margin-left: -385px;
		height: 100%;
		margin-top: 10px;
		text-align: left;
		background: #fff;
		padding: 0;
	}
	
#head{
		height: 20px;
		background: url(images/head.gif);
	}
	
#foot{
		height: 20px;
		background: url(images/foot.gif);
	}
	
#logo{
		width: 350px;
		height: 71px;
		background: url(images/logo.gif); 
		margin-left:20px;
	}

#menu{
		width: 740px;
		height: 25px;
		margin: 20px 15px 20px 15px;		
	}
	
#menu ul{
		height: 25px;
		margin: 0;
		padding: 0;
		background: url(images/menu.jpg) repeat 0 25px;
		list-style-type: none;
	}
	
#menu li{
		float: left;
		text-align: center;
	}
	
#menu li a{
		width: 100px;
		line-height: 25px;
		font-size: 1.3em;
		letter-spacing: 2px;
		color: #113343;
		display: block;
		text-decoration: none;
		border-right: 1px solid #fff;
	}
	
#menu li a:hover{
		background: url(images/menu.jpg) repeat 0 0;
	}
	
#menu li a#lien1:hover{
		background: url(images/menu.jpg) repeat 0 0;
	}
	
#menu li a#lien2:hover{
		background: url(images/menu.jpg) repeat -101px 0;
	}
	
#menu li a#lien3:hover{
		background: url(images/menu.jpg) repeat -202px 0;
	}
	
#menu li a#lien4:hover{
		background: url(images/menu.jpg) repeat -303px 0;
	}
	
#menu li a#lien5:hover{
		background: url(images/menu.jpg) repeat -404px 0;
	}
	
#gauche{
position: absolute;
		width: 180px;
		height: auto;
		left: 15px;
		top:170px;
		margin: 0;
		padding: 0;
	}	
	
#head_gauche{
		margin: 0;
		width: 180px;
		height: 18px;
		background: url(images/head_menu.gif); 
	}
	
#foot_gauche{
		margin: 0;
		width: 180px;
		height: 18px;
		background: url(images/foot_menu.gif); 
	}
	
#texte_gauche{
		margin: 0;
		padding: 0 5px 0 5px;
		background:#eee;
	}
	
#contenu{
	text-align: justify;
	margin: 30px 15px 10px 210px;
	}

#contenu p{
		padding: 0;
		margin: 0;
	}

h1{
		text-align: right;
		margin: 0 0px 10px 0;
		font-size: 1.3em;
		color: #DEBD84;
	}



Merci d'avance les balaises
Modifié par Sk4pis0 (11 Jan 2006 - 12:56)
Je ne peux pas t'aider mais je peux te dire que je trouve ca très dificile de mettre une page en "float" identique entre explorer et firefox... il faut souvent utiliser des "hack" a cause du model box.

Qu'en pensez vous!?
OK pour ce problème c'est résolu mais la j'ai un autre soucis, je veux avoir une marge en bas de page de 10px. mais meme qd je fou un margin-bottom: 10px dans plusieurs endroits, je ne vois aucun changement...
Modifié par Sk4pis0 (11 Jan 2006 - 12:55)