placer a gauche mon menu de nav dans le header ?

Problèmes de placement de mon menu de nav a cause de bootstrap

6 décembre 2021 à 10:16:36

Bonjour/Bonsoir

Apres avoir utiliser ce bootstrap pour mon Footer

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

Mon menu de navigation et totalement déplacer et se met en dessous de mon logo (Normalement le menu doit êtres a droite)

Ayant rechercher longtemps sans rien trouver je me remet a votre aide ...

Mon code HTML:

<section>
            <header>
                <img class="logo" src="image/logo.png" alt="logo">
                <nav>
                    <ul class="navigation">
                        <li><a href="#" class="active">Home</a></li>
                        <li><a href="Video.html">Video</a></li>
                        <li><a href="Quizz.html">Quizz</a></li>
                        <li><a href="Test.html"></a></li>
                    </ul>
                </nav>
            </header>
        </section>

CSS:

section {
    position: relative;
    width: 100%;
    padding: 100px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
 
header {
    background-color: #333;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 25px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}
 
 
 
header .logo{
    position: relative;
    cursor: pointer;
    display: inline-block;
    width: 310px;
    margin-left: -2%;
}
 
header ul{
    position: relative;
    display: flex;
}
 
header ul li{
    list-style: none;
}
 
header ul li a{
    display: inline-block;
    color: #E70303;
    font-weight: 600;
    font-size: 1.1em;
    margin-left: 10px;
    display: inline-block;
    padding: 8px 18px;
    text-decoration: none;
    user-select: none;
}
 
header ul li a.active,
header ul li a:hover
{
    background-color: #970000;
    color: #FFFFFF;
    border-radius: 30px;
}
 
.lpu
{
    width: 45%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
}

Merci de votre aide

ChrisLebure

6 décembre 2021 à 13:20:22

Bonjour,

j'ai testé les codes en local, le menu est bien placé à droite. Le problème vient donc d'autre chose. Pourquoi appeler bootstrap alors que tu ne l'utilises pas du tout ? Le problème doit venir de là, utilises l'inspecteur web pour voir les sélecteurs impactés par bootstrap

d'autre part :

l'utilisation d'une section ici est incorrecte, et en plus fautive avec du padding + largeur 100%, valeur par défaut

donc supprimer cette section

Le reste je n'ai pas regardé en détail mais à l'écran tout semble correct sauf la margin left négative sur le logo, quel intérêt ? il vaut mieux changer le padding left du <header>

-
Edité par ChrisLebure 6 décembre 2021 à 13:26:50

Wolrc

10 décembre 2021 à 9:36:25

Bonjour,

j'avez oublier de préciser mais j'utilise bootstrap pour mon footer ^^'

merci de m'avoir trouver l'erreur avec padding + largeur 100%

D'autre part le margin left négative sur le logo et la pour déplacer un peut le logo car de base est trop coller au bord

Mais pour le problèmes du menu peut êtres du a la résolutions de mon écran ?

-
Edité par Wolrc 10 décembre 2021 à 9:39:40

ChrisLebure

10 décembre 2021 à 16:07:15

pour le logo trop collé, diminue le padding-left de son parent plutôt que de mettre une marge négative au logo.

le problème du menu vient très probablement de bootstrap : si tu n'appelles plus bootstrap, que devient le problème ?

Remets Bootstrap et utilise l'inspecteur web pour repérer quels sont les propriétés de ta feuille de style qui sont remplacées par des propriétés de Bootstrap.

Si on pouvait voir la page sur son serveur, ou au moins un codepen complet pour repérer le problème...

Wolrc

13 décembre 2021 à 14:20:54

Hey merci pour le logo sa fonctionne aussi

Le problèmes viens de Bootstrap cela et certain le seul problèmes est que je l'utilise pour mon footer et donc il met impossible de le retirer

(Si je le retire pour tester tout reviens a la normal et le menu retourne a droite)

Voila se que cela me donne quand je met

J'ai surligner en rouge se qui est pour moi le problème La valeur "2306" mais je ne ses ou et comment la modifier

TidianeColonel

13 décembre 2021 à 15:47:48 - Message modéré pour le motif suivant : Merci d'utiliser le bouton code du forum pour insérer votre code