[CSS] Mise en page d'un récpatitulatif cassée

Sujet résolu

24 mai 2019 à 15:00:39

Bonjour,

Je suis actuellement en train de travailler sur une petite page qui fait un récapitulatif sur un upload de fichier en php.
Cette page est très basique.
J'ai extrait de mon code toutes les données sensibles, voici mon code:

<html>
	<head>
		<title>MAPAGEQUIFAITPASCEQUEJEVEUX</title>
		<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="mapagedestylequifaitducodetoutjolietout/propre.css" rel="stylesheet" type="text/css" />
		</head>
		<body>
		<h3>Votre fichier a bien été reçu !</h3>
		<ul>
			<li>mes supers données dans ma liste</li>
			<li>titre de ma premiere donnee: ma donnee</li>
			<li>titre de ma deuxieme donnee: ma donnee</li>
			<li>titre de ma troisieme donnee: ma donnee</li>
			<li>titre de ma quatrieme donnee: ma donnee</li>
			<li>titre de ma cinquieme donnee: ma donnee</li>
			<li>titre de ma sixieme donnee: ma donnee</li>
			<li>titre de ma septieme donnee: ma donnee</li>
		</ul>


		<p><a href="#">mon super lien de retour vers mon site</a></p>
	</body>
</html>

et mon css

body
{
	margin-top:5%;
	text-align: center;
}
ul
{
	text-align:center;
	margin:0 auto;
}
li
{
	text-align: left;
}

Mon objectif est d'avoir le tout aligné au milieu de la page.
Pour le moment je dispose simplement du h3 et du lien qui sont alignés correctement avec le text-align:center du body.
Pour ce qui est de la liste elle est corrrectement alignée mais tout à gauche au lieu d'être au milieu.

Si vous avez une petite idée de mon erreur je suis preneur

Merci d'avance pour vos réponses,

Cordialement
G.G

Sand Wraith

24 mai 2019 à 17:13:12

Salut,

Il faut revoir son code ligne par ligne pour savoir d'ou vient le problème... regarde bien le li{text-align: left;} "left" veut dire gauche en anglais alors s'est normal que ta liste soit tout a gauche, il faut changer sa en li{text-align: center;"}.

Frogweb

24 mai 2019 à 19:27:06

Salut,

tout dépend du résultat que tu veux obtenir. Et margin:auto n'a d'effet que si tu indique un width.

Tu veux centrer les <li> dans ton <ul> ?
Alors fait la correction que Sand t'indique.
Mais les <li> ne seront pas alignés à gauche selon si ils sont plus ou moins longs.

Tu veux centrer ton <ul> dans la page et que les <li> soient bien alignés à gauche ?

ul {margin:auto; width:500px/* par exemple*/}

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Galaxy Ghost

27 mai 2019 à 9:10:16

Bonjour à vous deux,

Tout d'abord, merci pour vos réponses, je vais tester cela de suite et voir si l'ne de vos proposositions correspond à mes besoins.

Puis je vous tiendrais au courant.
Voilà le rendu actuel avant toute modification l'objetctif serait de conserver la forme actuelle du paragraphe centrale, tout en déplaçant la partie au centre.