Voilà les codes...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="seminairedemuseologie.css"/>
<title>Séminaire de Muséologie</title>
<meta name="keywords" content="Université de Liège, Philosophie et Lettres, muséologie, expographie, musée, conservation, exposition, institution, Gob, Drouguet" />
<meta name="description" content="Site web du Séminaire de Muséologie de l'Université de Liège, faculté de Philosophie et Lettres." />
</head>
<body>
<div id="bloc_page">
<header>
</header>
<div id="titre_principal">
<h1>Séminaire de Muséologie</h1>
<h2>Université de Liège</h2>
</div>
<section>
<nav id="menu">
<ul>
<li id="accueil">Accueil</li>
<li><a href="menu/menu_service/Service.html">Service</a></li>
<li><a href="menu/menu_formation/Formation.html">Formation</a></li>
<li><a href="menu/menu_Recherche/Recherche.html">Recherche</a></li>
<li><a href="menu/menu_Publications/Publications.html">Publications</a></li>
<li><a href="menu/menu_musees/musees.html">Musées</a></li>
<li><a href="menu/menu_liens/liens.html">Liens</a></li>
</ul>
</nav>
<article>
<h1>Actualité</h1>
<p>Nouvelle édition du manuel "La Muséologie. Histoire, développements, enjeux actuels" sous presse !</p>
</article>
<div id="corps">
<p>Le Séminaire de Muséologie propose des formations aux grades de bachelier et de master à finalité spécialisée.</p>
</div>
<p class="photo1">
<img src="image/Canada-Montreal-Biosphère_39_.jpg" alt="Biosphère de Montréal" title="Biosphère de Montréal"/>
</p>
<p class="photo2">
<img src="image/Allemagne-Berlin-Bode Museum_5_.jpg" alt="Bode Museum de Berlin" title="Bode Museum de Berlin"/>
</p>
<p class="photo3">
<img src="image/Belgique-Grand-Hornu-MAC'S-08_7_.jpg" alt="Mac's - Grand-Hornu" title="Mac's - Grand-Hornu à Bossu"/>
</p>
</section>
<footer>
<div id="adresse">
<h2>Adresse</h2>
<p>Séminaire de Muséologie<br/>Université de Liège-bât.A4<br/>Quai Roosevelt 1B<br/> B-4000 Liège<br/>Belgique</p>
</div>
<div id="site">
<h2>Site Internet</h2>
<p>Webmaster : <a href="mailto:maangillis@gmail.com">Marie-Aline ANGILLIS</a><br/>Dernière mise à jour : 23/01/2014</p>
<nav id="info_compl">
<ul>
<li><a href="menu/info_compl/mentions.html">Mentions légales</a></li>
<li><a href="menu/info_compl/plan_site.html">Plan du site</a></li>
</ul>
</nav>
</div>
<div id="logo_unif">
<a href="http://www.ulg.ac.be/cms/c_5000/accueil"><img src="image/logo_coul_texte_blason_cadre_72_.jpg" alt="Logo de l'Université de Liège"/></a>
</div>
<div id="logo_museo">
<img src="image/logo_museo_.jpg" alt="Logo du Séminaire de Muséologie"/>
</div>
</footer>
</div>
</body>
</html>
/* Eléments principaux de la page */
body
{
font-family: "Courier New", sans-serif;
background-color: rgb(237,236,221);
}
#bloc_page
{
width: 1100px;
margin: auto;
}
h1,h2
{
color: rgb(17,121,139);
}
p
{
font-size: 15px;
color: black;
}
/* Header (En-tête)*/
header
{
display: inline-block;
vertical-align: top;
width: 1100px;
height: 200px;
background-color: white;
padding: 10px;
background-image: url("CSS/imagecss/mucem.jpg");
opacity: 0.5;
}
#titre_principal h1
{
display: inline-block;
position: absolute;
left: 50px;
top: 25px;
text-align: left;
font-size: 60px;
color: rgb(16,84,98);
text-shadow: 4px 4px 3px rgb(59,59,59);
}
#titre_principal h2
{
display: inline-block;
position: absolute;
left: 600px;
top: 110px;
text-align: left;
font-size: 35px;
color: rgba(16,84,98,0.7);
}
/* Section centrale (page principale) */
section
{
display: inline-block;
position: absolute;
top: 200px;
width: 100%;
height: 450px;
margin: auto;
}
#corps,article
{
display: inline-block;
text-align: justify;
}
section article
{
position: absolute;
right: 20px;
background-color: rgb(120,168,187);
width: 250px;
height: 400px;
padding: 15px;
margin: 5px 10px 20px 10px;
overflow: scroll;
word-wrap: break-word;
border-radius : 10px;
box-shadow: 4px 4px 3px gray;
}
article p
{
color: rgb(237,236,221);
}
article h1
{
color: rgb(55,95,117);
}
#corps
{
width: 500px;
height: 600px;
margin: 20px 15px 5px 15px;
padding: 20px;
position: absolute;
left: 300px;
overflow: scroll;
word-wrap: break-word;
}
.photo1,.photo2,.photo3
{
max-width: 20%;
max-height: 600px;
margin: 15px;
}
/* Navigation (menu) */
#menu
{
display: inline-block;
vertical-align: top;
margin : 0px 10% 20px 10%;
width: 80%;
text-align: center;
background-color: rgb(120,168,187);
font-size: 1em;
box-shadow: 4px 4px 3px gray;
}
#menu ul
{
list-style-type: none;
}
#menu li
{
display: inline-block;
margin-right: 10px;
color: rgb(237,236,221);
text-decoration: none;
}
#menu a
{
padding: 5px;
background-color: rgb(120,168,187);
color: rgb(237,236,221);
text-decoration: none;
font-weight: bold;
}
#menu a:hover
{
padding: 5px;
background-color: rgb(55,95,117);
color: rgb(237,236,221);
text-decoration: none;
font-weight: bold;
}
#accueil
{
padding: 5px;
color: rgb(237,236,221);
text-decoration: none;
font-weight: bold;
}
/* Footer (Pied de page) */
footer
{
display: inline-block;
width: 1100px;
max-height: 150px;
position: relative;
top: 750px;
padding: 15px 15px 15px 25px;
margin: 15px 15px 15px 15px;
background-color: rgb(221,220,206);
border: 5px;
border-radius: 10px 10px 10px 10px;
box-shadow: 4px 4px 3px gray;
}
#adresse,#site
{
display: inline-block;
vertical-align: top;
width: 40%;
max-height: 150px;
font-size: 0.8em;
position: relative;
left: 20%;
}
#logo_unif
{
display: inline-block;
vertical-align: top;
position: absolute;
left: 30px;
padding: 4px;
background-color: white;
border: 5px;
border-radius: 10px 10px 10px 10px;
box-shadow: 4px 4px 3px gray;
}
#logo_museo
{
display: inline-block;
position: absolute;
left: 30px;
bottom: 5%;
background-color: white;
border: 3px white solid;
border-radius: 10px 10px 10px 10px;
box-shadow: 4px 4px 3px gray;
}
#info_compl
{
display: inline-block;
vertical-align: bottom;
position: absolute;
text-align: left;
font-size: 0.9em;
}
#info_compl ul
{
list-style-type: none;
}
#info_compl li
{
display: inline-block;
text-decoration: underline;
}
#info_compl a
{
padding: 5px;
color: black;
text-decoration: underline;
font-weight: bold;
}
#info_compl a:hover
{
padding: 5px;
color: white;
text-decoration: underline;
font-weight: bold;
}
Voilà, j'ai tout mis pour être sûre !
