Partage
  • Partager sur Facebook
  • Partager sur Twitter

centrer une liste à puce horizontalement

Sujet résolu
15 avril 2022 à 15:34:23

bonjour à tous, débutant dans le html/css je viens de suivre les cours libre cependant je bloque à un endroit, je souhaiterais centrer ma liste a puce sous mon titre h1 cependant je ne trouve aucun moyen d'y arriver en gardant mon menu horizontalement; merci d'avance pour vos retours :p

  • Partager sur Facebook
  • Partager sur Twitter
15 avril 2022 à 15:53:21

Bonjour,

Manque de précisions

Vous êtes ici sur un forum d'entraide communautaire et non pas sur un forum de demande de service, le but n'est donc pas de fournir une réponse toute faite ou de directement fournir la solution à quiconque viendrait sans la moindre trace. Afin d'obtenir de l'aide et une solution à votre problème, il est fortement recommandé de présenter clairement l'état actuel du problème en nous fournissant :

  • Un descriptif clair et précis du problème
  • La tentative actuelle de résolution que vous avez effectué : le code HTML et le code CSS, les deux colorés à l'aide du bouton </>
  • Le résultat attendu et le résultat actuel
  • Toutes pistes de recherches pouvant aider à la résolution
  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)

15 avril 2022 à 22:11:05

Bonsoir, je vous joint du coup le code HTML, le code css également et une capture d'ecran du résultat;
En espérant que ce soit mis correctement;
Ce que je souhaiterais faire c'est réussir à centrer la liste à puce sous la bannière avec mon titre, 
cependant lorsque je cherche à centrer la liste à puce avec text-aligne center; elle se remets immédiatement en verticale, centré, certes mais verticalement,
Merci d'avance pour vos retours
<head>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="styleflex.css">
body
{
	background-image: url("images/fond.jpg");
}
h1 
{
	color: yellow;
	text-align: center;
	border-style: solid;
	width: 60%;
	height: 10%;
	margin: auto;
	background-image: url("images/banniere.jpg");
}
 ul 
 {
 	list-style-type: none;
 	padding:auto;
 	margin: auto;
 	display: inline-block;
 	text-align: left;
 }
li
{
	float: left;
	margin-left:100px;
}

<title>Site culinaire test</title> </head> <body> <header> <h1>Mon site de plats préférés!</h1> </header> <nav> <ul> <li><a href="#">Entrées</a></li> <li><a href="#">Plats</a></li> <li><a href="#">Desserts</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </body> </html>

-
Edité par ValentinPolin 15 avril 2022 à 22:12:04

  • Partager sur Facebook
  • Partager sur Twitter
17 avril 2022 à 1:24:55

Bonsoir, le fait d'utiliser les flottants cela fait sortir les éléments du flux courant.  Ce qui fait que la hauteur de la liste est de 0, sans contenu dans le flux.

Je te propose d'utiliser flexbox pour arriver à tes fin. Exemple :

            ul
            {
                list-style-type: none;
                padding:0;
                margin: 0;
                display: flex;
                justify-content: center;
            }
            li
            {
                flex-basis: calc( 70vw / 4);
                text-align: center;
            }

De manière général utilise des class pour le CSS, il est possible que, dans ton site, tu aies plusieurs liste <ul>, ce qui comme tu l'écris s'appliquera à toute les listes de ton site.

Plus d'info sur flexbox: https://la-cascade.io/flexbox-guide-complet

Pour s'entrainer :  https://flexboxfroggy.com/#fr

  • Partager sur Facebook
  • Partager sur Twitter
19 avril 2022 à 11:38:29

Bonjour, 

je viens faire un retour suite à votre réponse et je vous remercie pour l'aide apportée cela convient parfaitement à ce que je souhaitais et effectivement je dois me pencher davantage sur flexbox ayant eu un peu de mal avec cette partie du cours;

une bonne journée à vous ;)

  • Partager sur Facebook
  • Partager sur Twitter
19 avril 2022 à 12:39:40

Bonjour,

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 ;)
  • Partager sur Facebook
  • Partager sur Twitter
29 mai 2024 à 19:37:53

j'ai besoin de conseils car je suis débutant

J'ai réussi à mettre mon texte au milieu horizantalement mais c'est collé j'ai besoin d'espaces entre eux

-
Edité par aichakalily 29 mai 2024 à 19:43:27

  • Partager sur Facebook
  • Partager sur Twitter
29 mai 2024 à 19:49:29

@aichakalily Bonsoir, merci de ne pas squatter le sujet résolu des autres, créer votre propre sujet dans le respect des règles du forum à savoir qu'un message commence par des règles de politesses (Un bonjour ou des salutations à la communauté et se termine par des remerciements par avances pour les futures réponses), la description de votre problème et le code que vous avez écrit inséré sur le forum à l'aide de l'outil d'intégration de code soit le bouton code </>.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Liens conseillés

  • Partager sur Facebook
  • Partager sur Twitter