Pied de page HTML-CSS

Technibureau Messages postés 106 Date d'inscription Statut Membre Dernière intervention -
le-Fou-Du-HTML Messages postés 3 Date d'inscription Statut Membre Dernière intervention - 1 mars 2013 à 14:17

Bonjour,

Je debute dans le webmastering, j'essai de créer un site web en html avec une feuille css.

Mon probleme est que je n'arrive pas a mettre mon pied de page, j'ai crée une : (dans ma page style.css)

div#footer
{
margin: 0;
width: 700px ;
height: 20px ;
display: block ;
text-align: right;
color: #8a0 ;
position:relative;
}

ET (dans ma page HTML

<div id="footer">
<p>pied de page <p>
</div>

</body>
</html>

Mais mon pied de page, se retrouve en ua de cette page, j'aimerais pouvoir l'avoir en bas de cette page, en dépendance du texte ajouter.

Si quelqu'un pourrait m'aidé.
Merci,

A voir également:

Pied de page HTML-CSS
Impossible de supprimer une page word - Guide
Calcul km marche à pied gratuit - Télécharger - Sport
Editeur html - Télécharger - HTML
Numéro de page word - Guide
Imprimer tableau excel sur une page - Guide

11 réponses

Réponse 1 / 11

jerywa

voir ici
http://ww1.uuuq.com#chap42

Réponse 2 / 11

Kemich Messages postés 207 Date d'inscription Statut Membre Dernière intervention 22

Eh, va donc faire un tour ici, http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

Réponse 3 / 11

kiki.boss3 Messages postés 43 Date d'inscription Statut Membre Dernière intervention 13

essayer avec :
div#footer
{
margin: 0;
width: 700px ;
height: 20px ;
display: block ;
text-align: right;
color: #8a0 ;
position:absolut;
}

Réponse 4 / 11

warlix Messages postés 1201 Date d'inscription Statut Contributeur Dernière intervention 288

salut

tu as essayé de virer : position: relative ?

de plus il faut l ensemble du code pour voir , car dépend de la sructure de ta page

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 11

madmaskx Messages postés 129 Date d'inscription Statut Membre Dernière intervention 14

salut,
Moi je met une div qui prend 85% de ma page pour le contenu principal, ainsi tout ce qui est ecrit sous cette div est en pied de page et je garde une place pour mon menu à gauche.
Sinon tu cree un tableau en taille relative(%) et tu met le contenude ton footer sur la derniere ligne.
La reponse est spartiate mais si tu as encore des problemes je tacherai d'être plus precis.

Réponse 6 / 11

Technibureau Messages postés 106 Date d'inscription Statut Membre Dernière intervention 8

Merci madmaskx,

J'en ai réussi avec mon pied de page. J'ai maintenant un autre petit soucis, je reports à mon autre post : http://www.commentcamarche.net/forum/affich 4491136 image en dehors du champs texte#dernier.
Si tu saurais m'aider.

En te remerciant, et une bonne année.
Cdt

Réponse 7 / 11

Technibureau Messages postés 106 Date d'inscription Statut Membre Dernière intervention 8

Tout cela est vrai, mais très dure d'explicité la chose quand mon vient tout juste de ce lancer dans le html et css.
Voici mon code style.css
SI vous pouvez apporter des modifications pourquoi pas! Je suis prenneur.
Pour refaire une récap. mon image en pied de page, en bien en bas, centrer au milieu de la page. Sauf que quand je rajoute du texte dans le corps, il passe derriere l'image de pied-de-page ... Alors que celui-ce devrait descendre en s'ajustant.
Si je ne suis pas très claire, dite-le moi, j'essayerais de m'éclaircir d'avantage.

Merci quand même!

-------------------------------

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding:0px;
}

div#conteneur {
margin: 0px 0px 0px -385px;
padding: 0px;
left: 50%;
position: absolute;
width: 770px;
height: 100%;
min-height: 100%;
}

html>body div#conteneur {height: auto;}

