Élément qui ne s'aligne pas en HTML5
Résolu
Watterbutter
Messages postés
76
Date d'inscription
Statut
Membre
Dernière intervention
-
SKYMWebDev Messages postés 162 Date d'inscription Statut Membre Dernière intervention -
SKYMWebDev Messages postés 162 Date d'inscription Statut Membre Dernière intervention -
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:
Beurretoutmou
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
- Montage video windows - Guide
- Comment télécharger une vidéo youtube - Guide
- Nommez une application d'appel vidéo ou de visioconférence - Guide
- Insérer video powerpoint - Guide
- Freemake video downloader - Télécharger - Téléchargement & Transfert
1 réponse
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,
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,
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.
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).