28220 sujets

CSS et mise en forme, CSS3

Voila j'ai un problème que je n'arrive pas à cerner. Je n'ai pas de marge en bas de page et j'ai essayé toutes les solutions de margin-bottom à de nombreux endroits mais rien n'y fait.

vous pouvez voir ce que ca donne ici: http://skalpl.free.fr/skapiso/

mon code html est le suivant:
<!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 le css qui va avec:
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;
		color: #fff;
	}
	
#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 40px 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 aux courageux Smiley cligne
en fait je me suis mal expliqué .

ce n'est pas la marge interne qui me chagrine, celle la j'ai réussi à la dompter Smiley biggrin mais moi je parle de l'ecart entre l'image de la balise foot et le bas du browser si vous préférez. en fait que cela fasse commen le haut de page, avec un intervale de 10px ou on voit le bleu du background koi
Modérateur
bonjour,
une petite modif / triche avec le css de ton footer et le tour est joué:
#foot{
		height: 30px;
		background: url(images/foot.gif) no-repeat #113343;
	}

C'est a ça que sert le css, c'est pour faire plus joli ... Smiley smile
a plus