Un parcours tumultueux
Il est parfois difficile de doter son site web ou un Intranet d'une mise en page agréable et adaptée à presque toutes les situations, je vous propose donc de vous basez sur la structure suivante (voir le schéma).
Code HTML
<body> <div id="container"> <div id="topbar"> ...(ex : logo)... </div> <div id="navbar"> ...(ex : menu horizontal)... </div> <div id="main"> <div id="column_left"> ...(ex : contenu)... </div> <div id="column_right"> ...(ex : menu vertical)... </div> <div class="spacer"></div> </div> <div id="footer"> ...(ex : pied de page)... </div> </div> </body>
Code CSS
#container{ width: 780px; margin: 0 auto; } #topbar{ width: auto; display: block; height: 80px; } #navbar{ width: auto; display: block; height: 24px; } #main{ width: auto; display: block; } #column_left { width: 560px; margin-right: 20px; float: left; } #column_right { width: 200px; float: left; } /* réinitialise les floatants */ div.spacer { clear: both; height: 10px; display: block; } #footer { width: auto; display: block; height: 24px; }
