bonsoir tout le monde !!
voili voilou, j'essaie depuis un long moment d'utiliser un table pour faire un cadre de texte qui s'agrandit verticalement en fonction du contenu...
En gros, mon tableau se décompose en 3 lignes et 3 colonnes, composé de :
les 4 coins, donc 4 images
la colonne du milieu est en rowspan="3" (le corps)
a gauche et a droite, au milieu, ce sont les images qui sont en repeat-y
Je l'ai fait validé sur w3c, et aucune erreur en transitional...
voila le résultat :
http://shinois.free.fr/cadre/cadre.html
exactement le meme fichier, mais sans aucun doctype :
http://shinois.free.fr/cadre/cadre-sans-doctype.html
la difference sans le doctype : mon tableau marche nickel, mais mon css concernant la taille du texte n'est pas respecté...
voila s'il le faut les codes html/css (avec le doctype transitional)
CSS
aucun probleme avec le validator w3c xD mais je comprends vraiment pas le probleme, mon tableau me parait juste xD
voili voilou, merci beaucoup !!
et bonne soirée
+++
Léo
Modifié par leomac (13 Nov 2007 - 09:24)
voili voilou, j'essaie depuis un long moment d'utiliser un table pour faire un cadre de texte qui s'agrandit verticalement en fonction du contenu...
En gros, mon tableau se décompose en 3 lignes et 3 colonnes, composé de :
les 4 coins, donc 4 images
la colonne du milieu est en rowspan="3" (le corps)
a gauche et a droite, au milieu, ce sont les images qui sont en repeat-y
Je l'ai fait validé sur w3c, et aucune erreur en transitional...
voila le résultat :
http://shinois.free.fr/cadre/cadre.html
exactement le meme fichier, mais sans aucun doctype :
http://shinois.free.fr/cadre/cadre-sans-doctype.html
la difference sans le doctype : mon tableau marche nickel, mais mon css concernant la taille du texte n'est pas respecté...
voila s'il le faut les codes html/css (avec le doctype transitional)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<link rel="stylesheet" media="screen" href="css.css">
</head>
<body>
<div id="cadre">
<table>
<tr>
<td id="cadre_hg"></td>
<td id="cadre_corps" rowspan="3">
<div class="cadre_contenu">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ipsum tellus, rutrum eu, pharetra nec, lacinia id, neque. Aenean vehicula purus in sapien. Nulla semper enim sit amet velit. Phasellus dictum erat id turpis. Nam consectetuer felis et dui. Aliquam faucibus velit in lacus. Donec cursus aliquet ligula. Duis et eros. Phasellus porta posuere velit. Donec auctor posuere lacus. In ornare, nisi vitae lacinia pellentesque, diam purus mattis leo, sit amet rhoncus nisl turpis vel odio. Cras ipsum dui, sodales at, gravida eu, suscipit eu, lorem. Vestibulum faucibus purus imperdiet dolor. Aliquam metus ipsum, porttitor a, porta et, rutrum ac, massa. Praesent massa nulla, ultricies et, fermentum nec, pretium vitae, sapien. Nullam diam tellus, pulvinar ac, porta sit amet, mattis vitae, est. Morbi ut magna non massa vulputate ornare. Nam id arcu nec dolor sodales iaculis. Donec molestie. Morbi in mi. Nunc quis dolor a elit imperdiet pellentesque. Maecenas vel eros vel metus mattis condimentum. Suspendisse mauris leo, pellentesque in, fringilla vel, sagittis nec, tellus. Maecenas vestibulum nibh et quam. Nullam nec ipsum. Aliquam id nulla. Mauris consectetuer risus ac libero.
</div>
</td>
<td id="cadre_hd"></td>
</tr>
<tr>
<td id="cadre_motifg"></td>
<td id="cadre_motifd"></td>
</tr>
<tr>
<td id="cadre_bg"></td>
<td id="cadre_bd"></td>
</tr>
</table>
</div>
</body>
</html>CSS
*
{
margin: 0;
padding: 0;
}
body
{
font-family: verdana;
font-size: 12px;
}
#cadre
{
width: 650px;
}
#cadre table
{
border-collapse: collapse;
border: none;
}
#cadre_hg
{
width: 10px;
height: 60px;
background: url("images/cadre_hg.jpg") no-repeat;
}
#cadre_hd
{
width: 10px;
height: 60px;
background: url("images/cadre_hd.jpg") no-repeat;
}
#cadre_bg
{
width: 10px;
height: 60px;
background: url("images/cadre_bg.jpg") no-repeat;
}
#cadre_bd
{
width: 10px;
height: 60px;
background: url("images/cadre_bd.jpg") no-repeat;
}
#cadre_motifg
{
width: 10px;
background: url("images/cadre_motifg.jpg") repeat-y;
}
#cadre_motifd
{
width: 10px;
background: url("images/cadre_motifd.jpg") repeat-y;
}
.cadre_contenu
{
text-align: justify;
margin: 10px;
}aucun probleme avec le validator w3c xD mais je comprends vraiment pas le probleme, mon tableau me parait juste xD
voili voilou, merci beaucoup !!
et bonne soirée
+++
Léo
Modifié par leomac (13 Nov 2007 - 09:24)