Partage

margin qui n'en fait qu'à sa tete

Sujet résolu

4 avril 2020 à 16:01:31

Salut, j'espère que vous allez bien,

aujourd'hui je viens avec un nouveau problème:

mon margin n'en fait qu'à sa tête, quand je fais un margin: 5px sur l'image, tout est déplacé ( meme les balises qui l'entoure )mais moi je ne veux pas tout déplacé, je veux juste déplacé l'image... et de plus si je précise le type de margin (ex: margin-right ) rien ne se déplace dans ce cas... ( ça me le fait aussi avec ma class "nav-d" )

Code html

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'><title></title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
<header id="header">
    <nav id="id-t">
        <nav id="id-r">
            <a href="index.php"><img id="logo-header" src="truepost.png" alt="logo truepost" title="truepost"></a>   
            <div class="nav-d">
                <nav><li><a href="">Accueil</a></li></nav>  
                <nav><li><a href="second.php">Profil</a></li></nav>
                <nav><li><a href="third.php">Réglage</a></li></nav>
            </div>
        </nav>
    </nav>
</header>

<scetion id="">



</scetion>

    </body>
</html>

Et le code css:

body{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: unset;
    background-color: rgb(233,233,233);
}

header{
    border: 0px solid ;
    margin-right: auto;
    margin-left: auto;
    height: 100px;
    background-color: white;
    box-shadow: 0px 0.5px 20px rgba(128, 128, 128, 0.247);
}

#id-t{

}

#id-r{
    list-style: none;
    background-color: rgba(223, 150, 13, 0.801);
    height: 90px;
    border: 0px solid;

}

#logo-header{
    width: 50px;
    height: 50px;
    display: flex;
    margin-right: 49px;
}

.nav-d{
    margin-right: 1000px
}

Maintenant le visuel avec un margin:

Avec un margin-right:

Voilà.. merci, bonne journée!

-
Edité par CentreDordi 4 avril 2020 à 16:03:36

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

AbcAbc6

4 avril 2020 à 16:38:46

Bonjour, avant de s'occuper du CSS on vas regarder pour avoir un code valide et sémantiquement correct.

Vous pouvez voir vos erreurs en passant votre code au validateur => https://validator.w3.org/

La balise <title> ne peut être vide.

La balise <scetion> n'existe pas c'est <section>.

Pourquoi une navigation dans une navigation, cela n'a pas de sens.

La balise <li> fait partie d'une liste ordonnée ou non. Donc il n'y a pas de <li> si pas de <ul> ou <ol>. <li> est enfant direct de <ul> ou <ol>.

margin-right: 1000px quand on à une si grande valeur c'est un problème de conception.

Pour quelles raisons un display: flex; sur une image??? Il n'y a pas d'enfant pour une image donc pas de flex-items possible pour cet élément. Donc inutile de préciser que l'image ce comporte comme un conteneur flex.

Que souhaitez vous faire exactement? Reposter votre code corriger si vous avez encore des problèmes.

-
Edité par AbcAbc6 4 avril 2020 à 16:39:18

CentreDordi

4 avril 2020 à 17:27:45

re,

j'ai essayé de corrigé, maintenant j'ai de nouveaux problèmes, mes li prennent toute la largeur de mon écran...

Quand je déplace l'image, cette fois-ci mon bandeau orange ne se déplace pas mais mes li se déplace toujours. Et le margin-right ne marche toujours pas.. Merci...

Html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'><title>Accueil</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
<header id="header">
    <nav id="id-t">
        <div id="id-r">
            <div id="logo-d"><a href="index.php"><img id="logo-header" src="truepost.png" alt="logo truepost" title="truepost"></a></div>
                <ul class="nav-d">
                    <li class="h-n"><a href="">Accueil</a></li>
                    <li class="h-n"><a href="second.php">Profil</a></li>
                    <li class="h-n"><a href="third.php">Réglage</a></li>
                </ul>
        </div>
    </nav>
</header>

<section id="">



</section>

    </body>
</html>

Css:

body{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: unset;
    background-color: rgb(233,233,233);
}

header{
    border: 0px solid ;
    margin-right: auto;
    margin-left: auto;
    height: 100px;
    background-color: white;
    box-shadow: 0px 0.5px 20px rgba(128, 128, 128, 0.247);
}

#id-t{

}

#id-r{
    background-color: rgba(223, 150, 13, 0.801);
    height: 90px;
    border: 0px solid;
}

#logo-d{
}

#logo-header{
    width: 50px;
    height: 50px;
}

.nav-d{
    list-style: none;
    margin-top: -36px;
}

.h-n{
    text-decoration: none;
    text-align: center;
    border: solid 1px black;
}

Et le rendu:

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

AbcAbc6

