Bonjour ^^,

Alors je ne savais pas exactement comment titrer ce problème, je suis actuellement en formation html-css et je me retrouve devant une grosse difficulté... Je dois faire un site statique en html-css contenant plusieurs pages, tout allait bien jusqu'à ce que j'arrive à cette étape, voilà à quoi doit ressembler la page en question :

Et voici de mon côté à quoi elle ressemble : 

Alors oui je sais il y a des titres et des alignements incorrects dans ma page mais ça je le ferais plus tard ^^, ce qui m'intéresse pour le moment c'est la barre de menu "Accueil, présentation, informations pratiques, etc...", vous remarquerez que celle que je dois obtenir possède un background rouge qui fait toute la ligne du menu, et ça... Je sais pas du tout comment faire, voici ce que j'ai fait sur ma page "informations pratique" et sur mon css :

Et le css :

body {

    width: 960px; 

    margin-left: 50px; 

    font-family: Verdana, Arial, sans-serif;

}

h1 {

    font-size: 24px;

    color: #000000;

}

h2 {

    font-size: 18px;

    color: #000000;

}

blockquote, q{

margin: 90px;

background-color: #ededed;

border: #aa3322;

color: #000000;

font-size: 16px;

width: 450px;

}

table {

border-collapse: collapse;

width: 600px;

    text-align: center;

}

thead {

    color: #000000;

font-size: 14px;

}

th, td {

border: 1px #aa3322 solid;

    color: #000000;

font-size: 12px;

padding: 7px 7px 7px 14px;

}

a:link {

font-size: 14px;

    color: #aa3322;

}

a:hover {

    color: #aaaaaa;

}

.menu {

width: 100px;

background-color: #aa3322;

border: #cccccc;

color: #cccccc;

font-size: 12px;

}

.menu:hover {

color: #ffffff;

}

.texte {

font-size: 14px;

    color: #000000;

}

#footer{

margin: 90px;

width: 1000px;

height: 50x;

padding: 15px 25px 25px 15px;

background-color: #aaaaaa;

color: #721717;

font-size: 14px;

    text-align: center;

}

Voilà, étant vraiment débutant complet dans ce domaine et n'ayant aucune info à ce sujet dans ma formation, je suis complètement perdu :'(, si quelqu'un pouvait m'aider à trouver une solution je lui en serait fortement reconnaissant !

-
Edité par Kinnison27 17 septembre 2021 à 8:48:01

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

• Charte de bonne conduite
• Règles générales du forum

Bonjour, au lieu d'utiliser une liste de définition, utilise un simple liste <ul> avec les items de listes <li>, si tu en retire les marges par défaut, la liste prendra toute la largeur de son parent.

Bonjour AbcAbc6 ^^,

Déjà merci de ta réponse ! Alors j'avais fait ça à l'origine mais la seule chose qui change c'est que ça met des puces, je viens de réessayer d'ailleurs ça donne ça :

Que veux tu dire par retirer les marges par défaut ? 

-
Edité par Kinnison27 17 septembre 2021 à 8:51:06

Bonjour, tu as édité ton message pour mettre en forme le CSS mais pas le HTML!!

Pourquoi indiques tu une largeur de 100px à tes liens?

Les puces de la liste ce n'est que du visuel, tu les enlèves en CSS.

>> Que veux tu dire par retirer les marges par défaut ?

Que certain élément HTML comme p, h1, ul on un style que les navigateurs applique. C'est le style par défaut. Notamment il existe des marges pour ces éléments.

Exemple de code :

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>menu</title>
        <style>
            body {
                margin: 0;
            }
            h1 {
                color: #aa3322;
                padding-left: 50px
            }
            .menu ul {
                list-style-type: none;
                padding: 0 0 5px 0;
                
            }
            .menu li {
                border-bottom: #fff dashed 1px;
                margin-bottom: 3px;
                padding: 0 0 5px 50px;
            }
            .menu  {
                background: #aa3322;
            }
            .menu a {
                color: #cccccc;
            }
            
        </style>
    </head>
    <body>
        <h1>Informations pratiques</h1>
        <nav class="menu">
            <ul>
                <li><a href="#">item1</a></li>
                <li><a href="#">item2</a></li>
                <li><a href="#">item3</a></li>
                <li><a href="#">item4</a></li>
                <li><a href="#">item5</a></li>
            </ul>
        </nav>
    </body>
</html>