28221 sujets

CSS et mise en forme, CSS3

Je ne maitrise pas le flux de cette page [Résolu]

Bonjour,

Voila, je rencontre un petit problème avec ce doc. je souhaite que le bloc "footer" se retrouve quoi qu'il arrive en bas de page (normal non ? ) Smiley cligne

En fait le bloc "container" est de hauteur variable en fonction du contenu présent en base de données, et je pensais bétement que le pied de page serait repoussé d'autant. Mais il n'en n'est rien.

C'est mon premier dev aux normes, je rame un peux.

http://www.musik-session.com/rub01.asp

Donc voici le code de la page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title>Titre</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="DC.Title" content="" />
	<meta name="DC.Creator" content="" />

	<meta name="DC.Subject" content="" />
	<meta name="DC.Description" content="" />
	<meta name="DC.Publisher" content="" />
	<meta name="DC.Date" content="2005-02-28" />
	<meta name="DC.Type" content="texte" />
	<meta name="DC.Format" content="text/html" />
	<meta name="DC.Identifier" content="" />
	<meta name="DC.Source" content="" />
	<meta name="DC.Language" content="fr" />

	<meta name="DC.Rights" content="" />
<style type="text/css">
<!--
/* PARAMETRES DE BASE */
html body {margin:0; padding:0; height: 100%; background-image:url("images/background.gif"); background-repeat:repeat-y; background-color:#F0F0F0;}

/* HEADER */
#header {
	background-color: #E2E2E2;
	height: 135px;
	width: 735px;
	background-image:url("images/header.gif");
	background-repeat:no-repeat;
}
#header h1 {display:none;}

/* CONTENT */
#content {
	margin:0;
	padding:0;
	width:735px;
}

/* COLONE 1*/
#colone1 {
	width: 481px;
	float:left;
	background-image:url("images/content_back.gif");
	background-repeat:repeat-y;
	height:auto;
}
.Module {
	margin-top:0;
	padding-top:0;
}
.Module li {
	list-style-image: url(../images/puce_empty_small.gif);
	margin-left:3px;
}
.ModuleTitre {
	font-family:Arial, Helvetica, sans-serif;
	color:#000;
	font-size:1.0em;
	font-weight:bold;
}
.ModuleText {
	font-family:Arial, Helvetica, sans-serif;
	color:#000;
	font-size:0.6em;
	font-weight:normal;
}
.ModuleText a:link{color:#AC1E36; text-decoration:none;}
.ModuleText a:visited{color:#AC1E36; text-decoration:none;}
.ModuleText a:active{color:#AC1E36; text-decoration:underline;}
.ModuleText a:hover{color:#AC1E36; text-decoration:underline;} 

/* TITRES */
#titreRub01 {	
	background-image:url("images/titre_Rub01.gif");
	background-repeat:no-repeat;
	height:162px;
	width:481px;
	margin:0;
}
#titreRub01 h2 {display:none;}

/* COLONE 2*/
#colone2 {
	background-color:#E2E2E2;
	width: 240px;
	margin:0 0 0 495px;
	height:auto;
}
#colone2 p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.7em;
	padding:0 5px 0 5px;
	text-align:justify;
}
#subtitre {
	background-image:url("images/header_droit.gif");
	background-repeat:no-repeat;
	height:98px;
	width:240px;
	margin:13px 0 0 0;
}
#subtitre h3 {
	display:none;
}

/* FOOTER */
#footer {
	background-image:url("images/footer.gif");
	background-repeat:no-repeat;
	height:66px;
	width:735px;
	margin:13px 0 0 0;
	padding:19px 0 0 0;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.7em;
	color:#868686;
}
#footer a:link{color:#AC1E36; text-decoration:none;}
#footer a:visited{color:#AC1E36; text-decoration:none;}
#footer a:active{color:#AC1E36; text-decoration:underline;}
#footer a:hover{color:#AC1E36; text-decoration:underline;} 

/* MENU PRINCIPAL */
#menuprincipal span {
	display:none;
}
#menuprincipal {
	width:363px;
	height:26px;
	background:  url("images/navigation.gif");
	margin:0 0 0 26px;
	padding:0;
	position:absolute;
	top:109px;
}
#menuprincipal ul {
	margin:0;
	padding:0;
}
#menuprincipal li {
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	top:0;
}
#menuprincipal li, #menuprincipal a {
	height:26px;
	display:block;
}
#rub1 {left: 0; width: 90px;}
#rub2 {left: 91px; width: 90px;}
#rub3 {left: 181px; width: 90px;}
#rub4 {left: 273px; width: 90px;}


