Div principal et pied de page

**Delack** · 02/02/2010, 10h46

Salut à tous,

voila, j'essaie désespérément depuis hier de positionner un pied de page en dessous de mon tableau et tous en bas de ma page... mais impossible : je détaille.

J'ai un tableau avec un contenu dynamique... donc je ne sais absolument pas combien de ligne je peux avoir dans mon tableau ( voici le code pour que vous compreniez mieux mais inutile de s'attarder sur celui-ci... quoi que

)

Code :

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

1
2
3
4
5
6
<div id="divTableau" class="Texte">
 
<input type="text"size="15" /> <input type="text" size="17" /> <select><option> choix du statut </select>
 
 
</div>

(les accolade de fin ferment des test précédents)
Étant donné que j'effectue une recherche dans mon annuaire et que je ne sais pas combien de ligne va me retourner le tableau. j'ai donc fait un css en conséquence... tout est à la bonne place, sauf le pied de page qui reste tout en haut... (c'est un paradoxe pour un bien de page

)

Voici le code CSS (le divPied se trouve tout en bas du css):

Code :

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
body{
background-color:orange;
}
 
div{
position:absolute;
font-family:verdana;
font-size:small;
color:#FFFFFF;
}
 
.table th{
border : 1px solid black  ;
}
 
 
 
.petitTitre{
background-color:#AAAAAA;
font-weight:bold;
width:100%;
text-align:center;
}
 
.Texte {
text-align:left;
font-size:Medium;
color:black;
}
 
 
#divPrincipal{
width:1024px;
margin-left:-px ;
left:50%;
border : 1px solid black;
background-color:white;
 
}
 
 
#divTitre{
width:1024px;
height:200px;
background-image:url("../images/Bannière_1024.jpg");
repeat: no-repeat;
border : 1px solid black;
}
 
#divTableau{ 
top:220px;
left:1%;
border : 1px solid black;
width:83%;
}
 
#divButton{
left:85%;
width:90px;
top:220px;
height:70%;
}
 
#divPied
{
left:px;
width:%;
bottom:50%;
}

Voila... si quelqu'un aurait une idée... merci beaucoup !

Si jamais vous avez un lien pour les positionnement de div en CSS... je suis preneur... car j'essaie encore de mettre mon bas de pied en bas... mais il reste collé au plafond

**copin** · 02/02/2010, 16h04

Salut,

Alors si je comprends bien...

Tu définis l'ensemble de tes div

Code :

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

1
2
3
4
5
6
7
8
 
 
div{
position:absolute;
font-family:verdana;
font-size:small;
color:#FFFFFF;
}

Donc tout tes DIV sont en absolute.

Puis tu précises un peu la classe de ton #divpied.

Code :

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

1
2
3
4
5
6
7
8
 
 
#divPied
{
left:<?php echo $Zero ?>px;
width:<?php echo $Cent ?>%;
bottom:50%;
}

Question: Ou est ce que tu dis que ton #divpied ne dois pas être en absolute comme les autres?

T'as tenté un position:relative sur ton #divpied ??

**Delack** · 03/02/2010, 09h34

