Délimitation des asides dans la section par CentreDordi - page 1

Bonjour,

J'ai mes articles, asides, navigation, mais le problème est qu'ils ne sont pas délimiter du tout dans la section. Ils sortent des bordures de la section...

<!DOCTYPE html>

<html>
    <head>
    <meta charset="utf-8">
    <title>Acceuil</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body class="body-a">
        <header class="menu-head">
            <figure>
                <a href="index.html"><img id="logo" src="image/logo.png" alt="logo ******"></a>
            </figure>
            <nav class="box-menu">
                <dt id="menu-barre">
                    <a class="menu-link" href=""><li class="menu-lign">Acceuil</li></a>
                    <a class="menu-link" href="Profil.php"><li class="menu-lign">Profil</li></a>
                    <a class="menu-link" href="Test.php"><li class="menu-lign">*******</li></a>
                </dt>
            </nav>
        </header>
        <section class="sec-first-a">
          <section class="sec-acceuil">
             <H5 class="h5-acceuil"><strong>VOTRE ACCEUIL</strong></H5>
            
            <?php
            $date = date('r');
            echo $date;
            //
            $i= 0;

            while ($i<10){
                echo '<table style="weight: 40em">';
                if ( ($i % 2)==0){
                    echo '<tr style="background-color: #ffffff"';
                }
                else {
                    echo '<tr style="background-color: #cccccc"';
                }
                echo '<td style="text-align: center">'. $i .'</td>';
                echo '</tr>';

                $i++;
            }  

            ?>

         </section>

         <nav class="nav-droit">
            <p>Le lien pour la page php: <a class="hover-p" href="fichier.php"> page php</a>
            </p>
         </nav>
        </section>

        <footer> 
            <p class="footer-p"> Copyright © ******</p>
        </footer>
    </body>
</html>

De plus, après avoir mis du php, tout décale !...

Pour le code css, c'est le grand bazard... même moi je ne sais pas pourquoi j'ai mis des choses parfois inutiles... bonne chance.. : ( je ne me environ que les plus importants, je ne m'y trouve pas dans mon code... ):

body {
    font-family: sans-serif;
    background-color: #E2E2E2;
    border: solid 0em;
}
#phptest {
    background-color: white;
}
#logo {
    max-width: 2.4em;
}

aside {
    width: 50px;
    height: 50px;
}

.boite-profil {
    flex-wrap: scroll;
}

.block:nth-child(1) {
    border: solid 0.07em #D8D8D8;
    border-radius: 0.5em;
    background-color: #E8E8E8;
    width: 22em;
    height: 33em;
    margin-left: 27%;
    margin-top: -7%;
}

.block:nth-child(2) {
    border: solid 0.07em #D8D8D8;
    border-radius: 0.5em;
    background-color: #E8E8E8;
    width: 22em;
    height: 33em;
    margin-left: 27%;
}

.div-aside {
    margin-left: 56%;
    margin-top: -69em;
    }

.block-a:hover {
    border: solid 0.07em #D8D8D8;
    border-radius: 0.5em;
    background-color: #E8E8E8;
    width: 20em;
    height: 15em;
    margin-left: 56%;
    margin-top: -69em;
    }

.menu-link {
    list-style: none;
    color: black;
    text-decoration: none;
    margin-right: 10px;
    max-width: 104px;
    max-height: 20px;
}

.menu-lign {
    max-width: 104px;
    max-height: 20px;
}

li:hover {
    color: #111111;
}

.menu-lign:hover {
    border: solid black 0.07em;
    background-color: grey;
    max-width: 104px;
    max-height: 20px;
}


.boite:nth-child(1) {
    border: 0.1em solid;
    height: 60px;
    width: 220px;
    color: black;
    background-color: black;
}

.boite:nth-child(2) {
    border: 0.1em solid;
    height: 60px;
    width: 220px;
    color: yellow;
    background-color: yellow;
}

.boite:nth-child(3) {
    border: 0.1em solid;
    height: 60px;
    width: 220px;
    color: pink;
    background-color: pink;
}

.boite:nth-child(4) {
    border: 0.1em solid;
    height: 60px;
    width: 220px;
    color: green;
    background-color: green;
}

.boite:nth-child(5) {
    border: 0.1em solid;
    height: 60px;
    width: 220px;
    color: blue;
    background-color: blue;
}

