28173 sujets

CSS et mise en forme, CSS3

Pb de centrage de pied de page

bonjour,

j'ai un div appelé conteneur
dans ce div, j'ai un div "menu" en float left, et un div contenu en float right
ensuite, toujours à l'intérieur du div conteneur, j'ai un div "footer" pour faire mon pied de page

mais je n'arrive pas à centrer le contenu de ce pied de page sur toute la page ; il se positionne sur la droite mais je ne sais pas pourquoi ??

voici la page : http://www.multimedia-net.com/index_test_css.php

merci Smiley biggrin
Salut,
outre un paquet d'incohérences dans le code et des erreurs javascript, c'est un problème qui se résoud facilement avec une bonne charpente de base.
Un defaut que je remarque souvent est l'absence d'utilisation des tableaux de manière cohérente.
a savoir : tu as une tetiere, un menu gauche, un contenu et un pied de page.
Repart à zero et construit ton site sur cette charpente via un tableau (avec un CSS précis)
la base de ton site doit ressembler à ca : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
</head>

<body>
<table width="800" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2">tetiere</td>
  </tr>
  <tr>
    <td width="129">menu gauche</td>
    <td width="671">contenu</td>
  </tr>
  <tr>
    <td colspan="2">pied de page</td>
  </tr>
</table>
</body>
</html>
Salut,

Mouirf... Les tableaux pour moi tu en as déjà de trop !!
Sinon pour éviter de retourner quelques années en arrière, ton footer n'a pas besoin d'être positionné en absolute, un simple clear both; devrait suffire et pour centrer son contenu ben, un text-align: center et ça devrait le faire...

div#footer {clear: both; width: 100%; text-align: center;}
merci pour vos conseils
je suis reparti avec un test sur une charpente de base (mais sans les tableaux, justement, je veux bannir les tableaux !)

voici ce que ça donne :
http://www.multimedia-net.com/index_xhtml.php



le seul pb qui me reste, c'est que je n'arrive pas à faire occuper tout l'espace restant du contenu par le fond en dégradé ...
je veux que le fond descende jusqu'en bas (avant le pied de page au même niveau que le menu) même s'il n'y a pas de contenu !

merci pour votre dernier coup de pouce


ci-dessous le code de mon CSS

/*Balises générales - site global*/
html, body {height:100%;margin:2px 0;font: 90% "Trebuchet MS", sans-serif;}
form {margin:0;padding:0;}
p {margin:0; padding:0;}
div#global {min-height:100%;width:800px;padding: 0 10px;margin: 0 auto;position: relative;}
/*La partie header du site*/
div#header {color: #fff;height:120px}
div#logo{width: 320px ;float:left;}
div#pub {width:480px;float:right;}
div#separ_haut {width:100%;color:#ff992b;background-color:#ff992b;height:1px;border:0;position:relative;top:10px;clear:both;}
div#navigation {width:100%;text-align:center;position:relative;top:13px;}
div#separ_hautb {width:100%;color:#ff992b;background-color:#ff992b;height:1px;border:0;position:relative;top:19px;}
/*La partie centrale du site*/
div#center {padding-bottom: 50px;overflow: auto; }
div#menu {width: 175px;float:left;}
.fond_menu_haut {background-image:url(images/fond_entete_menu.gif);font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; font-weight: bold; color: #676799}
.fond_menu {background-image:url(images/fondbloc_menu.gif);}
div#content {width:625px;float:right;background-image:url(images/fond.jpg);text-align:justify;overflow:auto;}
/*Le pied de page*/
div#footer {position: absolute;width: 100%;bottom: 0;text-align:center;}



et la structure html

<div id="global">
<div id="header"><div id="logo"><img alt="logo" src="images/logo-multimedia_net.gif" width="319" height="81" usemap="#Map" border="0" /></div>
<div id="pub"><mx:bloc id="pub"></mx:bloc id="pub"></div><div id="separ_haut"></div><div id="navigation"><mx:bloc id="navigation"></mx:bloc id="navigation"></div><div id="separ_hautb"></div></div>
<div id="center">
<div id="menu">
<mx:bloc id="colonne_menu"></mx:bloc id="colonne_menu">
<mx:bloc id="colonne_menu_b"></mx:bloc id="colonne_menu_b">
<mx:bloc id="colonne_menu_c"></mx:bloc id="colonne_menu_c">
<mx:bloc id="colonne_menu_d"></mx:bloc id="colonne_menu_d">
<mx:bloc id="colonne_menu_e"></mx:bloc id="colonne_menu_e">
</div>
<div id="content">
<mx:bloc id="colonne_c0"></mx:bloc id="colonne_c0">
<mx:bloc id="colonne_c7"></mx:bloc id="colonne_c7">
</div>
</div>
<div id="footer"><mx:bloc id="pied_pub"></mx:bloc id="pied_pub"></div>
Sujet clos
Aller à