C'est un peu mieux en mettant la position de cette div en relative, car elle est placé dans ma div principal maintenant, sauf qu'elle est toujours dans le haut de ma page ( c'est à dire au meme endroit que ma banniere...)

Code :

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

1
2
3
4
5
6
#divPied
{
left:<?php echo $Zero ?>px;
width:<?php echo $Cent ?>%;
position:relative;
}

**copin** · 03/02/2010, 10h33

Bonjour,

Est ce que tu pourrais me filer un lien pour voir ce que ca donne?
Ou le code html généré sans le Php.

C'est un peu dur de visualiser sinon

**Delack** · 03/02/2010, 12h06

Heu... oui biensur

Code :

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
41
42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="./css/cssInterfaceV3.php" />  
     <script type="text/javascript" src="./javascript/js.js"></script>  
    <title>interface LDAP</title>
  </head>
 
    <body>        
      <div id="divPrincipal">
 
        <div id="divTitre">                  
        </div>
 
 
 
 
 
<div id="divTableau" class="Texte">
<input type="text"size="15" id="txtRecherche" onchange="tester()" /> <input type="text" size="17" /> <select><option> choix du statut </select> <input type="button" value="Dis quelque chose !"" id="Bonjour" />
 
<table class='table th'><tr><th>Nom</th><th>Prénom</th><th> Statut</th><th>Date d'arrivée</th><th>E-mail</th> </tr><tr><td>gatto</td><td>alexandre</td><td>Doctorant</td><td>n/d</td><td>alexandre.gatto@fresnel.fr</td></tr><tr><td>leNom</td><td>lePrenom</td><td>Post doc</td><td>01/01/2010</td><td>test@personnel.fr</td></tr></table>  
 
 
</div>
 
<div id="divButton" class="Texte">
     Ceci est l'espace pour les bouttons comme la création d'un nouveau utilisateur
     <input type="button" size="2" value="nouveau">
    <p><input type="button" value="Aide" >
</div>
 
 
 
<div id="divPied" class="petitTitre">               Institut Fresnel,UMR 6133 CNRS-Universités Aix Marseille Campus de Saint Jérôme, av. Escadrille Normandie 13397 Marseille Cedex 20   &nbsp;             
  <a href="mailto:test@free.fr">contact</a>              
 
</div> 
 </div>           
</body>
</html>

par contre je ne saisie pas en quoi cela peut t'aider... mais si ca le peut

**copin** · 03/02/2010, 15h07

Re,

En fait demander le code sert à voir si il n'y a pas des erreurs de codes genre des balises non fermées. (Pas de bol, ils y a une balise </p>; </option> manquantes ) plus quelques "" manquants pour certaines classes.

Le problème vient en fait du fait que l'ensemble de tes balises DIV étaient toutes par défaut définies en absolute.

En supprimant le position:absolute et en placant un ou deux position:relative avec une pointe de float:left;

Afin de caler ton pied de page, il te suffit maintenant de faire varier le margin-top en fonction de l'endroit ou tu souhaites le placer.

Code :

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="./css/cssInterfaceV3.php" />  
     <script type="text/javascript" src="./javascript/js.js"></script>  
    <title>interface LDAP</title>
    <style type="text/css">
body{background-color:orange;}
 
div{font-family:verdana;font-size:small;color:#FFFFFF;}
.table th{border : 1px solid black  ;}
.petitTitre{background-color:#AAAAAA;font-weight:bold;width:100%;text-align:center;}
.Texte {text-align:left;font-size:Medium;color:black;}
#divPrincipal{width:1024px;margin-left:-px ;left:50%;border : 1px solid black;background-color:white;}
#divTitre{width:1024px;height:200px;background-image:url("../images/Bannière_1024.jpg");repeat: no-repeat;border : 1px solid black;} 
#divTableau{top:220px;left:1%;border : 1px solid black;width:83%;float:left;}
 #divButton{left:85%;width:90px;top:220px;height:70%; float:left;}
 #divPied{margin:20px 0 0 0; }
	</style>
  </head>
 
<body>        
	<div id="divPrincipal">
 	   <div id="divTitre">                  
       </div>
  	   <div id="divTableau" class="Texte">
 
		<input type="text"size="15" id="txtRecherche" onchange="tester()" /> 
        <input type="text" size="17" /> <select><option> choix du statut </option></select> 
        <input type="button" value="Dis quelque chose !" id="Bonjour" />
 
<table class="table th"><tr><th>Nom</th><th>Prénom</th><th> Statut</th><th>Date d'arrivée</th><th>E-mail</th> </tr><tr><td>gatto</td><td>alexandre</td><td>Doctorant</td><td>n/d</td><td>alexandre.gatto@fresnel.fr</td></tr><tr><td>leNom</td><td>lePrenom</td><td>Post doc</td><td>01/01/2010</td><td>test@personnel.fr</td></tr></table>  
 
 
		</div>
 
		<div id="divButton" class="Texte">
     Ceci est l'espace pour les bouttons comme la création d'un nouveau utilisateur
     <input type="button" size="2" value="nouveau"/>
    <p><input type="button" value="Aide" /></p>
		</div>
 
 
 
 </div>
 <div style="clear:both;"></div>  
<div id="divPied" class="petitTitre">               Institut Fresnel,UMR 6133 CNRS-Universités Aix Marseille Campus de Saint Jérôme, av. Escadrille Normandie 13397 Marseille Cedex 20   &nbsp;             
  <a href="mailto:test@free.fr">contact</a>              
 
</div>          
</body>
</html>

Si c'est pas ca! Je rejette un oeil

**Delack** · 04/02/2010, 10h18

D'accord, je comprends mieux.

Je viens de tester cela à l'instant et c'est exactement le resultat que je cherche à avoir, maintenant il ne me reste plus qu'a le convertir ( car j'ai mes fichiers css qui sont à part de mon code html, ceux qui est nettement plus propre je trouve

)

J'ai mis en pieces jointes le résultat du coup, histoire que cela profite à tous.
Et encore merci

Div principal et pied de page

CSS

Vue hybride

Discussions similaires

Partager

Partager