Mauvaise alignement des textes CSS

28 décembre 2019 à 15:22:16

<! DOCTYPE html><html>

    
	<head>
        
	<meta charset="utf-8" />
        <title>Restaurant L'Océan</title>
    	<link href="Site2.css" rel="stylesheet">    	
	</head>

  
	<body>
    
</br> <h2 class="HautMenu"><a href="Pagemenu.html">Menu</a></span></h2>
<h2 class="HautHoraires"><a href="PageHoraires.html">Horaires</a></span></h2>
<h2 class="HautLocalisation"><a href="PageLocalisation.html">Localisation</a></span></h2>
<h2 class="HautContact"><a href="PageContact.html">Contact</a></span></h2>
	

	</body>

</html>

Mon fichier HTML

body
{
	background-image: url(Picture.png), url(Logo.png);
	background-repeat: no-repeat, no-repeat;
	background-position: center, top left;
	background-size: auto, 250px 13%;
}

.HautMenu{
	font-family: "Hobo STD", "Comic Sans MS", Herculanum;
  	text-indent: 25%; 
}

.HautHoraires{
	font-family: "Hobo STD", "Comic Sans MS", Herculanum;
  	text-indent: 40%; 
}

.HautLocalisation{
	font-family: "Hobo STD", "Comic Sans MS", Herculanum;
  	text-indent: 55%; 
}

.HautContact{
	font-family: "Hobo STD", "Comic Sans MS", Herculanum;
  	text-indent: 70%; 
}

Mon fichier CSS

Le rendu final

J'aimerais savoir comment aligner toutes les catégories svp. merci de votre réponse

-
Edité par Bryan__ 28 décembre 2019 à 15:23:12

Mehddii

28 décembre 2019 à 15:30:11

https://codepen.io/MehdiX/pen/GRgvMmR?editors=1100

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

AbcAbc6

28 décembre 2019 à 15:37:59

Bonjour, votre code HTML n'est pas valide passer le au validateur pour voir et corriger vos erreurs => https://validator.w3.org/

La balise </br> n'existe pas, c'est soit <br> soit <br />

Que fait la fermeture de </span> dans vos titres, sans balise d'ouverture??

Pour moi ce ne sont pas des titres mais un menu de navigation, dans ce cas on devrait trouver la balise <nav> avec des liens ou un liste de lien.

Si vous voulez un menu voir http://www.frogweb.fr/

AlainPré

29 décembre 2019 à 16:37:33

Une piste, à peaufiner, en utilisant les flex-box :

#menus {
   display:flex;
   font-family: "Hobo STD", "Comic Sans MS", Herculanum;
}
#menus h2{flex-basis:25%;}
.HautMenu{} 
.HautHoraires{} 
.HautLocalisation{} 
.HautContact{}

Et le HTML :

<nav id="menus">
   <h2 class="HautMenu"><a href="Pagemenu.html">Menu</a></span></h2>
   <h2 class="HautHoraires"><a href="PageHoraires.html">Horaires</a></span></h2>
   <h2 class="HautLocalisation"><a href="PageLocalisation.html">Localisation</a></span></h2>
   <h2 class="HautContact"><a href="PageContact.html">Contact</a></span></h2>
</nav>

-
Edité par AlainPré 29 décembre 2019 à 16:37:52

Alain - Linkedin

Bryan__

16 janvier 2020 à 12:49:32

Mehddii a écrit:

https://codepen.io/MehdiX/pen/GRgvMmR?editors=1100

Bonjour merci de m'avoir répondu mais je me suis mal exprimé.

En faite je voulais aligner mes catégories sur la même ligne que Menu et non verticalement

Mehddii

16 janvier 2020 à 13:06:12

> En faite je voulais aligner mes catégories sur la même ligne que Menu et non verticalement

Il ne sont pas verticalement, ils sont sur la même ligne où tu vois ça ?

Et applique ce qu'a dit AbcAbc6

-
Edité par Mehddii 16 janvier 2020 à 13:37:19

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

Bryan__

16 janvier 2020 à 13:40:25 - Message modéré pour le motif suivant : Merci d'utiliser le bouton code du forum pour insérer votre code

AbcAbc6

16 janvier 2020 à 14:46:06

Bonjour,

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>.

Liens conseillés

Règles générales du forum

AlainPré

22 janvier 2020 à 9:34:32

Faudrait quand même tester les réponses qu'on donne.

Les menus sur la même ligne, c'est exactement ce que j'avais compris et c'est exactement ce que fait mon code :

-
Edité par AlainPré 22 janvier 2020 à 9:34:46

Alain - Linkedin