Élément qui ne s'aligne pas en HTML5

Résolu/Fermé

Watterbutter Messages postés 75 Date d'inscription jeudi 12 octobre 2017 Statut Membre Dernière intervention 5 avril 2018 - Modifié le 16 oct. 2017 à 19:59
SKYMWebDev Messages postés 162 Date d'inscription jeudi 10 novembre 2016 Statut Membre Dernière intervention 14 février 2018 - 20 oct. 2017 à 19:09

Bonsoir et au secours!

J'ai un problème très très embêtant. En fait, j'ai fait un nav, qui se positionne juste sous mon header. J'ai mis les width et height, margin en auto et donné une taille à tous les éléments. Sauf que, mon nav s'aligne sur la gauche de body, sans se centrer dans celui-ci. Aidez-moi par pitié.

Le code:

<html>
    <head>
        <title>WMP - Accueil</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/main.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <header>
            <img id="logo" src="./img/logo.png" alt="Loupe, logo du site web"/>
            <h1>What's my pass !</h1>
        </header>
            <nav>
                <a href="./index.html" rel="nofollow noopener noreferrer" target="_blank">Accueil</a>
            </nav>
    </body>
</html>

* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

html {
    background-color: #071e32;
    width: 100%;
}

body {
    width: 1024px;
    height: 720px;
    margin: auto;
}

header {
    border: 1px darkred solid;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    position: relative;
    width: 1022.4px;
    float: left;
    margin: auto;
    height: 120px;
    background-color: #0d0e10;
}

header h1 {
    padding-top: 20px;
    font-size: 70px;
    color: aliceblue;
    font-family: sans-serif;
    padding-left: 40px;
    float: left;
}

#logo {
    width: 100px;
    height: 100px;
    float: left;
    padding-top: 5px;
    padding-left: 20px;
}

nav {
    border: 1px solid #826666;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    width: 80%;
    height: 58px;
    background-color: #8c1111;
    margin: auto;
    float: left;
    position: relative;
}


nav a {
    text-decoration: none;
    font-family: sans-serif;
    font-size: 25px;
    color: white;
    float: left;
    position: relative;
    width: 120px;
    height: 40px;
    text-align: center;
}

Beurretoutmou

A voir également:

Html5 video not properly encoded
Recuperer video youtube - Guide
Montage video windows - Guide
Script vidéo youtube - Guide
Couper une video - Guide
Lecteur video pc - Guide

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
17 oct. 2017 à 11:33

Salut,

Supprime tous tes "float: left;", inutiles dans ton cas.

Supprime également le reset des margin, padding et border sur tous les éléments (*), c'est une mauvaise façon de faire : https://www.emmanuelbeziat.com/blog/les-resets-css-a-la-poubelle/

Bonne journée,

Watterbutter Messages postés 75 Date d'inscription jeudi 12 octobre 2017 Statut Membre Dernière intervention 5 avril 2018 27
17 oct. 2017 à 16:48

Salut! Le fait est que j'ai bien lu l'article du lien que tu m'a envoyé, et je ne comprend pas car je suis dans une école professionnelle, dans laquelle on nous a montrer qu'il fallait obligatoirement mettre padding et border à tous les éléments... Et aussi, le float left permet à l'objet de se placer par rapport à son parent (body en l’occurrence) . Si je l'enlève, mon nav s'affichera encore moins au centre de body...

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
17 oct. 2017 à 17:06

Étonnant que ton école préconise cette pratique, je ne trouve que des articles conseillant de l'éviter. Le style par défaut des navigateurs n'est pas là pour rien.
Si tu veux vraiment utiliser un reset css, on recommande souvent Normalize.css : https://necolas.github.io/normalize.css/

Concernant float, il ne permet pas de positionner l'élément par rapport à son parent mais permet de sortir l'élément du flux normal afin de le positionner de manière flottante : https://developer.mozilla.org/fr/docs/Web/CSS/float

Je t'invite à revoir les bases du positionnement css, la propriété "float" ne devrait pas être utile dans ta mise en page actuelle.

tartampion
18 oct. 2017 à 13:47

Yo,

ouaip voilà +1 pour l'école(ou alors c'était pour faire apprendre un truc en particulier?) et pour le float.
Suffit de traduire float = flottant, left = gauche.
Donc en disant (la propriété CSS ) flotte à gauche... bin il va flotter à gauche , donc en les supprimant il flotteront plus à gauche.

Sinon essayez (une fois les float viré puisque comme indiqué au dessus) juste d'utilier un text-align: center; (dans le body ça suffira).
Quand aux marges(internes(padding) et externes (margin) elles servent à avoir des marges donc pas du tout obligatoire, sauf si on veut des marges (qui servent aussi à positionner par le décalage qu'lles permettent).

SKYMWebDev Messages postés 162 Date d'inscription jeudi 10 novembre 2016 Statut Membre Dernière intervention 14 février 2018 174 > tartampion
19 oct. 2017 à 20:22

Il me semble que c'était ce que j'avais dit au préalable mais je me suis fait (gentiment) traiter de débutant... Mais effectivement je ne vois que cette solution là moi aussi. (Pour info: je ne suis pas débutant non, ça fait 4 ans que je développe des sites web...)

Watterbutter Messages postés 75 Date d'inscription jeudi 12 octobre 2017 Statut Membre Dernière intervention 5 avril 2018 27 > SKYMWebDev Messages postés 162 Date d'inscription jeudi 10 novembre 2016 Statut Membre Dernière intervention 14 février 2018
20 oct. 2017 à 18:08

Sans css et php ? 0_o

Discussions similaires

html5: Video not properly encoded

Tubidy télécharger gratuitement des vidéos sur Youtube ou Myspace

Erreur vidéo inconnue sur le Freebox Player

sites de vidéo choc

Discussions similaires

Newsletters