5568 sujets

Sémantique web et HTML

Positionnement footer absolute ou relatif ff ie7 ie6

Bonjour a tous,

Alors voici mon problème http://www.peau-rouge.fr/binary_juice/ :

en gros je veux que ce .....BIP.... de footer reste en bas de ma page et qui si mon contenu dépasse la hauteur de ma page qu'il se place en dessous , le tout sous ff ie7 ie6 en XHTML Strict 1.0...
Un grand merci à celui qui me donnera la solution magique, bon je suppose que ce sujet a déjà été posté alors pas de "demande a ton meilleur ami GOOGLE" Smiley smile


HTML :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BINARY JUICE :: Présentation</title>
<link href="css/styles_layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript/mootools.js"></script>
<script type="text/javascript" src="javascript/menu.js"></script>
</head>
<body>
	
<div id="header">
	<div id="menu">

		<ul id="kwicks">
			<li><a id="kwick_red" class="kwick download" href="presentation.php"></a></li>
			<li><a id="kwick_orange" class="kwick documentation" href="realisations.php"></a></li>
			<li><a id="kwick_yellow" class="kwick blog" href="competences.php"></a></li>
			<li><a id="kwick_green" class="kwick trac" href="contacts.php"></a></li>
		</ul>
	</div>
</div>		
<div id="content">

	<div id="content_titre"><img src="images/titre_binary.jpg" alt="Binary Juice" width="213" height="31" /></div>
	
	<div id="content_text">
		<p>Et est admodum mirum videre plebem innumeram mentibus ardore quodam  infuso cum dimicationum curulium eventu pendentem. haec similiaque  memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad  textum.</p>
		<p>Et est admodum mirum videre plebem innumeram mentibus ardore quodam  infuso cum dimicationum curulium eventu pendentem. haec similiaque  memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad  textum.</p>
		<p>Et est admodum mirum videre plebem innumeram mentibus ardore quodam  infuso cum dimicationum curulium eventu pendentem. haec similiaque  memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad  textum.</p>
		<p>Et est admodum mirum videre plebem innumeram mentibus ardore quodam  infuso cum dimicationum curulium eventu pendentem.<br />
										<br />

										<img src="images/puce.gif" alt="puce" width="9" height="8" /><span class="commentaire">Derni&egrave;re r&eacute;alisation</span><br />
		</p>
		</div>
	
	<div id="maquette"><img src="images/maquette02.jpg" alt="maquette 01" /></div>
	
	<div id="content_commentaire">
					<p>Et est admodum mirum videre plebem innumeram mentibus ardore quodam  infuso cum dimicationum curulium eventu pendentem.</p>
					<p class="commentaire_text">&nbsp;</p>

	</div>
	
</div>

<div id="footer">
	<div id="footer_text">
		<p class="footer_text">All Content Copyright Binary Juice / Wojciech Pawlak &amp; Cl&eacute;ment Divry 2008</p>
	</div>
</div>

</body>
</html>


CSS:




html, body {
	background-color: #e6e7e4;
	height:100%;
	min-height:800px;
	width:100%;
	margin:0;
	padding:0;
}

p{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#4a4a4a;
	text-align:justify;
	margin:0;
	padding:0;
}

#header{
	position:absolute;
	background-image:url(../images/bg_header.jpg);
	background-repeat:repeat-x;
	width:100%;
	height:100px;
	z-index:1;
}

	#menu{
		position:absolute;
		left:40px;
		height:95px;
		z-index:2;
	}
		#kwicks {
			position:absolute;
			display:block;
			width:508px;
			background-image:url(../images/bg_ul.jpg);
			background-repeat:repeat-x;
			margin:0;
			padding:0;
			
		}
		
			#kwicks li {
				list-style-type: none;
				display:block;
				float:left
			} 
			
			#kwicks .kwick {
				list-style-type: none;
				float:left;
				display:block;
				width:126px;
				height:95px;
			}
			 
			#kwick_red {
				background-image:url(../images/bt_presentation.jpg);
				background-repeat:no-repeat;
			}
			#kwick_orange {
				background-image:url(../images/bt_realisations.jpg);
				background-color:#CC6633;
			}
			#kwick_yellow {
				background-image:url(../images/bt_competences.jpg);
				background-color:#9933CC;
			}
			#kwick_green {
				background-image:url(../images/bt_contacts.jpg);
				background-color:#FF6666;
			}


#content{
	position:absolute;
	top:100px;
	z-index:1;
	min-height:750px;
}

	#content_titre{
	position:absolute;
	top:30px;
	left:40px;
	z-index:2;
	}
	#content_text{
		position:absolute;
		width:476px;
		top:84px;
		left:70px;
		z-index:2;
		border-bottom:solid 2px #4a4a4a;
	}
	#maquette{
		position:absolute;
		top:265px;
		left:64px;
		z-index:2;
	}
	
	#content_commentaire{
		position:absolute;
		width:476px;
		top:560px;
		left:70px;
		z-index:3;
	}
	
	.jaune_gras{
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:11px;
		color:#ff9600;
		font-weight:bold;
	}
	.gris_gras{
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:11px;
		color:#4a4a4a;
		font-weight:bold;
	}
	.commentaire{
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:9px;
		color:#4a4a4a;
	}
	.commentaire_text{
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:10px;
		color:#4a4a4a;
	}
	.footer_text{
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:10px;
		color:#FFFFFF;
	}
	
	
	

#footer{
	position:absolute;
	bottom:0;
	background-image:url(../images/bg_footer.jpg);
	background-repeat:repeat-x;
	width:100%;
	height:44px;
	z-index:1;
}

	#footer_text{
	position:absolute;
	top:20px;
	left:100px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#FFFFFF;
	z-index:2;
	}

Modifié par climzerland (26 Apr 2008 - 14:14)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Sujet clos
Aller à