recherche code css pour faire habillage

**kinouplay** · 07/02/2022, 12h39

Personnes pour m'aider ?

**MICHEL DEDANS** · 07/02/2022, 13h45

Bonjour Kinouplay,
je reviens vers toi avec le code dans la journée dès que je trouve un petit moment.

**kinouplay** · 07/02/2022, 15h38

Super merci beaucoup.

**MICHEL DEDANS** · 07/02/2022, 16h06

Me revoilà !

ça doit être pas mal comme ça :

<head>
<style>
.p-1 {
background-color: #ecf0f1;
border-radius: 4px;
color: black;
width: 100%;
height: 40px;
border-bottom: grey 1px solid;
}
.p-1>span {
margin-left: 10px;
line-height: 35px;
font-size: 20px;
font-weight: 600;
}
.p-2 {
margin-top: 5px;
}
.p-2>span {
margin-left: 10px;
line-height: 20px;
}
.notes {
border: grey 1px solid;
border-radius: 4px;
height: 70px;
}
</style>
</head>
<body>
<div class="notes">
<div class="p-1">
<span>Notes recette</span>
</div>
<div class="p-2">
<span>Recette de la tourte aux anchois</span>
</div>
</div>
</body>

Je pense pas que ça soit le plus optimisé mais ça fonctionne. Redis moi.

**kinouplay** · 07/02/2022, 17h07

Merci pour le code, je l'ai mis, mais ça me donne ça (voir la capture) du coup ça fait la même chose chez toi ? je l'ai testé sur firefox. Il n'y a pas le bandeau gris au dessus, comme sur mon exemple plus haut ?

**Helloo** · 07/02/2022, 18h05

Le code de Michel est correct, le résultat est:

**kinouplay** · 07/02/2022, 20h10

En effet ça marche, j'avais oublier le href du css

Par contre (je souhaiterai insérer le code dans) :

J'utilise grid-template-areas et quand j'insère le code ça marche plus, es-ce qu'il faut modifier certaines choses pour que ça marche dans ce cas ?

**MICHEL DEDANS** · 08/02/2022, 08h23

Est-ce que tu pourrais m'envoyer ton code grid area stp ? Je n'ai jamais utilisé cette feature css et je suis curieux d'apprendre

**kinouplay** · 08/02/2022, 09h33

