Tom's Guide > Forum > Programmation > Probleme création footer (x)html

Probleme création footer (x)html

Forum Programmation : Probleme création footer (x)html

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !

Créer un nouveau sujet Répondre

Bas de page Chercher dans ce sujet

Bonjour a tous! J'ai un problème de création de pied de page :colere2: .Lorque j'essaie de créer une division tout en bas de ma source, au lieu de s'afficher son contenu en bas de la page, elle l'affiche en bas de la division "corps"(enfin j'en ai l'impression). Si je ne suis pas clair demandez-moi des précisions, et si vous avez des idées pour améliorer le css ou la source n'hésitez pas non plus.

Voici mon code x(html) valide W3C (et franchement inspiré des tutos du SdZ).

Code :

<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" xml:lang="en">
<head>
<meta name="Description" content="Bienvenue sur le site de l'info. C'est un site generaliste ou nous publions vos photos,dessins,video..." />
<meta name="keywords" content="kings, roi, king, rois, nouvelles, nouvelle, info, actu, actualite, information, informations, news, new, jeux, flash, marc, remi, trackmania, trackmania nations, humour," />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
<meta name="Author" content="Remi, Marco" />
<meta name="copyright" content="kingsdelanews.free.fr" />
<title>Mon super site</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="index3.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/karting.ico" />
</head>
<body>
<p id="en_tete"><img src="images/banierenew.png" alt="" /></p>
<ul id="barre">
<li class="barregauche"><a href="http://kingsdelanews.free.fr/index.php" title="Retournez sur la page d'accueil"><span>Accueil</span></a></li>
<li class="barregauche"><a href="http://kingsdelanews.free.fr/livreor/" title="Laissez un message !"><span>Livre d'or</span></a></li>
<li class="barredroite"><a href="http://kingsdelanews.free.fr/phpBB2/" title="Le forum"><span>Forum</span></a></li>
<li class="barredroite"><a href="wanalester/subscribe.php" title="Le forum"><span>Newsletter</span></a></li>
</ul>
<div id="fond">
<div id="menu">
<div id="menu_dynamique">
<ul>
<li class="extend ">
<a href="#">Vidéo du net</a>
<ul>
<li class="end first"><a href="http://kingsdelanews.free.fr/vactu.php">Actualité</a></li>
<li class="end"><a href="http://kingsdelanews.free.fr/vhumour.php">Humour</a></li>
<li class="end"><a href="http://kingsdelanews.free.fr/vpub.php">Publicité</a></li>
<li class="end last"><a href="http://kingsdelanews.free.fr/vhorreur.php">Horreur</a></li>
</ul>
</li>
<li class="extend">
<a href="#">Vidéo perso</a>
<ul>
<li class="end first"><a href="http://kingsdelanews.free.fr/videoperso/trackmania.php">Trackmania</a></li>
<li class="end"><a href="http://kingsdelanews.free.fr/videoperso/GTA.php">GTA/SAMP</a></li>
<li class="end"><a href="http://kingsdelanews.free.fr/videoperso/pes.php">PES</a></li>
<li class="end last"><a href="http://kingsdelanews.free.fr/videoperso/stepmania.php">Stepmania</a></li>
</ul>
</li>
<li class="extend">
<a href="#">Trackmania</a>
<ul>
<li class="end first"><a href="http://kingsdelanews.free.fr/tmhistoire.php">Histoire</a></li>
<li class="end"><a href="http://kingsdelanews.free.fr/tmtuto.php">Tutoriel</a></li>
<li class="end"><a href="http://kingsdelanews.free.fr/tmconseil.php">Conseil de marco</a></li>
<li class="end last"><a href="http://kingsdelanews.free.fr/tmvideo.php">Vidéo</a></li>
</ul>
</li>
<li class="extend">
<a href="#">Stepmania</a>
<ul>
<li class="end first"><a href="http://kingsdelanews.free.fr/stepmania/stepmania.php">Présentation</a></li>
<li class="end"><a href="http://kingsdelanews.free.fr/stepmania/sconnec.php">Multi-joueur</a></li>
<li class="end"><a href="http://kingsdelanews.free.fr/stepmania/sspeed.php">Modifier la vitesse</a></li>
<li class="end "><a href="http://kingsdelanews.free.fr/stepmania/stop.php">Les options</a></li>
<li class="end last"><a href="http://kingsdelanews.free.fr/stepmania/slien.php">Lien/Pack</a></li>
</ul>
</li>
<li class="extend">
<a href="http://kingsdelanews.free.fr/predieu.php">Prédieu</a>
<ul>
<li class="end first"><a href="http://kingsdelanews.free.fr/visioneuse.html">BD</a></li>
<li class="end last"><a href="http://kingsdelanews.free.fr/photonormal.php">Les photos</a></li>
</ul>
</li>
<li class="extend">
<a href="#">Les mangas</a>
<ul>
<li class="end first last"><a href="http://d38gto.skyblog.com/">GTO</a></li>
</ul>
</li>
<li class="extend">
<a href="#">Les images</a>
<ul>
<li class="end first"><a href="http://kingsdelanews.free.fr/diapo/diapo/">Les images</a></li>
<li class="end last"><a href="mailto:marc38gt@hotmail.fr?subject=Une_image">Envoyez-les-moi</a></li>
</ul>
</li>
<li class="extend">
<a href="#">Les tutoriels</a>
<ul>
<li class="end first"><a href="http://kingsdelanews.free.fr/tuto/audacity.php">Audacity</a></li>
<li class="end" ><a href="http://kingsdelanews.free.fr/tutovideo/tutovideo.php">Créer ses vidéos</a></li>
<li class="end last"><a href="http://kingsdelanews.free.fr/tuto/emulateur.php">Emulateur</a></li>
</ul>
</li>
<li class="end"><a href="http://kingsdelanews.free.fr/lol1.php">Les flash</a></li>
<li class="end "><a href="http://kingsdelanews.free.fr/jeux.php">Jeux perso</a></li>
</ul>
</div>
<iframe src="http://www.i-tchat.com/shoutbox/shoutbox.php?idShoutbox=45190" width="170px" height="350px" frameborder="0"></iframe>
<script src="http://kingsdelanews.free.fr/livreor/boiteJava/?n=1" type="text/javascript"></script>
<br/>
<div style="background-image:url('http://kingsdelanews.free.fr/images/hautimagehasard.png');background-repeat:no-repeat;height: 35px;"></div>
<div style="border-top: 0px 0;border-bottom: 0px 0;background-image: url('http://kingsdelanews.free.fr/images/fondmessage.png');margin-left:0px;">
<a href="/diapo/diapo/?img=2"><img alt="XD" src="/diapo/diapo/getimg.php?img=Les_gifs_a_Marco/XD.gif" style="border:none;max-width:170px;display:block;clear:both;margin-left:auto;margin-right:auto;paddin-top:15px;"/></a><br />
</div>
<img src="http://kingsdelanews.free.fr/images/basimagehasard.png" alt="" />
</div>
<div id="corps">
<div style="margin-bottom:15px;margin-top:25px;padding-left:97px;">
<div class="hautnews">
<div style="background-image: url(images/hautnews.png) ;height:100px;background-repeat:no-repeat;"/></div>
<div class="fondnews" style="width:660px; margin: 0px 0;">
<div style="margin-left:60px;"><strong>Juste un petit tes pour les liens rss :)</strong></div>
<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #bd6d2e;margin-left:60px;margin-right:60px;border-collapse: collapse;">Juste un petit tes pour les liens rss :). Et puis pour dire que le site va très peu avancer jusqu'aux vancances XD</div>
<img src="http://kingsdelanews.free.fr/images/bordure.png" alt="" style="margin-left:60px"/>
<span style="float: right;margin-right:60px;"> <a href="#" onclick="window.open('http://kingsdelanews.free.fr/cutenews/show_news.php?subaction=showcomments&template=&id=1201279162&archive=&start_from=&ucat=', '_News', 'HEIGHT=400,WIDTH=650,resizable=yes,scrollbars=yes');return false;">0 Commentaires</a></span>
<div style="margin-left:60px;"><em>Poste le 25 Jan 2008 par <a href="mailto:marc38gt@hotmail.fr">marco</a></em></div>
<div><img src="http://kingsdelanews.free.fr/images/basnews.png" alt=""/></div>
</div><div class="hautnews">
<div style="background-image: url(images/hautnews.png) ;height:100px;background-repeat:no-repeat;"/></div>
<div class="fondnews" style="width:660px; margin: 0px 0;">
<div style="margin-left:60px;"><strong>Mise a jour v0.4</strong></div>
<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #bd6d2e;margin-left:60px;margin-right:60px;border-collapse: collapse;">Mise en place du menu en flash;<br />Le lecteur mp3 reste en bas a gauche de votre écran;<br />Le bas de page est à la même hauteur, ça parait simple hein <img style="border: none;" alt="laughing" src="http://kingsdelanews.free.fr/cutenews/data/emoticons/laughing.gif" /> mais non c'est pas simle quand on part de zéro <img style="border: none;" alt="tongue" src="http://kingsdelanews.free.fr/cutenews/data/emoticons/tongue.gif" />;<br />A venir changement de couleur etcc si rem's se décide a finir le header <img style="border: none;" alt="smile" src="http://kingsdelanews.free.fr/cutenews/data/emoticons/smile.gif" />;<br />enfin voila bonne nanée na tous!!!</div>
<img src="http://kingsdelanews.free.fr/images/bordure.png" alt="" style="margin-left:60px"/>
<span style="float: right;margin-right:60px;"> <a href="#" onclick="window.open('http://kingsdelanews.free.fr/cutenews/show_news.php?subaction=showcomments&template=&id=1199994708&archive=1199994713&start_from=&ucat=', '_News', 'HEIGHT=400,WIDTH=650,resizable=yes,scrollbars=yes');return false;">0 Commentaires</a></span>
<div style="margin-left:60px;"><em>Poste le 10 Jan 2008 par <a href="mailto:marc38gt@hotmail.fr">marco</a></em></div>
<div><img src="http://kingsdelanews.free.fr/images/basnews.png" alt=""/></div>
</div><div class="hautnews">
<div style="background-image: url(images/hautnews.png) ;height:100px;background-repeat:no-repeat;"/></div>
<div class="fondnews" style="width:660px; margin: 0px 0;">
<div style="margin-left:60px;"><strong>MaJ v0.3</strong></div>
<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #bd6d2e;margin-left:60px;margin-right:60px;border-collapse: collapse;">Alors donc pour cette mise a jour, tous les bugs ont été supprimés.<img style="border: none;" alt="laughing" src="http://kingsdelanews.free.fr/cutenews/data/emoticons/laughing.gif" /><br />Le menu n'est plus déroulant (en prévision pour la grande MaJ graphique <img style="border: none;" alt="wink" src="http://kingsdelanews.free.fr/cutenews/data/emoticons/wink.gif" /> . <br />Pour les vidéos il y a du changement, uploader les sur dailymotion et contactez-moi pour les mettre dans une playlist.<br />Voila voila <img style="border: none;" alt="tongue" src="http://kingsdelanews.free.fr/cutenews/data/emoticons/tongue.gif" />!</div>
<img src="http://kingsdelanews.free.fr/images/bordure.png" alt="" style="margin-left:60px"/>
<span style="float: right;margin-right:60px;"> <a href="#" onclick="window.open('http://kingsdelanews.free.fr/cutenews/show_news.php?subaction=showcomments&template=&id=1198345272&archive=1199994713&start_from=&ucat=', '_News', 'HEIGHT=400,WIDTH=650,resizable=yes,scrollbars=yes');return false;">0 Commentaires</a></span>
<div style="margin-left:60px;"><em>Poste le 22 Dec 2007 par <a href="mailto:marc38gt@hotmail.fr">marco</a></em></div>
<div><img src="http://kingsdelanews.free.fr/images/basnews.png" alt=""/></div>
</div><div style="margin-top:15px;width:100%;text-align:center;font:9px Verdana;">Content Management Powered by <a href="http://cutephp.com/" title="CuteNews - PHP News Management System">CuteNews</a></div>
</div>
<a title="RSS Feed" href="http://kingsdelanews.free.fr/cutenews/rss.php?number=10">
<img src="http://kingsdelanews.free.fr/cutenews/skins/images/rss_icon.gif" alt="rss" style="border:0 none;" />
</a>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" style="border:0 none;"/></a>
<a title="Mettre ce site dans vos Favoris" href="javascript:window.external.addfavorite('http://kingsdelanews.free.fr/index.php', 'kingsdelanews')"><img src="images/coeur.png" alt="" style="border:0 none;"/></a>
<span style="position:relative;right:0px;bottom:0px;">
0.0832 s.</span>
</div>
</div>
<div style="position:fixed;bottom:0px;left:0px;"><object type="application/x-shockwave-flash" data="dewplayer-multi.swf?mp3=mp3/opgap.mp3|mp3/foy.mp3|mp3/max.mp3&random=1&bgcolor=ffbd89" width="240" height="20"><param name="movie" value="dewplayer-multi.swf?mp3=mp3/opgap.mp3|mp3/foy.mp3|mp3/max.mp3&random=1&bgcolor=ffbd89" /></object><a href="dewplayer-multi.swf?mp3=mp3/max.mp3|mp3/foy.mp3|mp3/opgap.mp3&random=1&bgcolor=ffbd89" onclick="window.open(this.href, 'radio', 'width=240, height=20, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=no, status=no'); return false;"><b style="color:red;font-size:8px;text-decoration: none;">Pop-up</b></a></div>
</body>
</html>

