28173 sujets

CSS et mise en forme, CSS3

BONJOUR ! (attention forum tatillon sur les formules de politesse Smiley cligne )

Pour ton probleme : ça dépend du reste de ta mise en page.

Soit tu veux que ton pied de page colle toujours au bas de la fenêtre, et là je te conseille une recherche sur le forum, le sujet à déja été traité (nouveau tutoriel de mise en page d'alsa il me semble )

Soit tu intègre ton fond au body et laisse le background de ton pied de page transparent, ce qui donnera l'illusion que ton bloc continue jusqu'en bas.
Modifié par barbe douce (14 Nov 2006 - 08:12)
Désolé ! Bonjour à vous tous Smiley biggrin

Je reviendrai plus tard avec mon code, je ne l'ai pas en ce moment.

Mais ça ressemble à ça :

<div id="copyright">
Texte du pied de page
</div>
</div> <!-- Fermeture du container je crois -->
</div> <!-- Fermeture du body je crois -->


Par contre, sur ma deuxième photo, c'est la balise HTML qu'il y a en dessous de mon pied de page. J'ai fait l'expérience de mettre un fond à HTML, mais à cause des lignes ça fonctionne mal (de IE a FF la position est différente) et en plus ça met un fond sur des pages que je ne veux pas.

Ce que je vaux ce n'est pas de coller le pied de page au bas, mais plutôt de l'agrandir pour avoir du noir jusqu'au bas.
Peut-être 2 solutions:

Tu mets un height 100% à ton footer et un margin top de x en fonction du reste de la page. (non-testé, surement bancale, mais AMA à creuser ...)

Je maintiens ma proposition première de placer le fond sur le body et " récupère " ce fond juste sur le footer avec un background transparent et un background différent sur les autres éléments de ta page pour masquer le fond du body. Mais faudrait voir l'ensemble de ta page et de ton code pour plus de précision ...

En espérant t'aider ...
Voici mon code source ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- start: index -->
<html lang="fr">
<head>
<title>Forums de Dicussion - QcFL 2.0</title>
<!-- start: headerinclude -->
<link rel="alternate" type="application/rss+xml" title="Dernières Discussions (RSS 2.0)" href="http://localhost/QcFL/MyBB/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="Dernières Discussions (Atom 1.0)" href="http://localhost/QcFL/MyBB/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jscripts/prototype.lite.js?ver=121"></script>
<script type="text/javascript" src="jscripts/moo.ajax.js?ver=121"></script>
<script type="text/javascript" src="jscripts/general.js?ver=121"></script>
<script type="text/javascript" src="jscripts/popup_menu.js?ver=121"></script>

<!--[if lt IE 7]>
<script defer type="text/javascript" src="jscripts/pngfix.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://localhost/QcFL/MyBB/css/theme_3.css" />
<script language="Javascript" type="text/javascript">
<!--
	var cookieDomain = "";
	var cookiePath = "/";
	var newpm_prompt = "Vous avez reçu un message privé. Cliquez sur OK pour le voir, ou sur Annuler pour fermer ce message.";
	var deleteevent_confirm = "Êtes-vous sûr de vouloir supprimer cet évènement ?";
	var removeattach_confirm = "Êtes-vous sûr de vouloir supprimer la pièce jointe sélectionnée ?";
	var loading_text = 'Chargement. <br />Veuillez Patienter...';
	var saving_changes = 'Sauvegarde des changements...';
// -->
</script>

<!-- end: headerinclude -->
</head>
<body>
<!-- start: header -->
	<a name="top" id="top"></a>
	<div id="container">
		<div id="header">
			<div class="logo"></div>

			<div class="menu">
				<ul>
<li><a href="http://localhost/QcFL/MyBB/search.php"><img src="images/famfamfam/zoom.png" alt="" />Recherche</a></li>
<li><a href="http://localhost/QcFL/MyBB/memberlist.php"><img src="images/famfamfam/group.png" alt="" />Liste des membres</a></li>
<li><a href="http://localhost/QcFL/MyBB/calendar.php"><img src="images/famfamfam/calendar.png" alt="" />Calendrier</a></li>
<li><a href="http://localhost/QcFL/MyBB/misc.php?action=help"><img src="images/famfamfam/help.png" alt="" />Aide</a></li>
				</ul>
			</div>
			<hr class="hidden" />

				<!-- start: header_welcomeblock_guest -->
<div id="panelguest">	
<span style="float:right;"><strong>Date actuelle:</strong> 11-14-2006, 08:48 AM</span>
		Bienvenue, Visiteur ! (<a href="http://localhost/QcFL/MyBB/member.php?action=login">Identification</a> — <a href="http://localhost/QcFL/MyBB/member.php?action=register">S'enregistrer</a>)
</div>
<!-- end: header_welcomeblock_guest -->
		</div>

<!--		<hr class="hidden" />
		<br class="clear" /> -->
		<div id="content">
			
			
			
			<!-- start: nav -->

<div class="navigation">
<!-- start: nav_bit_active -->
<span class="active">Forums de Dicussion - QcFL 2.0</span>
<!-- end: nav_bit_active -->
</div>
<!-- end: nav -->
			<br class="clear" />
<!-- end: header -->
<!-- start: forumbit_depth1_cat -->

<table border="0" cellspacing="1" cellpadding="4" class="tborder">
<thead>
<tr>
<td class="thead" colspan="5">
<div class="expcolimage"><img src="images/collapse.gif" id="cat_1_img" class="expander" alt="[-]" /></div>
<div><strong><a href="forumdisplay.php?fid=1">My Category</a></strong><br /><div class="smalltext"></div></div>
</td>
</tr>
</thead>
<tbody style="" id="cat_1_e">
<tr>
<td class="tcat" width="35"> </td>
<td class="tcat"><strong>Forum</strong></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><strong>Discussions</strong></td>

<td class="tcat" width="85" align="center" style="white-space: nowrap"><strong>Messages</strong></td>
<td class="tcat" width="200" align="center"><strong>Dernier message</strong></td>
</tr>
<!-- start: forumbit_depth2_forum -->
<tr>
<td class="trow1" align="center" valign="top"><img src="images/off.gif" alt="Ce forum ne contient pas de nouveaux messages" title="Ce forum ne contient pas de nouveaux messages" /></td>
<td class="trow1" valign="top">
<strong><a href="forumdisplay.php?fid=2">My Forum</a></strong><div class="smalltext"></div>
</td>
<td class="trow1" valign="top" align="center" style="white-space: nowrap">0</td>
<td class="trow1" valign="top" align="center" style="white-space: nowrap">0</td>
<td class="trow1" valign="top" align="right" style="white-space: nowrap"><span style="text-align: center;">Jamais</span></td>

</tr>
<!-- end: forumbit_depth2_forum -->
</tbody>
</table>
<br />
<!-- end: forumbit_depth1_cat -->
<table border="0" cellspacing="1" cellpadding="4" class="tborder">
<thead>
<tr>
<td class="thead">
<div class="expcolimage"><img src="images/collapse.gif" id="boardstats_img" class="expander" alt="[-]" /></div>
<div><strong>Statistiques du forum</strong></div>
</td>
</tr>
</thead>
<tbody style="" id="boardstats_e">

<!-- start: index_whosonline -->
<tr>
<td class="tcat"><strong>Qui est en ligne</strong> [<a href="online.php">Liste complète</a>]</td>
</tr>
<tr>
<td class="trow1"><span class="smalltext">1 utilisateur actif(s) dans les dernières 15 minutes (0 membres, 0 parmi eux sont invisibles, et 1 invité).<br /></span></td>
</tr>
<!-- end: index_whosonline -->

<!-- start: index_stats -->
<tr><td class="tcat"><strong>Statistiques du forum</strong></td></tr>
<tr>
<td class="trow1"><span class="smalltext">
Nos membres ont un total de 0 messages dans 0 discussions.<br />
Nous avons actuellement 1 membres enregistrés.<br />
Bienvenue à notre nouveau membre, <b><a href="member.php?action=profile&uid=1">Theberge43</a></b> !<br />

Le record d'utilisateurs en ligne est de 2 le 11-11-2006 à 10:00 AM
</span>
</td>
</tr>
<!-- end: index_stats -->
</tbody>
</table>
<br />
<table border="0" cellspacing="1" cellpadding="4" class="tborder">
	<tr>
		<td class="trow1">
			<table width="100%">

				<tr>
					<td>
						<img src="images/on.gif" alt="Ce forum contient de nouveaux messages" style="vertical-align: middle; padding-bottom: 4px;" /> <span class="smalltext">Ce forum contient de nouveaux messages</span><br />
						<img src="images/off.gif" alt="Ce forum ne contient pas de nouveaux messages" style="vertical-align: middle; padding-bottom: 4px;" /> <span class="smalltext">Ce forum ne contient pas de nouveaux messages</span><br />
						<img src="images/offlock.gif" alt="Ce forum est fermé" style="vertical-align: middle;" /> <span class="smalltext">Ce forum est fermé</span>
					</td>

					<td style="vertical-align: top; text-align: right;"><span class="smalltext"><a href="misc.php?action=markread">Marquer tous les forums comme lus</a> | <a href="showteam.php">L'équipe du forum</a> | <a href="stats.php">Statistiques du forum</a></span>
						<!-- start: index_loginform -->
<br /><br />
<form action="member.php" method="post">
	<input type="hidden" name="action" value="do_login" />
	<span class="smalltext"><strong>Connexion rapide:</strong></span>

	<input type="text" class="textbox" name="username" title="Nom d'utilisateur" value="Nom d'utilisateur" onfocus="this.value=''" />
	<input type="password" class="textbox" name="password" title="Mot de passe" value="Mot de passe" onfocus="this.value=''" />
	<!-- start: gobutton -->
<input type="submit" class="button" value="Valider" />
<!-- end: gobutton -->
</form>
<!-- end: index_loginform -->
					</td>
				</tr>
			</table>
		</td>

	</tr>
</table>
<!-- start: footer -->
<br />
</div> <!-- Close content -->

<hr class="hidden" />

<div id="copyright">
<div class="bottommenu">
<span class="smalltext">
<a href="mailto:qcfl.commissaire@gmail.com">Contact</a> | 
<a href="http://localhost/QcFL">QcFL 2.0</a> | 

<a href="#top">Retourner en haut</a> | 
<a href="#content">Retourner au contenu</a> | 
<a href="http://localhost/QcFL/MyBB/archive/index.php">Version bas-débit (Archivé)</a> | 
<a href="http://localhost/QcFL/MyBB/misc.php?action=syndication">Syndication RSS</a>
</span>
</div>
<br />
Moteur <a href="http://www.mybboard.com" target="_blank">MyBB</a> <br />

Copyright © 2002-2006 <strong><a href="http://www.mybboard.com" target="_blank">MyBB Group</a></strong>
</div>
</div> <!-- Close Container -->
<!-- end: footer -->
</body>
</html>
<!-- end: index -->


La fin est comme je le pensais :

<div id="copyright">
<div class="bottommenu">
<span class="smalltext">
<a href="mailto:qcfl.commissaire@gmail.com">Contact</a> | 
<a href="http://localhost/QcFL">QcFL 2.0</a> | 

<a href="#top">Retourner en haut</a> | 
<a href="#content">Retourner au contenu</a> | 
<a href="http://localhost/QcFL/MyBB/archive/index.php">Version bas-débit (Archivé)</a> | 
<a href="http://localhost/QcFL/MyBB/misc.php?action=syndication">Syndication RSS</a>
</span>
</div>
<br />
Moteur <a href="http://www.mybboard.com" target="_blank">MyBB</a> <br />

Copyright © 2002-2006 <strong><a href="http://www.mybboard.com" target="_blank">MyBB Group</a></strong>
</div>
</div> <!-- Close Container -->
<!-- end: footer -->
</body>
</html>
<!-- end: index -->


Si je mets le copyright, le container, le body et le HTML a height: 100% ça marche à peu prêt, mais la la page devient beacoup plus grande que l'écran ...
Je vais te paraitre exigeant, mais ... n'aurait-tu pas un exemple en ligne histoire de voir à quoi ressemble ta mise en page ?

Petite précision au passage, je ne suis pas un méga expert ... Les pistes que je te donne ne sont donc pas à prendre pour argent comptant Smiley cligne , mais si ca peut t'aider ...