Bonjour Michel, pas de soucis, le voici (je l'ai mis ici, mais es-ce qu'il y a un autre moyen de t'envoyer les deux fichiers ?)

Je débute en css (certainement il y a des erreurs dans mon code, des fois je sors les rames "rires")

la forme du bouton pour le "footer" j'aimerai qu'il soit comme le code que tu m'as fourni plus haut.

Fichier css que j'ai appelé : grid.css

html{
background: rgb(250, 250, 250);
font-family: 'Open Sans', 'Arial', sans-serif;
}

body{
margin:25px auto;/*marge en haut et en bas*/
width: 1200px;/*définir sa largeur*/
background: white;/*fond blanc*/
display: grid;/*on attribut "grid" au PARENT Body, car on veut que tous les éléments soient l'un à côté de l'autre*/
grid-template-columns: 25% 25% 25% 25%;/*(on attribut le nombre et la largeur de chacune des colonnes (ici 4 colonnes)*/
grid-template-areas:
"titre titre titre titre"/*je veux que le Header prenne toute la largeur de la grille (puisque l'on a 4 colonnes)*/
"soustitre soustitre soustitre soustitre"/*je veux que le Header prenne toute la largeur de la grille (puisque l'on a 4 colonnes)*/
"photo1 photo1 histoire histoire"/*je veux que photo et histoire prennent la moitié de la page*/
"footer footer footer footer"/*le footer va prendre toute la largeur de la grille*/
}

body > *{
padding: 20px;
}/*le chevron > permet de sélectionner tous les ENFANTS directement du body "PARENT"*/

.titre{
grid-area: titre;/*on attribue le nom qui sera reconnu plus haut dans "grid-template-areas"*/

/*forme et habillage du bouton*/
opacity: 1;
background-color: #f0f1f2;
color: white;
border: 1px solid #000;
border-radius: 4px;
margin: 6px;
padding: 13px;
text-align: center;
color: black; /*le texte sera en noir*/
width: 100%%;
height: 60px;

}

.soustitre{
grid-area: soustitre;/*on attribue le nom qui sera reconnu plus haut dans "grid-template-areas"*/

/*forme et habillage du bouton*/
opacity: 1;
background-color: #fff;
color: white;
border: 1px solid #000;
border-radius: 4px;
margin: 6px;
padding: 13px;
text-align: center;
color: black; /*le texte sera en noir*/
width: 100%%;
height: 60px;
}

.photo1{
grid-area: photo1;/*on attribue le nom qui sera reconnu plus haut dans "grid-template-areas"*/

/*forme et habillage du bouton*/
opacity: 1;
background-color: #fff;
color: white;
border: 1px solid #000;
border-radius: 4px;
margin: 6px;
padding: 13px;
text-align: center;
color: black; /*le texte sera en noir*/
width: 100%%;
height: 60px;

/*redimensionnement de l'image automatiquement JE NE SUIS PAS DU TOUT SUR DE CE CODE!!!*/
img {
max-width: 100%;
height: auto;
}
}
.histoire{
grid-area: histoire;/*on attribue le nom qui sera reconnu plus haut dans "grid-template-areas"*/

/*forme et habillage du bouton*/
opacity: 1;
background-color: #fff;
color: white;
border: 1px solid #000;
border-radius: 4px;
margin: 6px;
padding: 13px;
text-align: center;
color: black; /*le texte sera en noir*/
width: 100%%;
height: 60px;
}

.footer{
grid-area: footer;/*on attribue le nom qui sera reconnu plus haut dans "grid-template-areas"*/

/*forme et habillage du bouton*/
opacity: 1;
background-color: #fff;
color: white;
border: 1px solid #000;
border-radius: 4px;
margin: 6px;
padding: 13px;
text-align: center;
color: black; /*le texte sera en noir*/
width: 100%%;
height: 60px;
}

/* rendre responsif - adaptation aux divers écrans*/

@media(max-width: 1200px){
body{
width: 100%;
margin: 0;
}
}

@media(max-width: 900px){
body{
grid-template-areas:
"titre titre titre titre"/*je veux que le Header prenne toute la largeur de la grille (puisque l'on a 4 colonnes)*/
"soustitre soustitre soustitre soustitre"
"photo1 photo1 histoire histoire"
"footer footer footer footer"/*je veux que le footer prend toute la largeur de la grille*/ ;
width: 100%;
margin: 0;
}
}

@media(max-width: 600px){
body{
grid-template-areas:
"titre titre titre titre"/*je veux que le Header prenne toute la largeur de la grille (puisque l'on a 4 colonnes)*/
"soustitre soustitre soustitre soustitre"
"photo1 photo1 photo1 photo1"
"histoire histoire histoire histoire"
"footer footer footer footer"/*je veux que le footer prend toute la largeur de la grille*/ ;
width: 100%;
margin: 0;
}
}

Fichier html que j'ai appelé : grid.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">

<title>Grid css</title>
<link rel="stylesheet" type="text/css" href="grid.css">
</head>
<body>
<aside class="titre">
<h1>Titre</h1>

</aside>

<aside class="soustitre">
<h1>sous titre</h1>
</aside>

<aside class="photo1">
<h1>photo1</h1>
</aside>

<aside class="histoire">
<h1>histoire</h1>
</aside>

<aside class="footer">
<h1>Footer</h1>
</aside>
</body>
</html>

**MICHEL DEDANS** · 08/02/2022, 11h06

Merci. Je regarde ça dans la journée et je te fais un retour.

**kinouplay** · 08/02/2022, 11h37

Je te remercie.

**kinouplay** · 10/02/2022, 09h30

Bonjour, Michel, plus de nouvelle, ça va ?

recherche code css pour faire habillage

recherche code css pour faire habillage

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association