Liens de navigation décalés sur bannière HTML

21 juin 2021 à 9:57:07

Bonjour;

Je sens que mon problème va sûrement être tout bête à régler mais je me permets quand même de vous demander car je galère depuis plusieurs jours.

Dans la bannière d'accueil de mon site (simple test), je veux ajouter des liens "nav" en haut à droite mais ils apparaissent en-dessous à droite!!! Impossible de les apposer sur la bannière... Au secours. Je vous joins le résultat obtenu avec le code ci-dessous:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="Style.css">

<title> I-Lumine : le site astucieux pour Genshin Impact!  </title>

</head>

<body>

<header >

<div class="titre_paimon"> 

<h1> Bienvenue sur I-Lumine!!! <img src="photos/paimon.jpg" alt="paimon, la mascotte du jeu" > </h1> 

<h2> Le blog dédié à Genshin Impact </h2> 

<nav>

<ul>

<li> Personnages </li>

<li> Armes </li>

<li> Artefacts </li>

<li> Ressources</li>

<li> Contact </li>

</ul>

</nav>

</div>

Et pour le CSS:

body {
  background-image: 
  url(https://images.alphacoders.com/110/1109224.jpg);
  background-size: 1600px;
  background-attachment: fixed;
  background-repeat: repeat;
  margin: 0px;
  padding: 0px;

}
header {
		background-color: white;
		width: 100%;
		height: 150px;
		margin-top: 0px;
		padding-top: 0px;	
}
			
			.titre_paimon img {
		
	  width: 150px;
    height: 150px;
    float: left;
}

					h1 {
	margin: 0px;
		padding: 0px;
	font-size: 3em;
	text-align: left;
	font-style: oblique;
	font-weight: bolder;
	text-decoration: underline;
	border-radius: 10 px;
}
					h2 {
	font-size: 2em;
	text-align: left;
	font-style: oblique;
	font-weight: bolder;
	text-decoration: underline;
	border-radius: 5px;
}
nav ul {
	text-align: right;
	padding-right: 20px;
	padding-top: 0px;
	list-style-type: none;
}
nav li {
	 font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
	margin-left: 15px;
	display: flex s;
	flex-direction: right;
}
nav a
{
    font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none; }

Je vous remercie infiniment!!

A bientôt

-
Edité par MRSSTORM 21 juin 2021 à 11:14:03

AbcAbc6

21 juin 2021 à 10:27:28

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Code de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

Règles générales du forum

Bonjour, quel est le CSS correspondant?

MRSSTORM

22 juin 2021 à 9:53:28

Bonjour ;

Aujourd'hui le problème subsiste toujours... Quelqu'un pour m'aider??

Merci!! :-D

maxcharbonnelle

22 juin 2021 à 12:07:21

Hello !

Alors, la structure de ton HTML n'est pas forcement bon, il faudrait que la balise <nav> se trouve à l'exterieur de la <div class="titre_paimon">.

Puis tu peux ajouter à ton header le style : "display: flex;" !

Bon courage !

MRSSTORM

22 juin 2021 à 12:17:37

ok merci beaucoup je vais essayer! je n'ai pas pensé à attribuer un display à mon header...

AbcAbc6

22 juin 2021 à 13:35:44

Bonjour,

Pas de width: 100% sur un block Lire : https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/

Il y a une erreur de L56 il y a un "s" qui y traine ce qui invalide la propriété.

L57 right n'est pas une valeur valide pour flex-direction, voici les valeurs possible.

L34 Pas d'espace entre le nombre et l'unité.

Vous pouvez voir les erreurs de syntaxes à l'aide du validateur CSS => http://jigsaw.w3.org/css-validator/

>> je veux ajouter des liens "nav" en haut à droite

Je pense également que le HTML n'est pas correctement écrit, je fermerais la <div> après le <h2> et indiquerais le <header> en display: flex.

MRSSTORM

24 juin 2021 à 8:38:11

Bonjour ;

Merci pour votre aide précieuse et les liens apportés c'est très intéressant! j'y suis enfin arrivée :)

Merci à tous et à bientôt

AbcAbc6

24 juin 2021 à 8:52:59

Bonjour, de rien

Sujet résolu

Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e