28173 sujets

CSS et mise en forme, CSS3

Footer (edité)

Bonjour,
j'ai simplifié la structure de mon site mais depuis j'ai de nouveau des problèmes avec mon footer. Le cadre bleu représente le body et le cadre rouge ma div#content.
Sur IE, on pourrait croire que c'est bon mais en réalité, il manque des <p>


<body>
	<div id="menu">
	</div>
	<div id="news">
	</div>
  <div id="content">
    	
	</div>
	<div id="foot"></div>
</body>



body
{
	position: 		relative;
	background-image:	url("../design/head.gif");
	background-repeat:	no-repeat;
	margin:			0 auto;
	width: 			1005px;
	min-height: 		100%;
	height:			auto!important;               
	height:			100%;                               
	padding:			0 0 1px 0;
	border:			1px solid blue;
}
div#content
{
	position: 		             relative;
	top: 			220px;
	width: 			68%;
	margin-left:		-30%;
	left: 			50%;
	padding-bottom:		2em;
	border:			1px solid red;
}

div#foot
{
	position: 		             absolute;
	bottom:			0;
	background-image:	url("../design/foot.gif");
	background-repeat:	no-repeat;
	width: 			1004px;
	height: 			16px;
	margin-left:		-502px;
	margin-top:		-8px;
	left: 			50%;
}

Merci pour votre aide
Modifié par p_tite_jo (27 Aug 2006 - 15:43)
Salut.

Pour réaliser un site sur toute la hauteur de la fenêtre, je me sers toujours d'un conteneur supplémentaire.

Une structure qui fonctionne, dans ton cas : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="config.css" media="screen" />
		<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="config-ie.css" media="screen" /><![endif]-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	</head>
	<body>
		<div id="global">
			<div id="head">
				<h1>Diffuvins</h1>
			</div>
			<div id="menu">
				<h3>Menu de navigation</h3>
			</div>
			<div id="contenu">
				<p>Lorem ipsum blablabla</p>
			</div>
			<div id="news">
				<h3>News</h3>
			</div>
			<div id="footer">
				<p>Pied de page</p>
			</div>
		</div>
	</body>
</html>
Avec la feuille de style standard : 
html, body
{
	height: 100%;
	margin: 0;
	padding: 0;
}
#global {
	min-height: 100%;
	width: 1000px;
	margin:	0 auto;
	position: relative;
	border: 1px solid #666;
	}
#head {
	border: 1px solid #0c0;
	}
#menu {
	position: absolute;
	left: 12px;
	top: 40px;
	width: 180px;
	height: 250px;
	border: 1px solid #c00;
	}
#news {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 30%;
	height: 140px;
	}
#footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	margin-bottom: 0;
	border: 1px solid #00c;
	height: 3em;
	}
#contenu {
	padding-bottom: 3em;
	}
#head, #contenu {
	margin-left: 210px;
	}
et dans la feuille réservée à IE :
#global {
	height: 100%;
	}

Modifié par Sopo (27 Aug 2006 - 14:34)
Tcho !

J'ai essayé ta version mais j'arrive pas à "descendre" le #content... sur Internet explorer ça marche pas du tout et sur FF ça descend mais le contenu ne s'affiche plus en bas...

Voici ma css modifiée :



html, body 
{
	height:			100%;
}

html
{
	background-color:	black;
	background-image:	url("../design/main.gif");
	background-repeat:	repeat-y;
	background-position: 	center;
  font-family:		Comic Sans MS;
	font-size: 		.9em;
}

body
{
	background-image:	url("../design/head.gif");
	background-repeat:	no-repeat;    
	background-position:	top center;                    
	padding:			0 0 1px 0;
}

#global 
{
	position: 		relative;
	width: 			1005px;  
	height: 			100%;  
	min-height: 		100%;
	height: 			auto!important;      
	margin:			0 auto;
	_height: 			100%;
	border: 			1px solid blue;
}

div#menu
{
	position: 		absolute;
	background-image:	url("../design/menu.gif");
	width:			143px;
	height:			223px;
	left: 			12px;
	top:			46px;
}

div#news
{
	position:			absolute;
	width:			345px;
	height:			108px;
	top:			14px;
	left:			605px;
	border: 			1px solid red;
}

div#content
{
	margin-top:		200px;
	margin-left: 		180px;
	border:			1px solid red;
	width:			70%;
}

div#foot
{
	position: 		absolute;
	bottom:			0;
	background-image:	url("../design/foot.gif");
	background-repeat:	no-repeat;
	width: 			1004px;
	height:			16px;
	margin-left:		-502px;
	margin-top:		-8px;
	left: 			50%;
}


et la structure html
<div id="global">
	
		<div id="menu">
		</div>
		
		<div id="news">
		</div>
		
  	       <div id="content">
    	
	       </div>
	       <div id="foot"></div>
</div>

Modifié par p_tite_jo (27 Aug 2006 - 15:42)
j'avais déjà essayé mais ça marche pas sur IE et sur Firefox, le contenu n'est plus entièrement affiché... Smiley decu Voilà ce que ça donne

edit: j'ai rajouté un padding-bottom donc c'est bon pour le contenu, par contre ça marche tjs pas sur IE....
edit.2: finalement j'ai fait autrement. J'ai mis un padding top dans le global.. mais ça m'intéresserait de savoir pourquoi le margin ne marchait pas sur Internet Explorer... Smiley ohwell
Modifié par p_tite_jo (27 Aug 2006 - 16:40)
Sujet clos
Aller à