bonsoir,
pour realiser ce que tu veut faire , un tableau n'est pas forcement necessaire.
Par contre pour esperer avoir un resultat similaire dans chaque navigateur , il est fortement conseillé de s'appuyer sur les standards sans s'assoir dessus
.
a priori , 1 conteneur devrait pouvoir aider a maitriser l'aspect visuel de son son contenu a l'aide d'une feuille de style.
premiere remarque a propos du tableau ,
par defaut il va s'adapter au contenu , pour le rendre entierement visible , ses dimensions sont donc des dimensions minimales !
seconde remarque , pourquoi un tableau , car manifestement même pour un rendu visuel a la mode des année 90 , ça ne marche pas ! est -il finalement approprié aux contenus ? si oui , alors autant le gardé , si non , on devrait s'en passer .
tu donne comme dimensions et comportement de base attendu par le conteneur direct ceci en css :
height:150px;
width:250px;
overflow:hidden ;
vertical-align:bottom;
comme dit precedemment le overflow:hidden risque de ne pas avoir d'effet dans une cellule de tableau .
Mais un div (ou autre balise) oui !
usons alors d'un div comme conteneur supplementaire.
et maintenant ?
comment inverser ou contrecarrer le flux habituel ?
---> le position;absolute; ! tout a fait adapté !
alors le contenu devrait recevoir en css de base :
position:absolute;
bottom:0;
manque encore a lui donne sa position de reference en appliquant un position:relative au parent conteneur et d'assure le coup sur les fond de page transparent avec un overflow:hidden en plus .
une page d'exemple du resultat a tester :
http://gcyrillus.free.fr/trucs_css/tableaux_et_cellule_de_tailles_fixes_aligner_en-bas.html
et le code pour le copier/coller :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page d'exemple pour tester le CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" >
body {
background:#555;
font-size:75%;
}
#conteneur {
width:700px;
margin:3em auto;
padding:1em;
background:#fff;
border:6px solid #EFDC0E;
}
h1 , h2 {border-bottom:2px solid #FFDFDF;margin:1em;text-align:center;}
p {
padding:2px;
}
#table {
background-color:#66FFCC;
height:150px;
width:250px;
margin:auto;
}
.chat{
height:150px;
width:250px;
position:relative;
overflow:hidden ;
border: double 3px #999;
margin:auto;
}
#table .chat{
border:0;
}
.perche {
position:absolute;
overflow:hidden ;
bottom:0;
margin:0;
padding:2px;
list-style-position:inside;
}
li:first-letter {font-weight:bold;color:#7F1F35;padding-left:0.2em;}
li {text-indent:1em;margin-top:0.5em;}
#table td {
vertical-align:top;
height:150px;
width:250px;
}
</style>
</head>
<body>
<div id="conteneur"
<h1>chat box , sur place ou a emporté ?</h1>
<h2> sur place ! ... 15% de service en sus </h2>
<table id="table" >
<tr>
<td >
<div class="chat">
<ol class="perche">
<li>Lorem ipsum dolor sit amet, hymenaeos morbi, integer mi nulla platea viverra id, aliquam eu, non rhoncus nam quisque nec et nulla,
sed pulvinar leo erat. </li>
<li>Donec et, tempus id nullam. </li>
<li>Sed sem turpis sit itaque, tristique amet maecenas eros id penatibus. </li>
<li>Rutrum ac leo, in iaculis sem. </li>
<li>Libero vulputate ut praesent nec, orci in arcu sodales, velit quis ultrices dui, sollicitudin urna gravida velit sem. </li>
<li>Turpis praesent varius, eros eget dictum nam. </li>
<li>Et cum volutpat aenean consectetuer, sit metus, magna quam nec egestas mattis, sit amet amet, lorem blandit diam neque ante
suspendisse elit. </li>
<li>Massa aliquam morbi, arcu eleifend nulla ullamcorper dolor eu dui, ridiculus dolor phasellus, turpis ullamcorper aliquam, iaculis et
rutrum. </li>
</ol>
</div>
</td>
</tr>
</table>
<h2> a emporter ! pas de service, ni de table a debarrasser ! </h2>
<div class="chat">
<ol class="perche">
<li>Lorem ipsum dolor sit amet, hymenaeos morbi, integer mi nulla platea viverra id, aliquam eu, non rhoncus nam quisque nec et nulla,
sed pulvinar leo erat. </li>
<li>Donec et, tempus id nullam. </li>
<li>Sed sem turpis sit itaque, tristique amet maecenas eros id penatibus. </li>
<li>Rutrum ac leo, in iaculis sem. </li>
<li>Libero vulputate ut praesent nec, orci in arcu sodales, velit quis ultrices dui, sollicitudin urna gravida velit sem. </li>
<li>Turpis praesent varius, eros eget dictum nam. </li>
<li>Et cum volutpat aenean consectetuer, sit metus, magna quam nec egestas mattis, sit amet amet, lorem blandit diam neque ante
suspendisse elit. </li>
<li>Massa aliquam morbi, arcu eleifend nulla ullamcorper dolor eu dui, ridiculus dolor phasellus, turpis ullamcorper aliquam, iaculis et
rutrum. </li>
</ol>
</div>
<p> hmm div , table , ....l'un ne remplace pas l'autre, l'un sert dans l'autre et devrait même suffire !</p>
</div>
</body>
</html>
ce qui est important , c'est d'utiliser un doctype valide , avoir un bon balisage et de creuser au mieux ce que peuvent etre les valeurs css les plus appropriées au comportement attendu .
aprés on croise les doigts en souhaitant ne pas avoir trop de bug !
++