Et voici mon code CSS

Code :

body {
width : 1024px;
margin : auto;
margin-top : 20px;
margin-bottom : 20px;
background-image : url(http://kingsdelanews.free.fr/images/home.png);
background-repeat : repeat;
background-attachment : fixed;
font-family : "Trebuchet MS", serif;
border-bottom : 2px solid gray;
behavior:url("http://kingsdelanews.free.fr/css/csshover.htc" );
}
#en_tete {
text-align : center;
margin-top : 5px;
}
#barre {
list-style-type : none;
margin : 0;
padding : 0;
padding-left : 0;
height : 25px;
background-color : #f3a05f;
border : 1px solid gray;
}
.barregauche {
float : left;
padding-left : 8px;
background : url(http://kingsdelanews.free.fr/images/sepa2.png) no-repeat right 0%;
padding-right : 15px;
}
.barredroite {
float : right;
padding-left : 20px;
background : url(http://kingsdelanews.free.fr/images/sepa.png) no-repeat;
padding-right : 8px;
}
#speedbarre li {
height : 25px;
line-height : 25px;
text-align : center;
padding-top : 0;
}
#barre a {
color : white;
font-style : normal;
text-decoration : none;
font-weight : bold;
display : block;
}
#barre a:hover {
color : #b3b3b3;
}
#fond {
background : url(http://kingsdelanews.free.fr/images/fond.png) center 0;
overflow : auto;
}
dl, dt, dd, ul {
list-style-type : none;
}
#menu {
float : left;
width : 170px;
background-color : #ffbd89;
border-right : 1px solid gray;
border-left : 2px solid gray;
border-right : 2px solid gray;
}
#menu_dynamique li a {
display : block;
height : 25px;
text-decoration : none;
color : #696969;
background-color : #ffbd89;
}
#menu_dynamique {
width : auto;
margin : 0 0;
padding : 0;
}
#menu_dynamique ul {
width : 170px;
list-style : none;
padding : 0;
margin : 0;
border-right : 1px solid silver;
}
#menu_dynamique ul li {
width : auto;
margin-left : 0;
padding-left : 25px;
text-indent : 5px;
height : 25px;
background : url("http://kingsdelanews.free.fr/menu/bordure.png" ) no-repeat;
}
#menu_dynamique ul li ul {
display : none;
}
#menu_dynamique ul li:hover ul {
display : block;
position : relative;
top : -25px;
left : 146px;
}
#menu_dynamique ul li ul, #menu_dynamique ul li:hover ul li ul, #menu_dynamique ul li:hover ul li:hover ul li ul {
display : none;
}
#menu_dynamique ul li:hover ul, #menu_dynamique ul li:hover ul li:hover ul, #menu_dynamique ul li:hover ul li:hover ul li:hover ul {
display : block;
position : relative;
top : -25px;
left : 146px;
}
#menu_dynamique ul li.extend a {
background : #ffbd89 url("http://kingsdelanews.free.fr/menu/suite.gif" ) right no-repeat;
}
#menu_dynamique ul li.extend:hover ul li.end a {
background-image : none;
}
#menu_dynamique li:hover {
background : url("http://kingsdelanews.free.fr/menu/fleche_survol.png" ) no-repeat;
}
#menu_dynamique li a:hover {
color : black;
background-color : #bbb7c7;
}
#menu_dynamique ul li.extend:hover a, #menu_dynamique ul li.extend:hover ul li:hover a, #menu_dynamique ul li.extend:hover ul li.extend:hover ul li:hover a, #menu_dynamique ul li.extend:hover ul li.extend:hover ul li.extend:hover ul li:hover a {
background-color : #bbb7c7;
}
#menu_dynamique ul li.extend:hover ul li a, #menu_dynamique ul li.extend:hover ul li:hover ul li a, #menu_dynamique ul li.extend:hover ul li.extend:hover ul li:hover ul li a {
background-color : #ffffff;
}
#menu_dynamique li.first {
border-top : 1px solid silver;
}
#menu_dynamique li.last {
border-bottom : 1px solid silver;
}
html > body #menu_dynamique ul li.extend:hover {
overflow : visible;
}
#corps {
margin-right : 0;
border-right : 2px solid gray;
border-left : 1px solid gray;
padding-bottom : 5px;
color : black;
background-color : #ffbd89;
float : right;
width : 847px;
margin-top : 0;
}
.hautnews {
margin-top : 20px;
margin-bottom : 20px;
}
.fondnews {
background-image : url(http://kingsdelanews.free.fr/images/fondnews.png);
margin-right : 50px;
color : black;
}

Merci d'avance

Message édité par OmaR le 11-02-2008 à 12:41:34

Répondre

Inscrivez-vous ou connectez-vous pour masquer ceci.

Salut,

Tout dans ton site est positionné en absolute, donc, quand ton corps est beaucoup plus grand que prévu, ton footer se retrouve au même niveau que ton corps.

Répondre à OmaR

Créer un nouveau sujet Répondre

Tom's Guide > Forum > Programmation > Probleme création footer (x)html

Aller à :

Aide |
Règles du forum

Il y a 773 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Page générée en 0,643 secondes

Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler

Liens