93 lines
1.8 KiB
HTML
93 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Interface base </title>
|
|
<style>
|
|
/* Le conteneur parent pour toute l'application */
|
|
.app-layout {
|
|
display: grid;
|
|
/* Définit une grille de 2 colonnes (250px et le reste) */
|
|
grid-template-columns: 250px 1fr;
|
|
/* Définit 3 lignes de haut en bas */
|
|
grid-template-rows: auto 1fr auto;
|
|
|
|
/* Attribue un nom à chaque zone de la grille */
|
|
grid-template-areas:
|
|
"header header"
|
|
"sidebar content"
|
|
"footer footer";
|
|
|
|
/* Assure que la grille prend toute la hauteur visible */
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* 1. Placement des zones */
|
|
.header {
|
|
grid-area: header;
|
|
background-color: #333;
|
|
color: white;
|
|
padding: 10px;
|
|
}
|
|
|
|
.sidebar {
|
|
grid-area: sidebar;
|
|
background-color: #f4f4f4;
|
|
padding: 15px;
|
|
border-right: 1px solid #ccc;
|
|
}
|
|
|
|
.content-area {
|
|
grid-area: content;
|
|
padding: 20px;
|
|
/* Le défilement se produit ici si le contenu dépasse la hauteur */
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.footer {
|
|
grid-area: footer;
|
|
background-color: #333;
|
|
color: white;
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Styles pour les éléments internes (textes, boutons, etc.) */
|
|
.content-area button {
|
|
padding: 10px 15px;
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app-layout">
|
|
<header class="header">
|
|
Votre bandeau du haut
|
|
</header>
|
|
|
|
<aside class="sidebar">
|
|
Panneau latéral (ici, votre "panneau haut")
|
|
</aside>
|
|
|
|
<main class="content-area" >
|
|
<h1>Conteneur Principal</h1>
|
|
<p>Ici vous ajoutez vos éléments : textes, boutons, etc.</p>
|
|
<button>Un bouton</button>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
Bandeau du bas / Pied de page
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |