Consignes pour la création de la page HTML avec CSS (7 points max si fini le jour même, 5 points max si fini plus tard)
• Typo choisit (arial ?) avec taille défini (20px ?) pour l’ensemble du texte.
• La page doit avoir une marge de 5% sur les côtés gauches et droits et 1% sur le
haut et bas.
• Image (logo de l’entreprise) en haut à droite avec largeur de taille dynamique
d’environ 10% de la largeur de la page.
• « Mon identité + coordonnées » dans un bloc en haut à gauche de largeur
équivalente à 40% de la largeur de la page
• « Identité du destinataire + coordonnées » dans un bloc de largeur équivalente à
40% de la largeur de la page situé en haut à droite mais plus bas que l’image.
• Le corps de la lettre est dans un bloc d’une largeur de 90 % de la page et se
situe en dessous des blocs « identités ».
• Signature en bas dans un bloc de largeur de taille dynamique avec un retrait à
droite d’environ 20% de la largeur de la page
• Typo choisit (arial ?) avec taille défini (20px ?) pour l’ensemble du texte.
• La page doit avoir une marge de 5% sur les côtés gauches et droits et 1% sur le
haut et bas.
• Image (logo de l’entreprise) en haut à droite avec largeur de taille dynamique
d’environ 10% de la largeur de la page.
• « Mon identité + coordonnées » dans un bloc en haut à gauche de largeur
équivalente à 40% de la largeur de la page
• « Identité du destinataire + coordonnées » dans un bloc de largeur équivalente à
40% de la largeur de la page situé en haut à droite mais plus bas que l’image.
• Le corps de la lettre est dans un bloc d’une largeur de 90 % de la page et se
situe en dessous des blocs « identités ».
• Signature en bas dans un bloc de largeur de taille dynamique avec un retrait à
droite d’environ 20% de la largeur de la page
More Questions From This User See All
Lista de comentários
Réponse :
Bonsoir,
Définir la structure HTML de base :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page de lettre</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="page">
<!-- Contenu de la page -->
</div>
</body>
</html>
Créer un fichier CSS (styles.css) pour styliser la page comme suit :
/* Réinitialisation des marges et des rembourrages */
* {
margin: 0;
padding: 0;
}
/* Appliquer la police et la taille de police pour tout le texte */
body {
font-family: Arial, sans-serif;
font-size: 20px;
}
/* Définir les marges de la page */
#page {
margin: 1% 5% 1% 5%;
}
/* Positionner l'image du logo en haut à droite */
#logo {
position: absolute;
top: 1%;
right: 1%;
width: 10%;
/* Assurez-vous d'ajouter le chemin vers votre image */
background: url('votre-logo.png') no-repeat;
background-size: contain;
}
/* Bloc d'identité + coordonnées en haut à gauche */
#identiteExp {
float: left;
width: 40%;
margin-right: 20px; /* Espace entre les blocs */
}
/* Bloc d'identité du destinataire + coordonnées en haut à droite */
#identiteDest {
float: right;
width: 40%;
margin-top: 10%; /* Pour descendre en dessous de l'image du logo */
}
/* Corps de la lettre en dessous des blocs d'identité */
#corpsLettre {
clear: both; /* Évite que les blocs flottants ne chevauchent le corps */
width: 90%;
margin-top: 20px; /* Espace entre le bloc d'identité et le corps */
}
/* Signature en bas avec un retrait à droite */
#signature {
width: 80%;
margin-left: auto;
margin-right: 20%;
margin-top: 20px; /* Espace entre le corps et la signature */
}
Remplacez 'votre-logo.png' dans la définition de l'image du logo par le chemin vers votre propre image.
N'hésite pas à poser des questions
Explications :