Problème de bordure HTML - CSS

Fermé

Florizon10 Messages postés 4 Date d'inscription dimanche 25 décembre 2022 Statut Membre Dernière intervention 25 décembre 2022 - 25 déc. 2022 à 18:15
jordane45 Messages postés 38380 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 janvier 2025 - 25 déc. 2022 à 19:14

Bonjour,

Il y a peu, j'ai décidé de suivre des cours de html et css sur openclassroom, et, j'ai eu un problème sur les cours concernant les bordures.

Pour faire simple, ma bordure prends toute la largeur de la page et non une largeur normale, comme un bouton.

Je vous mets mon code ci-joint :

le css

h1 {
    font-size: 3.5em;
    font-family: 'Caramel', cursive;
    text-align: center;
    text-decoration: underline;

}

.positif {
    color: darkcyan;
}

.serveur {
    height: 25em;
    width: 40em;
    padding-left: 75em;
}

.bouton1 {
    border-bottom: 1px solid blue;
    border-right: 3px solid rgb(14, 126, 10);
    border-top: 1px solid blue;
    border-left: 3px solid rgb(14, 126, 10);


}

le html :

<!DOCTYPE HTML>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <link href="style.css" rel="stylesheet">
        <title>ModdedCraft</title>
        <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Caramel&display=swap" rel="stylesheet">
   </head>
    <body>
        <h1>Bienvenue sur ModdedCraft !</h1>
        <p>Voici une image du serveur.</p>
        <img class="serveur" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fattackofthefanboy.com%2Fwp-content%2Fuploads%2F2020%2F07%2FSonicEthers-Unbelievable-Shaders.jpg&f=1&nofb=1&ipt=a269bae52a0e6cf60ecbaf7c33410e72f999b7f7ed92410f96eb5fae488b5311&ipo=images" alt="Photo du serveur minecraft" title="Le serveur avec des shaders">
        <p>Ce serveur a de nombreux avantages. En voici quelque uns :</p>
        <ul class="positif">
            <li>Une communauté francaise</li>
            <li>De nombreux giveaways</li>
            <li>Des serveurs très puissants</li>
            <li>De nombreux mini-jeux</li>
            <li>Un excellent anti-cheat<li>
        </ul>
        <p class="bouton1">Élément</p>        
    </body>
</html>

Voilà les extraits, en remerciant d'avance la personne qui m'aidera.

A voir également:

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38380 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 janvier 2025 4 727
25 déc. 2022 à 18:30

Bonjour

C'est une fixe pas la largeur c'est normal que ça prenne par défaut seul de la page.

Renseigne-toi sur la propriété width

Florizon10 Messages postés 4 Date d'inscription dimanche 25 décembre 2022 Statut Membre Dernière intervention 25 décembre 2022
25 déc. 2022 à 18:43

Je vais voir ca, je vous remercie !

Florizon10 Messages postés 4 Date d'inscription dimanche 25 décembre 2022 Statut Membre Dernière intervention 25 décembre 2022
25 déc. 2022 à 18:56

Je viens de voir que la propriété width correspond à l'épaisseur de la bordure. Je m'étais mal exprimé, je voulais parler de la longueur de la bordure.

Je ne sais pas si tu vois ce que je veux dire.

jordane45 Messages postés 38380 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 janvier 2025 4 727 > Florizon10 Messages postés 4 Date d'inscription dimanche 25 décembre 2022 Statut Membre Dernière intervention 25 décembre 2022
25 déc. 2022 à 19:14

De quoi parles-tu ?

Sur une page tu as une hauteur, une largeur et pour un trait éventuellement une épaisseur...

La largeur, s'applique à l'élément HTML dont la classe est bouton1 ... Peu importe que tu lui mettes une bordure ou non...

Discussions similaires

la balise ou

ou ou

Saut de lignes sans

[html] bordure tableau

Balise