.boite:nth-child(6) {
    border: 0.1em solid;
    height: 60px;
    width: 220px;
    color: red;
    background-color: red;
}

#conteneur {
    border: #666666 0.1em solid;
    display: flex;
    width: 1000px;
    height: 60px;
    flex-wrap: wrap;
    overflow: auto;
    

}

.sec-acceuil {
    border: #D8D8D8 solid 0.07em;
    border-radius: 5px;
    min-width: 63.8em;
    max-width: 63.8em;
    min-height: 40em;
    max-height: 40em;
    background-color: white;
    box-sizing: border-box;
    order: 1;
    border-top-right-radius: 0%;
    border-top-left-radius: 0%;
    flex-wrap: scroll;
    text-wrap: scroll;
}

.h5-acceuil {
    text-align: center;
}

.sec-first-a {
    display: flex;
    margin: center;
}

.menu-head {
    background-color: #A9A9A9;
    min-width: 78.8em;
    max-width: 78.8em;
    min-height: 8em;
    max-height: 8em;
    margin: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

#logo {
    margin-left: -32em;
    margin-top: -0.7em;
}

.nav-droit {
    border-right: solid 0.07em #D8D8D8;
    min-width: 15em;
    max-width: 15em;
    min-height: 40em;
    max-height: 40em;
    order: 2;
    padding-left: 0.1em;
    margin-right: 6em;
}

.hover-p {
    color: blue;
    text-decoration: none;
}

.hover-p:hover {
    color: purple;
    text-decoration: underline;
}

footer {
    font-size: 0.7em;
    justify-content: center;
    align-items: center;
    flex: center;
    margin: center;
}

#menu-barre{
    display: flex;
    margin-top: 4.5em;
    justify-content: space-around;
}

.rienn {
    border: solid 0.07em #D8D8D8;
    border-radius: 5px;
    text-align: center;
}

.seule {
    text-decoration: none;
    color: purple;
}

.seule:hover{
    color: red;
    text-decoration: underline;
}

.date{
    color: red;
}

.nob{
    color: red;
}

Wow, vas-y doucement XD, alors déjà je ne savais pas que les 'li' avaient des éléments parents, donc qui sont-ils ? Sur internet ça me sort autre chose...

Ensuite, les balises 'dt' toutes seules ? Pourtant sur internet c'est comme ça qu'ils le font tous...

Ensuite pour les balises 'a', je n'ai pas trouvé d'autre moyen, et sur internet, c'est comme ça qu'ils le font...

Pour les balises 'tr', effectivement, c'est déjà mieux...

Et enfin, c'est internet qui m'apprend à programmer donc ça doit être pour ça que suis autant mauvais...

PS: Penses-tu que je devrais recommencer mon code à 0? Parce que là c'est un peu n'importe quoi non?

-
Edité par CentreDordi 17 mars 2020 à 16:43:21

CentreDordi

17 mars 2020 à 15:23:07

Et tu auras dans cette petite ruelle au nom d'explore, une petite pièce d'or.

Lartak

17 mars 2020 à 15:32:29

Bonjour.

Tu as un gros problème de syntaxe HTML, une balise `dt` toute seule, une balise `a` qui entoure un `li`, des `li` sans leur élément parent.

Si le code PHP provoque le décalage, c'est parce que les deux balises `tr` d'ouverture ne sont pas correctes.

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

17 mars 2020 à 16:40:06

17 mars 2020 à 16:59:05

Je ne sais pas ou tu as vu qu'ils faisaient comme ça sur internet, mais les sites sur lesquels tu as vu ça, ils donnaient forcément de mauvais exemples.

La balise a, tu l'a met à l'intérieur du `li`.

Une balise `dt`, est une sous-balise de la balise `dl`.

`dl`: Definition List
- `dt`: Definition Title
- `dd`: Definition Description

dt : l'élément pour le terme d'une description - HTML (HyperText Markup Language) | MDN

li - HTML (HyperText Markup Language) | MDN

-
Edité par Lartak 17 mars 2020 à 17:00:49

17 mars 2020 à 17:27:28

Ok merci pour ces exemples.. Je me corrige!

Délimitation des asides dans la section

Délimitation des asides dans la section

Supprimer

Modérer

Signaler le message aux modérateurs