#rub1 a:hover {background: transparent url("images/navigation.gif") 0 -26px no-repeat;}
#rub2 a:hover {background: transparent url("images/navigation.gif") -91px -26px no-repeat;}
#rub3 a:hover {background: transparent url("images/navigation.gif") -181px -26px no-repeat;}
#rub4 a:hover {background: transparent url("images/navigation.gif") -273px -26px no-repeat;}


#active1 {left: 0; width: 90px;}
#active2 {left: 91px; width: 90px;}
#active3 {left: 181px; width: 90px;}
#active4 {left: 273px; width: 90px;}


#active1 a {background: transparent url("images/navigation.gif") 0 -26px no-repeat;}
#active2 a {background: transparent url("images/navigation.gif") -91px -26px no-repeat;}
#active3 a {background: transparent url("images/navigation.gif") -181px -26px no-repeat;}
#active4 a {background: transparent url("images/navigation.gif") -273px -26px no-repeat;}
-->
</style>
</head>

<body>
<div id="header">
	<h1>Titre du site</h1>
	<ul id="menuprincipal">
	<li id="active1"><a href="rub01.asp" accesskey="1" tabindex="1" title="Dossiers de presses multim&eacute;dia"><span>Dossiers de presses multim&eacute;dia</span></a></li>

	<li id="rub2"><a href="rub02.asp" accesskey="2" tabindex="2" title="T&eacute;l&eacute;chargement"><span>T&eacute;l&eacute;chargement</span></a></li>
	<li id="rub3"><a href="rub03.asp" accesskey="3" tabindex="3" title="Informations g&eacute;n&eacute;rales"><span>Informations g&eacute;n&eacute;rales</span></a></li>
	<li id="rub4"><a href="rub04.asp" accesskey="4" tabindex="4" title="Contacts"><span>Contacts</span></a></li>
</ul>
</div>
<div id="content">	
	<div id="colone1">

		<div id="titreRub01"><h2>Modules Radios</h2></div>
		<ul class="Module">
			
			<li>
				<span class="ModuleTitre">Module 1 - DEMO</span><br />
				<span class="ModuleText">Texte de présentation du module 1</span><br />
				<span class="ModuleText">Durée : 00:04:20</span><br />
				<span class="ModuleText"><a href="/upload/audio/mod_toto.mp3">écouter le fichier MP3</a></span>

			</li>
			
			<li>
				<span class="ModuleTitre">Module 2 - DEMO</span><br />
				<span class="ModuleText">Texte de présentation du module 2</span><br />
				<span class="ModuleText">Durée : 1:20:33</span><br />
				<span class="ModuleText"><a href="/upload/audio/mod_toto.mp3">écouter le fichier MP3</a></span>
			</li>

			
			<li>
				<span class="ModuleTitre">Module 3 - DEMO</span><br />
				<span class="ModuleText">Texte de présentation du module 3</span><br />
				<span class="ModuleText">Durée : 2:20:30</span><br />
				<span class="ModuleText"><a href="/upload/audio/mod_toto.mp3">écouter le fichier MP3</a></span>
			</li>
			
		</ul>	
	</div>

	<div id="colone2">
		<div id="plus"></div>
		<div id="subtitre"><h3>Sous titre</h3></div>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
	</div>
</div>	
<div id="footer">
	<a href="rub01.asp" accesskey="1" tabindex="1">Modules Radio</a> | 
	<a href="rub02.asp" accesskey="2" tabindex="2">Modules TV</a> | 
	<a href="rub03.asp" accesskey="3" tabindex="3">Téléchargements</a> | 
	<a href="rub04.asp" accesskey="4" tabindex="4">Contacts</a><br />

	<a href="http://validator.w3.org/check?uri=referer" accesskey="5" tabindex="5">xhtml</a> |
	<a href="http://jigsaw.w3.org/css-validator/" accesskey="6" tabindex="6">css</a>
</div>
</body>
</html>


MERCI, à vous..
Modifié par ernstein (23 Feb 2005 - 09:34)
Bonjour,

Tu aurais pu mettre un peu moins de code, c'est dure à lire Smiley ohwell

Bon, pour pousser le footer, il te faut mettre du float dans ton container, pour que justement il pousse le footer.

Mais là je peux pas trop te conseiller car j'ai pas vu dans ton code la partie à pousser.

Bisous...
Non, inutile de faire flotter quoi que ce soit de plus.
Un simple clear:both ajouté à #footer règle le problème.

En revanche, as-tu vraiment besoin d'XHTML1.1 ? Il y a de fortes chances qu'XHTML1.0 soit une DTD plus appropriée Smiley cligne
Modifié par Laurent Denis (23 Feb 2005 - 09:24)
C'est du grand !!!!

Merci messieurs.

je ne connaissais pas cette propriété.
z'avez un lien pour que je puisse me documenter ?

Encore merci.
Sujet clos
Aller à