[CSS]Un Footer coupant du texte

**Deallyra** · 08/06/2007, 10h36

Bonjour,

Je voulais savoir comment empêcher mon FOOTER de couper un texte... Bon, dit comme celà, vous ne comprenez rien donc pour être plus claire, voici

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
.DeuxCol #footer
{
	position: absolute;
	bottom: 0;
}

Avec ce code, mon footer se situe en bas de ma page... C'est génial mais il y a un petit problème... J'ai fais un test et j'ai doublé le texte dans mon contenu...
De façon à le faire dépasser de la taille d'une page web normale et le problème est que le FOOTER coupe mon texte en deux... En fait non. Il ne le coupe pas.. Il se superpose sur mon texte...

Ma question était de savoir s'il était possible que mon pied de page "suive" la fenêtre?
Qu'il reste collé en bas de ma page constamment.

Merci!

**kaiser59** · 08/06/2007, 11h08

Salut,

As tu essayé ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.DeuxCol #footer
{
	clear:            both;
        width:           100%; /* j'imagine que ton footer logiquement devrait prendre toute la largeur du conteneur */
}

regarde la css sa pourrait peut être t'aider

++

**Candygirl** · 08/06/2007, 11h57

ça dépend de la manière dont ton site est monté. De toute manière un élément positionné en abolut devient invisible pour les autres. Tu peux , par exemple, appliquer un padding-bottom de la hauteur du footer à ton texte de contenu.

**Deallyra** · 08/06/2007, 11h59

en fait, le "vrai" css que j'ai pour mon footer est

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
.DeuxCol #footer
{
	background-color: #DDDDDD;
	position: absolute;
	bottom: 0;
	left: 3%;
	width: 94%;
	text-align: center;
	font-size: 15px;
}

mais... ça revient au même que celui que je vous ai donné pour le problème..
Donc je teste clear : both;
EDIT :aucun effet

**Deallyra** · 08/06/2007, 12h06

Oui mais,

Envoyé par CandyGirl

De toute manière un élément positionné en abolut devient invisible pour les autres

mettre un padding-bottom au contenu ne changera rien...
Le contenu n'a pas de taille fixe (que ce soit en poucentage ou pixel)
le padding bottom va me laisser une place vide en dessous du contenu mais c'est tout. Mon footer va rester à sa position...

A moins que je doive le mettre en relatif?

**Deallyra** · 08/06/2007, 12h11

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.DeuxCol #footer
{
	background-color: #DDDDDD;
	width: 96%;
	text-align: center;
	font-size: 15px;
	clear : both;
}

en fait, je n'avais pas(en fait plus je pense au vu des modifications que j'ai faite cette nuit) besoin qu'il soit en absolu...
et je pense surtout que c'est le clear both qui a aussi eu son rôle... merci à vous deux...

(CandyGirl, comment tu fais pour avoir réponse à tout? ^^)

**kaiser59** · 08/06/2007, 12h14

De rien

Quand la fatigue nous prend il faut arrêter l'ordi

**Deallyra** · 08/06/2007, 12h17

Je tiendrais compte de ton conseil.

**Candygirl** · 08/06/2007, 12h42

Envoyé par MimiCracra44

mettre un padding-bottom au contenu ne changera rien...
Le contenu n'a pas de taille fixe (que ce soit en poucentage ou pixel)
le padding bottom va me laisser une place vide en dessous du contenu mais c'est tout. Mon footer va rester à sa position...

Je te donne un exemple ou s'applique ce que je t'ai proposé pour empêcher le contenu et le footer de se chevaucher:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
* {margin:0;padding:0:}
html,body{height:100%;}
 
body{background-color:#CCC;}
 
#main {min-height:100%; background:#FFF;position:relative; width:760px; margin:0 auto;}
* html #main {height:100%;}
 
#content {padding-bottom:3em;}
 
h1 {margin:0;padding:0.5em 5%; background:#f00;}
 
#footer {position:absolute;bottom:0;width:100%; background:#f00;height:2em;}
#footer p {padding:0.4em 5%; background:#f00;} 
</style>
</head>
 
<body>
<div id="main">
  <h1 id="top">top</h1>
  <div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nisl eros, cursus et, blandit nec, fringilla vitae, sapien. Mauris egestas hendrerit pede. Maecenas ligula. Mauris porta. Sed faucibus, pede sit amet luctus porttitor, nisl erat consequat diam, et vulputate elit ligula sed sem. Aliquam euismod tristique turpis. Etiam pede. Proin rutrum urna. Maecenas adipiscing erat eu mi. Curabitur elit nisi, euismod non, interdum a, eleifend in, felis.
 
Nulla sed felis eu enim semper vulputate. Duis et ante facilisis nulla mattis auctor. Vestibulum eu nibh sed ligula molestie sodales. Praesent porta, sapien ac luctus lobortis, metus ipsum dignissim massa, non convallis pede erat vitae ante. Fusce vehicula diam ac lorem. Donec eget nulla. Nam accumsan varius purus. Sed urna purus, dictum ut, luctus vel, varius sit amet, diam. Duis commodo, urna sed cursus dignissim, lectus nulla suscipit nunc, et semper augue diam vitae est. Phasellus pharetra imperdiet sem.
 
Cras ante diam, euismod quis, dapibus sit amet, accumsan et, magna. Quisque quis eros. Sed convallis lobortis sapien. Nulla fringilla. Ut semper, felis ac aliquam viverra, arcu sem rhoncus tortor, sagittis aliquam tortor sem at turpis. Vivamus feugiat enim vel nisi. Nulla eu elit vitae tortor vehicula tempus. Sed vestibulum odio in tellus. Cras sit amet quam nec lacus vehicula volutpat. Phasellus a nulla. Morbi volutpat pellentesque libero. Donec ipsum tellus, mattis at, ullamcorper sit amet, hendrerit sit amet, sapien. Mauris tortor magna, rutrum elementum, malesuada id, iaculis vitae, massa. Etiam lacus lorem, tincidunt nec, condimentum ac, tincidunt ut, lorem. Morbi a sapien sollicitudin dui aliquet adipiscing. Vestibulum ut purus. Nulla ultrices, dui quis commodo blandit, orci libero fermentum arcu, ac ullamcorper purus elit ut turpis.
 
Donec fermentum sem id magna. Cras sem turpis, gravida ut, tempus vitae, feugiat eu, pede. Cras mattis ullamcorper ipsum. Nullam vel metus. Maecenas dapibus sagittis velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut luctus libero sed libero. Donec mauris tellus, scelerisque a, adipiscing vitae, venenatis sit amet, est. Integer massa velit, lacinia nec, consequat non, malesuada et, urna. Fusce eros. Proin rhoncus sollicitudin eros.
  </div>
  <div id="footer">
    <p>footer</p>
  </div>
</div>
</body>
</html>