Ok, donc voici les tableaux dans le tableau.
Tu as fait des erreurs de calcul entre l'apparence de ton schéma et les dimensions.
J'ai corrigé les plus flagrantes et celles moins importantes, j'ai respecté les dimensions.
A toi de voir si tu veux les adapter "pixel près" ou non. C'est assez simple à suivre avec les identifiants et le CSS.
Le HTML :
- Code:
<table class="gentablo" width="100%" align="center" border="0" cellspacing="0" cellpadding="0"><tr><td colspan="3" align="center" valign="middle">
<table class="outcontexte" width="100%" align="center" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="middle"><div style="padding: 12px 0;">CONTEXTE</div></td></tr>
<tr><td align="center" valign="middle"><div class="incontexte">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor risus euismod odio tristique accumsan. Vivamus malesuada, felis a vehicula tincidunt, erat magna sagittis lorem, sed sagittis sapien erat ac lorem. In porta mauris non dui hendrerit dignissim. Fusce in erat in lacus egestas tincidunt et sed metus. Ut porta, diam non posuere varius, lectus lacus pretium sapien, eget porta velit nibh et tellus. Ut auctor semper consectetur. Vestibulum quis justo justo. Curabitur porttitor tincidunt velit et iaculis. Sed vel lobortis mi. Donec vel fermentum arcu. Praesent vel arcu lectus, id vestibulum turpis. Duis commodo tristique adipiscing. Sed tempus risus a felis gravida elementum.
<br />
Donec tortor odio, luctus quis molestie quis, feugiat cursus mauris. Vivamus pulvinar tristique urna a gravida. Donec posuere aliquet neque, et semper nisi euismod eget. Nulla et diam nibh, ut luctus purus. Duis ultricies, dolor a luctus feugiat, tortor diam faucibus nibh, nec posuere tortor quam a lorem. Integer lacinia tristique lorem porta dapibus. In at diam velit. Sed rhoncus, sapien at porta vestibulum, nulla dolor tincidunt mauris, vitae laoreet odio mi rutrum enim. Praesent fermentum sodales rhoncus. Fusce id risus vitae odio interdum viverra a sit amet nibh. Nam bibendum volutpat libero, et consectetur risus tincidunt quis. Phasellus at mauris diam. Nulla at eros erat, ac gravida sapien.
<br />
Phasellus ipsum dolor, tincidunt ac scelerisque in, bibendum ut ipsum. Donec tristique neque eget ligula euismod in blandit enim molestie. In vulputate dignissim nulla nec tincidunt. Donec rhoncus, tellus in viverra dictum, lorem tellus suscipit nisl, sagittis ultrices quam tellus ut tellus. Mauris et metus ac quam ultrices malesuada et rhoncus dolor. Mauris elementum felis quis ipsum molestie sollicitudin. Etiam vitae aliquam libero. Donec vestibulum erat at dui dictum in tincidunt lacus ultrices.
<br />
Sed scelerisque interdum volutpat. Vestibulum sed velit id lacus fringilla tristique ac non lorem. Maecenas at est ut mi euismod rutrum in a est. Maecenas et neque diam, fermentum rutrum lectus. Phasellus sodales, nulla in congue viverra, diam nulla pretium metus, eget vulputate mi ligula eu lorem. Donec vehicula arcu vitae nibh tincidunt vitae fringilla magna pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur dictum dui et libero interdum at pharetra lacus tempor. In condimentum, urna non auctor volutpat, nisl nibh lobortis ipsum, rutrum lacinia orci nibh a odio. Curabitur eget libero congue mi iaculis euismod sit amet vitae felis. Nunc eu ante vel neque dapibus elementum convallis at nulla. Sed a rutrum lacus. Curabitur magna dolor, porttitor ac congue eget, placerat ac augue. In sit amet est elementum erat eleifend consectetur a ac leo. Duis vel justo in arcu imperdiet vulputate tempus sed risus. Proin lacinia imperdiet consequat.
</div>
</td></tr></table>
</td></tr>
<tr><td colspan="2" align="center" valign="middle">
<table class="outpredefinis" width="100%" align="center" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="middle"><div style="padding: 12px 0;">PREDEFINIS</div></td></tr>
<tr><td align="center" valign="middle"><div class="inpredefinis">
</div>
</td></tr></table>
</td>
<td rowspan="2" align="center" valign="middle">
<table class="outtp" width="100%" align="center" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="middle"><div style="padding: 12px 0;">TOP PARTENAIRES</div></td></tr>
<tr><td align="center" valign="middle"><div class="intp">
</div>
</td></tr></table>
</td></tr>
<td ralign="center" valign="middle">
<table class="outstaff" width="100%" align="center" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="middle"><div style="padding: 12px 0;">STAFF</div></td></tr>
<tr><td align="center" valign="middle"><div class="instaff">
</div>
</td></tr></table>
</td>
<td align="center" valign="middle">
<table class="outlinks" width="100%" align="center" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="middle"><div style="padding: 12px 0;">LIENS UTILES</div></td></tr>
<tr><td align="center" valign="middle"><div class="inlinks">
</div>
</td></tr></table>
</td></tr></table>
En fait ce n'est qu'un tableau dans le grand tableau à chaque fois parce que le contenu est entre les balises bloc "div" pour la scrollbar (qui est partout où la hauteur est délimitée).
Dans le CSS :
- Spoiler:
.gentablo {
background: #1145ae;
width: 908px;
padding: 25px 15px;
margin: 0 auto; /*mêmes marges top-bottom et centré sur right-left*/
}
.outcontexte {
background: #165BE8;
width: 870px;
color: darkblue;
border: 1px solid #dad;
margin: 0 auto 15px;
}
.outpredefinis {
background: #165BE8;
width: 575px;
color: darkblue;
border: 1px solid #dad;
margin: 0 15px 15px 0;
}
.outtp {
background: #165BE8;
width:280px;
color: darkblue;
border: 1px solid #dad;
margin: 0;
}
.outstaff {
background: #165BE8;
width: 280px;
color: darkblue;
border: 1px solid #dad;
margin: 0 15px 0 0;
}
.outlinks {
background: #165BE8;
width: 280px;
color: darkblue;
border: 1px solid #dad;
margin: 0 15px 0 0;
}
.incontexte {
background: #165BE8;
width: 866px;
height: 223px;
color: #fff;
text-align: justify;
overflow-y: auto; /*le y détermine que la scrollbar sera en hauteur et x pour une en largeur*/
border: 1px solid #dad;
padding: 4px 7px;
margin: 0 3px 3px;
}
.inpredefinis {
background: #165BE8;
width: 571px;
height: 223px;
color: #fff;
text-align: justify;
overflow-y: auto; /*le y détermine que la scrollbar sera en hauteur et x pour une en largeur*/
border: 1px solid #dad;
padding: 4px 7px;
margin: 0 3px 3px;
}
.intp {
background: #165BE8;
width: 276px;
height: 515px;
color: #fff;
text-align: justify;
overflow-y: auto; /*le y détermine que la scrollbar sera en hauteur et x pour une en largeur*/
border: 1px solid #dad;
padding: 4px 7px;
margin: 0 3px 3px;
}
.instaff, .inlinks {
background: #165BE8;
width: 276px;
height: 223px;
color: #fff;
text-align: justify;
overflow-y: auto; /*le y détermine que la scrollbar sera en hauteur et x pour une en largeur*/
border: 1px solid #dad;
padding: 4px 7px;
margin: 0 3px 3px;
}
N'hésite pas si tu as des questions, parce que je ne sais pas si j'ai bien compris avec les couleurs de fond et avec la présence des bordures.
