CSS : un exemple de mise en page.
Réponse AJAX

Etude d'un exemple de mise en page avec CSS

Résultat de la mise en forme prise en exemple

Ouvrir la mise en forme dans le navigateur.

Code HTML de la page

<html> <head> <title>tests de mise en page</title> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> <table id=page> <tr> <td id=logo colspan=3>Bienvenue sur notre site... <tr> <td id=menu><div style="min-height:500px">...</div> <td id=contenu>contenu <td id=news>news <tr> <td colspan=3 id=pied>Site Web très très moche - Design © Sébastien Pastore </table> </body>

Code CSS de la page

body { background-image:url(blue-water.jpg); background-size:cover; width:800px; margin-left:auto; margin-right:auto; } #page { width:100%; border-collapse:separate; border-spacing:3px; } @font-face { font-family:"titre"; src:url("BALLW___.ttf"); } #logo { color:white; font-family:titre; opacity:0.6; text-align:center; background-color:blue; font-size:300%; } #menu { vertical-align:top; opacity:0.8; width:150px; /* le background */ background-color:#A1CAE6; background-image:url(backmenu.jpg); background-position:bottom; background-repeat:no-repeat; } #contenu { background-color:white; opacity:0.8; vertical-align:top; } #news { vertical-align:top; opacity:0.8; width:150px; /* le background */ background-color:#FFF; background-image:url(backnews.png); background-position:bottom; background-repeat:no-repeat; background-size:100% 10%; } #pied { text-align:center; opacity:0.6; background-color:blue; color:white; font-weight:bold; }

Quelques explications..

La mise en forme générale du site (logo, menu, contenu, news, pied de page) est faite grâce à un tableau :

<table id=page> <tr> <td id=logo colspan=3>... <tr> <td id=menu>... <td id=contenu>... <td id=news>... <tr>< td colspan=3 id=pied>... </table>

Le site a toujours une certaine hauteur, même s'il n'y a pas de contenu. Cela se fait grâce à min-height, que l'on applique à un div dans n'importe laquelle des cellules du tableau :

<td id=menu><div style="min-height:500px">...</div>

Le site fait 800 pixels de large et reste centré, et ce quel que soit la taille de la fenêtre. Cela se fait grâce à :

body { width:800px; margin-left:auto; margin-right:auto; } #page { width:100%; }

Remarquez les propriétés qui permettent de gérer le background : sa couleur, son image, la position de l'image, l'étirement de l'image, la transparence :

background-color:#A1CAE6; /* couleur d'arrière-plan */ background-image:url(backmenu.jpg); /* image d'arrière-plan */ background-position:bottom; /* position de l'image */ background-repeat:no-repeat; /* est-ce que l'image se répète ? */ background-size:cover; /* étirement de l'image */ opacity:0.8; /* opacité de l'arrière-plan et de l'avant-plan */

La fonte du titre a été modifiée. Cela se fait en important une nouvelle fonte, puis en l'appliquant quand on en a besoin :

@font-face { font-family:"titre"; src:url("BALLW___.ttf"); } #logo { font-family:titre; }