28220 sujets

CSS et mise en forme, CSS3

[Résolu] Comment mettre un pied de page ? Problèmes d'absolute ...

Bonjour,

j'aimerais rajouter un pied de page.
Cela fait 1 H 30 que je cherche comment en mettre 1.
J'ai tenté le float, le absolute, le relative, mais rien ne fonctionne. Je n'arrive pas à combiner les différents paramètres "par rapport" à la structure de mon site.

Je mets les 2 sources XHTML et CSS.
Dites-moi comment vous feriez svp.

a écrit :

<body>


<div id="general">

<div id="logo">
<?php include('pages/logo.html'); ?>
</div>


<div id="header">
<?php include('pages/cCc-FiNaL.html'); ?>
</div>

<div id="sommaire">
<?php include('pages/sommaire.html'); ?>
</div>

<div id="contenu">
<?php

// On définit le tableau contenant les pages autorisées
// ----------------------------------------------------
$pageOK = array('accueil' => 'pages/accueil.html',
'histoire' => 'pages/histoire.html',
'windbeutel' => 'pages/windbeutel.html',
'membres' => 'pages/membres.html',
'calendrier' => 'pages/calendrier.html',
'princes' => 'pages/princes.html',
'ducs' => 'pages/ducs.html',
'galerie' => '../galerie/index.php',
'liens' => 'pages/liens.html',
'contact' => 'pages/contacts.php');

// On teste que le paramètre d'url existe et qu'il est bien autorisé
// -----------------------------------------------------------------
if ( (isset($_GET['page'])) && (isset($pageOK[$_GET['page']])) )
{
include($pageOK[$_GET['page']]); // Nous appelons le contenu central de la page
}
else
{
include('pages/accueil.html'); // Page par défaut quant elle n'existe pas dans le tableau
}
?>
</div>

</div>


</body>


a écrit :

body {
margin: auto;
text-align: center;
background-color: #ddeeaa;
}

#general {
position:relative;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
margin-bottom: 20px;
text-align: left;
width:760px;
}

/* Tout ce qui concerne la division en 4 blocs */
/* Tout ce qui concerne la division en 4 blocs */
/* Tout ce qui concerne le logo */
/* Tout ce qui concerne le logo */
/* Tout ce qui concerne le header */
/* Tout ce qui concerne le header */
/* Tout ce qui concerne le sommaire */
/* Tout ce qui concerne le sommaire */

#logo {
width:145px;
height:145px;
left:0px;
top:0px;
position:absolute;
background-color:#8F0000;
}

.logoimage {
width:121px;
height:117px;
left:12px;
top:14px;
position:absolute;
}

#header {
width:615px;
height:145px;
left:145px;
top:0px;
position:absolute;
background-color:#8F0000;
}

.headercontenu {
width:550px;
height:102px;
left:32px;
top:21px;
position:relative;
}

.googleimg {
width: 75px;
height: 28px;
float: left;
}

.googlerecherche {
width: 390px;
height: 28px;
position: relative;
}

#contenu {
width:615px;
left:145px;
top:145px;
position:absolute;
background-color:#F2F2FF;
}

#sommaire {
width:145px;
height:auto;
left:0px;
top:145px;
position:absolute;
background-color:#8F0000;
}

#sommaire li,a {
list-style-image: url("pages/bouton-menu.png");
color: yellow;
}


Après il n'y a que des class spécifiques aux différentes pages qui seront affichées dans l'id #contenu



Merci d'avance et Bonne Nuit.

Cordialement,

Christopher Bender
Modifié par Mister_ben (19 Apr 2006 - 17:05)
Avec un contenu en height:auto et position absolute je vois mal comment on pourrait placer un footer Smiley ohwell

Par contre si tu met une hauteur à ton contenu en pourcentage par exemple, ou même mieux : si tu le laisses dans le flux, là ça peut très bien se passer Smiley cligne
1) comment je fais pour le laisser dans le flux ?

2) est-ce que je dois mettre :

<div id="basdepage">
<?php include('pages/basdepage.html'); ?>
</div>

dans le div general ou après ?


Merci pour ta réponse Freedom_09
Je viens d'essayer de mettre tous mes div principaux en relative et de m'arranger comme cela :

(je ne cite que les div principaux, les id)
a écrit :

#logo {
width:145px;
height:145px;
left:0px;
top:0px;
position:relative;
background-color:#8F0000;
}
#header {
width:615px;
height:145px;
left:145px;
top:-145px;
position:relative;
background-color:#8F0000;
}
#sommaire {
float:left;
width:145px;
margin-top:-145px;
background-color:#8F0000;
}
#contenu {
width:615px;
left:145px;
margin-top:-145px;
float:right;
background-color:#F2F2FF;
}
#basdepage {
width: 760px;
height: 35px;
margin:auto;
text-align: center;
background-color:#8F0000;
}


Sous IE, aucun problème (Pied de page en bas, sous fond rouge)
Sous Firefox, le pied de page se place sous le sommaire, et en plus sans le fond rouge...

Merci par avance de votre aide...
Bon heureusement : j'ai un cousin qui a déjà fait du css Smiley smile

Il a pu m'aider dans l'intégration du pied de page.

En clair, il fallait pour bien coder le css de la page, mettre :
- le logo en absolute et le header en relative
- le sommaire en absolut et le contenu en relative
- puis le basdepage dans position particulière
- => LE TOUT dans le div general.

Je n'ai eu qu'à retoucher le id contenu pour lui mettre une marge négative vers le haut de -30px pour Firefox Smiley smile et une pour le pied de page aussi.

Merci tout de même à tous ceux qui m'ont aidé et à une prochaine fois.

Cordialement,

Christopher.


P.S. => Un résolu pour fêter cela Smiley cligne
Sujet clos
Aller à