Positionner un <table> dans une <div>

Version imprimable

Bonjour,
ça fait plusieurs jours que j'essai de positionner mon tableau en bas de ma div

Explication
J'ai une div "header" avec en fond une bannière à laquelle je veux ajouter des liens en bas dans un tableau.
Voici l'html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="header">
<table class="maTable" width="900" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <tr>
          <td><div align="center">
          <a href="index.html">Accueil</a>
        </div></td>
          <td><div align="center">
            <a href="tarifs.html">Prestations et tarifs</a>
          </div></td>
          <td><div align="center">         
            <a href="profil.html">Mon profil</a>
          </div></td>
          <td><div align="center">
            <a href="contact.html">Me contacter</a></td>
      </tr>
    </table>
  </div>

Et le CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.maTable
{
	vertical-align:bottom;
}
 
.oneColLiqCtrHdr #header
 {
	background: #DDDDDD;
	padding: 0 10px 0 0; 
	background-image: url(header1.png);
	height: 321px;
 
}

Mais le tableau ne veut pas aller se mettre en bas de ma div et mes liens sont pas placé dans la barre que j'ai prévu à cet effet.

Cordialement

23/08/2011, 14h20
MonsieurSmith
Bonjour,

Deux remarques :

1°) Pourquoi le double <tr> ?
Code:

1 2 <tr> <tr>
2°) Le dernier

Code:

<div align="center">

n'est pas fermé.

Ces petits soucis réglés, on devrait y voir plus clair...
23/08/2011, 15h33
Dranka

En effet erreurs d’inattention cependant ne change rien au problème :/

Essaie :

Code:

1
2
3
4
5
6
 
.maTable
{
	vertical-align:bottom;
             display:table-cell;
}

23/08/2011, 16h41
Dranka

Grr toujours pas ce satané tableau ne veut pas descendre en bas ^^
23/08/2011, 16h59
FirePrawn

Tu testes sous quel navigateur et version de celui-ci ?
23/08/2011, 17h08
Dranka

Je test sous google chrome, firefox et IE pour les versions j'utilise les dernières.

Bonjour,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#header {
	position: relative; /* important */
	background: #DDDDDD;
	padding: 0 10px 0 0; 
	background-image: url(header1.png);
	height: 321px;
}
.maTable
{
	position:absolute; /* important */
	bottom:0; /* important */
}
.maTable td
{
	text-align:center;
}

Avec :

Code:

1
2
3
4
5
6
7
8
9
10
<div id="header">
	<table class="maTable" width="900" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td><a href="index.html">Accueil</a></td>
			<td><a href="tarifs.html">Prestations et tarifs</a></td>
			<td><a href="profil.html">Mon profil</a></td>
			<td><a href="contact.html">Me contacter</a></td>
		</tr>
	</table>
</div>

24/08/2011, 12h05
Dranka

Un grand merci, c'est exactement ce que je voulais.
Etant donné que je n'aime pas bêtement recopier ce qu'on m'a donné pourrais-je avoir une brève explication ?

Sinon un résolu de plus pour vous :) :ccool:
24/08/2011, 12h19
Invité
Code:

1 2 3 #header { position: relative; /* important */ }
- position: relative; -> Le conteneur doit être en position "relative"
Code:

1 2 3 4 5 .maTable { position:absolute; /* important */ bottom:0; /* important */ }
le contenu (qui doit être positionné en bas par rapport à ce conteneur) :
- position:absolute; -> en position "absolue" (ne fonctionne que si le conteneur a le css : position:relative; )
- bottom:0; -> "poser en bas" (distance par rapport au bas du conteneur = 0)
24/08/2011, 13h24
Dranka

Merci c'est claire maintenant :ccool:
Bonne journée à tous ! :mouarf: