Superposer une forme avec des écritures

Sujet résolu

6 octobre 2021 à 22:39:46

Bonjour !

Je viens de commencer a programmer en CSS/HTML aujourd'hui et je n'arrive pas a mettre mon texte dans mon rectangle, je me suis renseigné mais pas possible de trouver. Merci d'avance et voici mon code :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Pygo</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
    <section>
        
        <h1>Pygo</h1>
        <div class="rectangle"></div>
   
    </section>  
</body>
</html>

Pour HTML

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #262626;

}

.rectangle{
    height: 850px;
    width: 500px;
    border: 20px solid blue;
    border-image: linear-gradient(to bottom, #009fff, #ec2f4b);
    border-image-slice: 1;

}

h1 {
    background-color: #262626;
    color: cornsilk;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1000%;
    justify-content: center;
    align-items: center;

}

Pour CSS

Merci d'avance !!!

zvheer

6 octobre 2021 à 22:57:33

Bonjour, tu es entrain de faire l'erreur a ne pas faire . c'est bien de vouloir expérimenté par toi meme mais faudrait deja avoir appris. Ce que je te propose c'est de continuer le cours que tu suis peut importe lequel et de faire les exercices qui te sont donnés dedans directement.

Ensuite le body 100vh n'est pas réellement utile

pareil pour le display flex et ce qui suis a la limite ca va mettre la balise section au centre de la page mais ca ne vas pas placer ton texte dans le rectangle.

Pour faire ce que tu cherches a faire je te propose ca

<div class="rectangle" >

 <h1>pygo</>

</div>

css

. rectangle

{

width:400px;

height:100px;

padding:20px;

border:solid 1px black;

et la si tu veux pour centrer il y a plusieurs manieres mais comme tu utilises display tu fais ca ici

display:flex;

flex-direction:row;

justify-content:center;

align-items:center;

}

-
Edité par zvheer 6 octobre 2021 à 22:59:00

yasakani no magatama

HugoCam__

7 octobre 2021 à 19:35:49

D'accord merci beaucoup pour ton aide !