Petit problème CSS

28 octobre 2006 à 19:00:33

Salut à tous,

Je m'entraine sur les CSS depuis un petit moment, ce qui m'amène donc à certaines interrogations. Je viens de creer un design simpliste qui me servira de base pour les prochaines sites que je voudrais creer.

Comme vous allez le voir dans le code et biensur dans l'aperçu, je voudrais placer la barre de pied de page en dessous de la colonne la plus basse.

voila le code HTML (le CSS est dedans) :

<head><title>Largeur fluide, header/menu gauche/contenu/footer.</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<link rel="stylesheet" media="screen" type="text/css" title="Essai 2" href="colonne.css" />

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
}
#entete {
position: relative;
z-index: 5;

margin-top: 5%;

margin-left: 3%;
margin-right: 3%;
width: 92%;
padding: 1%;
background-color: rgb(0, 100, 100);
}

#gauche {
position: absolute;
z-index: 10;

margin-left: 0%;
width: 30%;
padding: 1%;
background-color: rgb(100, 100, 100);
}
#centre {
position: absolute;
z-index: 10;

margin-left: 33%;
margin-right: 33%;
width: 32%;
padding: 1%;
background-color: rgb(200, 200, 200);
}
#droite {
position: absolute;
z-index: 10;
margin-left: 68%;
width: 30%;
padding: 1%;
background-color: rgb(100, 100, 100);
}

#pied {
position: absolute;
z-index: 5;

width: 98%;
padding: 1%;
background-color: rgb(250, 0, 0);
}

.menugauche {
list-style-type: none;
margin: 0;
padding: 0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
p {margin: 10px 0 10px 0;}

</style>

</head>

<body>

<div id="entete">
En tete de
</div>

<div id="conteneur">

<div id="gauche">
Colonne GAUCHES largeur 30%
<p>Chacune des colonnes doit être indépendante l'une de l'autre en hauteur ...</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
</div>

<div id="droite">
Colonne DROITE largeur 33%
<p>Chacune des colonnes doit être indépendante l'une de l'autre en hauteur ...</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>

</div>

<div id="centre">
Colonne CENTRALE largeur 33%
<p>Chacune des colonnes doit être indépendante l'une de l'autre en hauteur ...</p>
<p>P</p>
<p>P</p>
<p>P</p>
<p>P</p>
<p>P</p>
<p>P</p>
<p>P</p>
<p>P</p>
<p>P</p>
<p>P</p>
<p>POUR LE MOMENT Ca fonctionne pas trop mal SEULEMENT se pose le Problème de la DIV "pied" EN ROUGE qui ne se positionne pas en dessous de la plus haute des 3 colonnes ... Donc SI QQ UN A UNE SOLUTION ... Ca serait PARFAIT ;-) </p>

</div>

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

</body></html>

Si quelqu'un pouvait m'aider et m'expliquer le pourquoi du comment, ce serait sympa de sa part.

Merci d'avance

A bientôt

Médine

Candygirl

28 octobre 2006 à 21:56:40

En positionnant tes colonnes en absolu, tu les retires du flux. Ton pied de page ne peux donc pas se positionner comme tu le souhaites.

Une solution serait de placer tes 3 colonnes en float et appliquer un clear à ton footer positionné normalement (en static).

Médine

30 octobre 2006 à 19:04:28

merci de ta réponse je vais analyser ça je te tiens au courant ! ;-)

Médine

5 novembre 2006 à 19:21:38

Salut,

Pourrais tu être plus précise, je comprends pas très bien ce que tu entends par "clear", ou encore "float". Le problème avec ça c'est que ce ne sera pas en "fixed". Si qqn pouvais modifier le code et le corriger tout en m'expliquant serait le mieux.

Merci d'avance ;-)

the-m

5 novembre 2006 à 19:36:53

float veut dire flottant c'est une propriété CSS pour faire "flotter" ton contenu.
En gros tu vas pouvoir avoir plusieurs div qui se chevaucheront côte à côte.

Remplace tes position: absolute; par float: left; ou si ça ne marche par, remplace position: absolute; du menu de gauche par float: left; et position: absolute; du menu de droite par float: right;

Clear est aussi une propriété CSS qui "efface" les flottant : plusieurs div ne peuvent plus se chevaucher. Remplace donc le position: absolute; de ton menu par clear: both; (effacer les deux flottants)

Sinon je te renvois à la liste des propriétés CSS du cours de M@teo, partie blocs.