Discussion :

[Dranka]

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 :

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
<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 :

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

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

[MonsieurSmith]

Bonjour,

Deux remarques :

1°) Pourquoi le double <tr> ?

Code :

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

1
2
      <tr>
      <tr>

2°) Le dernier

Code :

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

<div align="center">

n'est pas fermé.

Ces petits soucis réglés, on devrait y voir plus clair...

[Dranka]

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

[FirePrawn]

Essaie :

Code :

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

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

[Dranka]

Grr toujours pas ce satané tableau ne veut pas descendre en bas ^^

[FirePrawn]

Tu testes sous quel navigateur et version de celui-ci ?

[Dranka]

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

[Invité]

Bonjour,

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
#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 :

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

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>

[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

[Invité]

Code :

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

1
2
3
#header {
	position: relative; /* important */
}

- position: relative; -> Le conteneur doit être en position "relative"

Code :

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

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)

[Dranka]

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