Problème de CSS

Avec le pied de page.

Sujet résolu

20 octobre 2006 à 0:48:50

Bonjour

Voila mon problème:

Je n'arrive pas à mettre mon pied de page en bas pour toutes mes pages,en faite normalement il devrait se mettre en bas du corps tout seul, hors pas là.
Le pied de page devrait se mettre en bas du corps quelque soit la taille du corps...mais je n'arrive pas à ça...
Voici le code HTML et CSS.

Merci de votre aide.

HTML :
<link rel="stylesheet" type ="text/css" href="SITW.css" />
<script type="text/javascript"></script>
</head>
<body>
<div id="container">

<div id="barre_h_b">
</div> 

<div id="barre_v_v">

</div> 

<div id="intro">

<h1>Somewhere in the World</h1>

<div id="barre_h_b2">
</div> 

</div> 

<div id="titre">

<h2>Sommaire</h2>
<div> 

<div id="nom">
Mathieu Lesteur
</div> 

<div id="page">
<table >
<tr>
<p><td><a href="flore.html"><img src="flore.jpg" width='200' height='143' alt="Flore" title="Flore"/></a></td></p>

<p><td><a href="voyage.html"><img src="voyage.jpg" width='200' height='143' alt="Voyage" title="Voyage"/></a></td></p>
</tr>
<tr>
<p><td>Flore</td></p>
<p><td>Voyage</td></p>
</tr>
<tr>
<p><td><a href="portraits.html"><img src="portraits.jpg" width='200' height='143' alt="Portraits" title="Portraits"/></a></td></p>
<p><td><a href="serie.html"><img src="series.jpg" width='200' height='83' alt="Séries" title="Séries"/></a></td></p>

</tr>
<tr>
<p><td>Portraits</td></p>
<p><td>Séries</td></p>
</tr>
</table>
</div> 

</div> 

<div id="pied_de_page">
<p>Toutes les images ainsi que les textes de ce site sont protégés par les lois internationales sur le copyright
et ne peuvent être utilisés, sous quelque forme que ce soit, sans une autorisation écrite de son auteur. © Copyright Mathieu Lesteur.
</p>
</div> 

<div id="linkList">
<ul>
<li><a href="sommaire.html" title="Sommaire" accesskey="a">Sommaire</a></li>
<li><a href="flore.html" title="Flore" accesskey="b">Flore</a></li>

<li><a href="portraits.html" title="Portraits" accesskey="c">Portraits</a></li>
<li><a href="voyage.html" title="Voyages" accesskey="d">Voyages</a></li>
<li><a href="serie.html" title="Séries" accesskey="d">Séries</a></li>
<li><a href="materiel.html" title="Mon materiel" accesskey="e">Mon materiel</a></li>
<li><a href="liens.html" title="Liens" accesskey="f">Liens</a></li>
<li><a href="contact." title="Contact" accesskey="g">Contact</a></li>

<li><a href="accueil" title="Accueil" accesskey="h">Accueil</a></li>
</ul>
</div>
</body>
</html>

CSS :
body
{
border: 2px solid white;
color: #666666;
background-color:#000000;
margin:auto;
margin-top: 20px;
margin-bottom: 20px;
}

#container
{
/*border: 2px solid white;*/
margin-left: auto;
margin-right: auto;
width: 1000px;
font: 10px Verdana, georgia;
}

#barre_v_v
{
/*border: 2px solid white;*/
background: url("barre_v_v.png") top left repeat;
width: 66px;
height:529px;
position: absolute;
top: 20px;
left: 123px;
}

#barre_h_b
{
/*border: 2px solid white;*/
background: url("barre_h_b.png") top left no-repeat;
width: 800px;
height:91px;
}

#intro
{
/*border: 2px solid white;*/
width: 454px;
height:104px;
position:absolute;
top: 15px;
left: 146px;
}

#intro h1
{
/*border: 2px solid white;*/
font: 36px verdana, sans-serif;
color:#E4F02A;
position:absolute;
top: 0px;
left: 0px;
}

#barre_h_b2
{
/*border: 2px solid white;*/
background: url("barre_h_b2.png") top left no-repeat;
width: 369px;
height:13px;
position: absolute;
top: 74px;
left: 76px;
}

#titre h2
{
/*border: 2px solid white;*/
font: 24px verdana, sans-serif;
color:#E4F02A;
position:absolute;
top: 140px;
left: 170px;
}

#nom
{
/*border: 2px solid white;*/
font: 14px verdana, sans-serif;
width: 120px;
position: absolute;
top: 120px;
left: 590px;
}

#page
{
/*border: 2px solid white;*/
width: 650px;
position: absolute;
top: 200px;
left: 250px;
}

#page table
{
/*border: 2px solid white;*/
position: absolute;
top: 0px;
left: 40px;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
}

#linkList
{
/*border: 2px solid white;*/
padding: 10px;
margin-top: 190px;
margin-left: 100px;
position: absolute;
top: 15px;
left: 44px;
font: 14px verdana, sans-serif;
width: 130px;
}

#linkList ul
{
/*border: 2px solid white;*/
margin: 0px;
padding: 0px;
}

#linkList li
{
/*border: 2px solid white;*/
line-height: 2.5ex;
list-style-type: none;
display: block;
padding-top: 5px;
margin-bottom: 5px;
}

#linkList li a:link
{
color: #988F5E;
}

#linkList li a:visited
{
color: #B3AE94;
}

#pied_de_page
{
border: 2px solid white;
position: absolute;
left: 200px;
bottom: -10%;
width:680px;
padding: 1px;
text-align: center;
color: #B3B3B3;
}

td
{
/*border: 2px solid white;*/
text-align:center;
}

/* -----------------------------------------------------------------------------Permet de supprimer les bordures autour des images.... -------------------------------------------------------------------------- */
a img
{
border:none;
}

p {
font: 8pt/16pt georgia;
margin-top: 0px;
text-align: justify;
}
h3 {
font: italic normal 12pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #7D775C;
}
a:link {
font-weight: bold;
text-decoration: none;
color: #B7A5DF;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #D4CDDC;
}
a:hover, a:active {
text-decoration: underline;
color: #9685BA;
}

.page_espace
{
width:120px;
}

.monde
{
margin-left:13%;
}

.carte_canada
{
margin-left:20%;
}

.font
{
color: #B3B3B3;
font-size: 13px;
font-family: "Mangal";
text-align:justify;
}

.ontario1
{
float: left;
margin-right: 1%;
}

.ontario2
{
float:right;
margin-left:1%;
}

.lien_voyage
{
position : absolute;
left:100px;
top:100px;
}

Merci d'avance !!

Mathieu

zeunyton

20 octobre 2006 à 0:56:10

Salut Athemeis
Ces tout a fait logique que ton pied de page remonte car ta div page table est mis en position:absolute;
cee qui veut dire que ton pied de page passe en dessous est remonte.

Athemeis

20 octobre 2006 à 0:59:27

Que faut il mettre alors s'il te plait?
Un margin?

Merci

Mathieu

zeunyton

20 octobre 2006 à 1:03:36

oui si tu veut que ton pied de page repasse endessous il faut lui donner un margin-top:??px;
pour lui donner une marge fixe si maintenant ta div page est est mise en auto il faudra que tu change le margin aussi car il repassera endessous a chaque fois lol.

Athemeis

20 octobre 2006 à 1:06:17

Comprend pas trés bien ton explication....

zeunyton

20 octobre 2006 à 1:08:11

Tu dois mettre a ton pied de page un

margin-top:??px;

Athemeis

20 octobre 2006 à 1:10:32

Ca ne marche toujours pas sur les autre pages ou le corps est plus grand...

Du style sur celle là....

<!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" xml:lang="en"><head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Mathieu Lesteur">
<meta name="keywords" content="photo, macrophoto, voyage, portrait, fleur, canada, nouvelle zelande, toronto">
<meta name="robots" content="all"><title>Sommaire de Somewhere in the world</title>

<script type="text/javascript"></script>

<style type="text/css" title="currentStyle" media="screen">
@import "SITW.css";
</style>

</head>
<body>
<div id="container">
<div id="barre_v_v">
</div>
<div id="barre_h_b2">
</div>
<div id="intro">

<div id="pageHeader">
<h1><span>Somewhere in the World</span></h1>
<h2><span>Voyage</span></h2>
</div>
<div id="page">

<p class="font"> Dans les prochaines pages, je vous présente des photos des voyages que j'ai effectués
ces dernieres années.
</p>
<p class="font">

Pour l'instant, seules quelques photos de mon voyage au Canada sont en lignes mais j'y travaille
pour mettre les prochaines le plus rapidement possible.
<br/> Je vous invite donc à cliquer sur le Canada pour avoir un aperçu de ce magnifique pays.
</p>

<map name="pays" id="id_pays">
<area shape="rect" coords="28,48,126,130" href="canada.html" alt="Canada"/>
<area shape="rect" coords="370,324,546,366" href="nouvellezelande.html" alt="Nouvelle Zélande" />
</map>

<p><img src="photos/voyage/monde.jpg" usemap="#pays" class="monde" width='550' height='371' alt="carte du monde" title="Cliquez sur le nom du pays dont vous voulez voir les photos" /></p>

</div>
<div id="linkList">

<div id="linkList2">
<div id="lselect">
<ul>
<li><a href="sommaire.html" title="Sommaire" accesskey="a">Sommaire</a></li>
<li><a href="flore.html" title="Flore" accesskey="b">Flore</a></li>
<li><a href="portraits.html" title="Portraits" accesskey="c">Portraits</a></li>
<li><a href="voyage.html" title="Voyages" accesskey="d">Voyages</a></li>

<li><a href="serie.html" title="Séries" accesskey="d">Séries</a></li>
<li><a href="materiel.html" title="Mon materiel" accesskey="e">Mon materiel</a></li>
<li><a href="liens.html" title="Liens" accesskey="f">Liens</a></li>
<li><a href="contact." title="Contact" accesskey="g">Contact</a></li>
<li><a href="accueil" title="Accueil" accesskey="h">Accueil</a></li>
</div>

</div>
</div>
</div>
<div id="pied_de_page">
<p>Toutes les images ainsi que les textes de ce site sont protégés par les lois internationales sur le copyright
et ne peuvent être utilisés, sous quelque forme que ce soit, sans une autorisation écrite de son auteur. © Copyright Mathieu Lesteur.
</p>
</div>
</div>

</body></html>

strucky

20 octobre 2006 à 15:14:39

Utilise les balises codes du forum.
http://www.siteduzero.com/tuto-3-198-1-bien-utiliser-le-zcode.html

Et recommence ta page en n'utilisant pas des positions absolues à tout va.

Problème de CSS

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Problème de CSS

Avec le pied de page.

Problème de CSS

Supprimer

Modérer

Signaler le message aux modérateurs