HTML/CSS : mise en page - exemple 1

by 18_102_elias

HTML

<header>
  <h1>TITRE</h1>
</header>
<div id="container">

  <nav>
    <ul>
      <li>abcdef</li>
      <li>ghijkl</li>
    </ul>
  </nav>
  
  <div id="contenu">

      <p>Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam licentia crudelitati indulta per suspicionum nebulas aestimati quidam noxii damnabantur. quorum pars necati, alii puniti bonorum multatione actique laribus suis extorres nullo sibi relicto praeter querelas et lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad voluntatem converso cruentam, claudebantur opulentae domus et clarae.</p>

      <p>Advenit post multos Scudilo Scutariorum tribunus velamento subagrestis ingenii persuasionis opifex callidus. qui eum adulabili sermone seriis admixto solus omnium proficisci pellexit vultu adsimulato saepius replicando quod flagrantibus votis eum videre frater cuperet patruelis, siquid per inprudentiam gestum est remissurus ut mitis et clemens, participemque eum suae maiestatis adscisceret, futurum laborum quoque socium, quos Arctoae provinciae diu fessae poscebant.</p>

      <p>Etenim si attendere diligenter, existimare vere de omni hac causa volueritis, sic constituetis, iudices, nec descensurum quemquam ad hanc accusationem fuisse, cui, utrum vellet, liceret, nec, cum descendisset, quicquam habiturum spei fuisse, nisi alicuius intolerabili libidine et nimis acerbo odio niteretur. Sed ego Atratino, humanissimo atque optimo adulescenti meo necessario, ignosco, qui habet excusationem vel pietatis vel necessitatis vel aetatis. Si voluit accusare, pietati tribuo, si iussus est, necessitati, si speravit aliquid, pueritiae. Ceteris non modo nihil ignoscendum, sed etiam acriter est resistendum.</p>

  </div>

</div>
<footer>
  <p>Pied de page</p>
</footer>

CSS

/* RĂ©initialisations de marges */
body, header, nav, footer, h1, p { margin:0; padding:0; }

/* Couleurs des cadres */

body { background-color: yellow; }
header, footer { background-color: gray; }
nav{ background-color: orange; }
div#contenu{ background-color: pink; }

/* Dimensions et positions des cadres */

header { height:50px;
}
nav{ width:150px; 
     float:left;
}
div#contenu{ margin-left:150px; 
             padding:10px;
}
footer { clear:both; 
         height:50px;
}