div#banniere {
background: url('images/banniere.jpg') no-repeat top left;
width: 770px;
height: 185px;
margin: 0px;
padding: 0px;
}
div#banniere h1 {
color: #FFFFFF;
margin: 0px 0px 0px 520px;
font-size: 20px;
padding: 20px
}
div#contenu {
margin: 0px 0px 0px 0px;
padding: 10px;
width: auto;
height: auto;
float: left;
}

div#contenu p {
color: #595959;
margin: 0px 0px 0px 8
font-weight: bold ;
font-family: Verdana, Arial, Geneva;
text-align: center;
}

div#contenu u {
color: #595959;
margin: 40px 0px 0px 40px;
font-family: Verdana, Arial, Geneva;
text-align: justify;
}

div#contenu f {
color: #595959;
margin: 40px 0px 0px 40px;
font-family: Verdana, Arial, Geneva;
text-align: justify;
}

ul#menu{
margin: 0px 0px 20px 0px;
padding: 0px ;
height: 35px;
width: 770px;
text-align: center;
color: #c0ff40;
font-family: comic sans ms, geneva, sans-serif;
font-size: 14px;
list-style-type: none;
}

ul#menu li {
margin: 0px;
width: 154px;
float: left;
text-align: center;
background: #000000;
}

ul#menu li a {
color: #FFFFFF;
background: url('images/bouton.jpg') no-repeat top left;
text-decoration: none;
height: 25px;
font-weight: bold;
font-size: 14px;
display: block;
}

ul#menu li a:hover {
color: #000000;
background: #FFFFFF;
}

div#pied_de_page {
position: absolute;
margin: 700px 0px 0px 254px;
background: url('images/pied_de_page.jpg') no-repeat top left;
width: 770px;
height: 50px;
border: 0px #000000 solid;
clear:both; /*Place le pied en element flottant*/
}

div#a {
color: #000000;
margin: 23px 0px 0px 200px;
padding: 0px;
width: 770px;
height: 50px;
font-size: 10px;
font-weight: none;
font-family: Geneva, Verdana, Arial;
text-align: center;
}

Réponse 8 / 11

Technibureau Messages postés 106 Date d'inscription Statut Membre Dernière intervention 8

Merci.

J'ai réussis a mettre mon pied de page en premier plan, et en bas en lui afflichant 700px.
Mais est il possible de ne pas lui mettre une valeur fixe, et qu'il descende automatiquement par rapport au contenu du texte qu'il y aura.

Ou va t'il le faire automatiquement ?

Merci de votre aide,
Cdt

Réponse 9 / 11

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

Bonjour,

warlix dit “il faut l ensemble du code pour voir”.
Il a raison.

Il existe différentes manières de faire.
En fonction des choix qui ont été faits ailleurs pour la mise en page.

Donc, DONNE LE CODE DE LA PAGE ENTIÈRE.

Sinon, une manière de faire.

--

Réponse 10 / 11

Kemich Messages postés 207 Date d'inscription Statut Membre Dernière intervention 22

Salut,

Ton pied de page va descendre automatiquement par rapport au contenu du reste de ta page si tu suis mes conseils, et que tu t'inspires des gabarits de page disponibles sur alsacréations (voir le liens 2 post plus haut).

A quoi ca sert de poster des messages si tu ne tient pas compte des réponses ?

Ps : essait d'être plus explicite, il y a dans ton message des phrases qu'on a du mal a comprendre.
Ex : J'ai réussis a mettre mon pied de page en premier plan, et en bas en lui afflichant 700px.

Réponse 11 / 11

le-Fou-Du-HTML Messages postés 3 Date d'inscription Statut Membre Dernière intervention 1

Au pire tu fais une table :

<table>
            <tr>
                   <td id="document">
                   </td>
            </tr>
             <tr>
                    <td id="pied_de_page">
                           
                     </td>
              </tr>
</table>

et du css :

td#pied_de_page{
     width:85%;
     ......
}

Le pied_de_page se positionnera au pied de la page.
... Mais si tu veux ABSOLUMENT une div je peux rien pour toi.

Discussions similaires

Espace en HTML

Votre réponse

Discussions similaires