4 avril 2020 à 18:12:59

OK pour le HTML, il est normal que les <li> prennent tout l'espace disponible de son parent.

Quel est le résultat attendu pour la navigation? Vous souhaitez aligner les liens l'un à coté de l'autre? Si oui Plusieurs technques possibles : l'une d'elle est l'usage de flexbox.

Un display: flex sur le parent des <li> soit l'<ul> qui correspond à la class nav-d dans votre code. Ensuite il faudra indiquer d'autre comportement avec d'autre propriété si vous souhaitez un affichage moins "serrer".

Je vois un margin-top: -36px; pour la class nav-d, cela me fait sortir le contenu hors de la zone visible du body!

Pourriez fournie une image de ce qui est attendu comme visuel?

Pour le margin-right, il est placer sur un élément dans un block. Les block ce place les un au dessus des autres par défaut. Si le marging-right est appliquer dans le premier block de contenu, il pousse le bord droit vers la gauche, mais comme il n'y a pas de contenu sur la droite c'est du vide qui est déplacer par le margin-right. Le contenu qui est aligner par défaut à gauche n'en est pas affecter. Pour le voir indiquer une bordure à l'élément sur lequel vous appliquer le margin-right.

Le contenu du deuxième block, placer au dessous du premier, n'est pas non plus impacter par le margin-right de l'élément du premier block.

Je sais pas si je suis clair dans mon explication.

Autre information: utilisez de préférence les class pour le css et laisser les identifiants pour les ancres et le JavaScript. C'est une question de poids des déclarations.

Encore autre chose, on n'utilise rarement la propriété height pour indiquer une hauteur, utilisez de préférence min-height. Le problème se pause quand du contenu est plus important que la hauteur fixée, le design casse.

-
Edité par AbcAbc6 4 avril 2020 à 18:18:41

CentreDordi

4 avril 2020 à 19:38:12

Effectivement, margin-right ne marche pas, en revanche margin-left oui... mon cerveau....

Du coup, j'ai mis le display: flex; et c'est mieux.

css:

body{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: unset;
    background-color: rgb(233,233,233);
}

header{
    border: 0px solid ;
    margin-right: auto;
    margin-left: auto;
    min-height: 100px;
    background-color: white;
    box-shadow: 0px 0.5px 20px rgba(128, 128, 128, 0.247);
}

a:link{
    text-decoration: none;
}

#id-t{
}

#id-r{
    background-color: rgba(223, 150, 13, 0.801);
    height: 90px;
    border: 0px solid;
}

#logo-d{
}

#logo-header{
    width: 50px;
    height: 50px;
    margin-top: 41px;
    margin-left: 48px;
}

.nav-d{
    list-style: none;
    display:flex;
}

.h-n{
    text-decoration: none;
    text-align: center;
    border: solid 0px black;
    color:White;
}
.h-n:hover{
    background-color: rgba(255, 197, 89, 0.596);
}

J'ai fait un petit visuel excuse (moi pour le rendu, je dessine pas trop bien sur ordi):

Et ce que ça donne pour l'istant:

Voilà, merci pour tous tes informations que tu me donnes, je re"découvre" html/css

Je vais essayer de voir comment faire la suite ( comme montrer dans le premier image.

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

AbcAbc6

4 avril 2020 à 20:19:35

Je ferais comme ceci :

<header class="header">
            <div>
                <img src="https://via.placeholder.com/50" alt="Logo">
            </div>
            <nav>
                <ul class="menu">
                    <li><a href="#">Accueil</a></li>
                    <li><a href="#">Profil</a></li>
                    <li><a href="#">Régalge</a></li>
                </ul>
            </nav>
        </header>

Avec ce CSS

            .header {
                min-height: 100px;
                background-color: rgba(223, 150, 13, 0.801);
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .header img {
                margin-left: 50px;
            }
            .menu {
                display: flex;
                list-style-type: none;
            }
            .menu li {
                margin-right: 20px;
            }
            .menu a {
                text-decoration: none;
            }
            /*décoration visuelle d'après ce que j'ai vu de ton code */ 
            body {
                background-color: rgb(233,233,233);
            }
            .header {
                border-bottom: 5px solid #fff; /* Ce qui évite un <div> pour rien en fait  */ 
                box-shadow: 0px 0.5px 20px rgba(128, 128, 128, 0.247);
            }

-
Edité par AbcAbc6 4 avril 2020 à 20:21:09

CentreDordi

4 avril 2020 à 20:59:27

Bah dis donc, en 28 lignes et avec 1 seul essaie tu as réussi ce que je n'arrivais pas... ok merci ! Du coup tout marche! merci 1000 fois!

Je vais examiné le code, pour mieux comprendre. Encore merci ! Et bonne nuit !

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