[Html/css] Mise en page Flexbox

aide pr un nul ^^

Sujet résolu

31 mars 2020 à 23:12:12

bonsoir
Le monde du web me plait surtt le développement, je commence à apprendre mais je vous avoue quand on y connais pas grand chose c'est pas facile ^^, je me tourne vers vous pour avoir quelque conseils et explication histoire de mieux comprendre certaines choses (avant de demander j'essaye beaucoup de choses

)

je vous explique j'essaye de construire un petit tout en apprenant

j'ai mis pas mal de commentaires pour que vous compreniez ce que je voulais faire xD

header 
{
	background-color: #7f7f7f; /* juste histoire de voir les zones*/
	border: 3px blue solid; /* juste histoire de voir les zones*/
	width: 90%; /* pour que le header soit moins large que la page */
	margin: auto; /* pour qu'il soit centré */
	display: flex; /* creer un conteneur */
}

nav ul
{
	display: flex; /*permet d'alligner les liens*/
	list-style-type: none; /* virer les puces */
}

nav li
{
	margin-right: 15px; /* espace entre les mots */
}

#logo_box
{
	margin: auto;
	text-align: center; 
	background-color: grey;
}

#logo
{
	display: flex; /* creer un conteneur centré */
	max-width: 1200px;
	max-height: 200px;
	margin: auto;
}
 

#page_general
{
	background-color: black;
	color: white;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Titre</title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<div id="page_general">

	<header>
		<div id="logo_box">
			<div>
				<img src="images/pub3.png" alt="Logo" id="logo"/>
				<p>une phrase descriptive</p>
			</div>
		</div>
		<nav>
			<ul>
				<li><a href="#">Accueil</a></li>
				<li><a href="#">Mon ompte</a></li>
			</ul>
		</nav>
	</header>
	</div>
	<body>
	</body>
</html>

header prend bien ses 90% en taille
le conteneur logo lui par-contre ne ce place pas au centre ( les liens sur le coté occupent de la place )

comment passer ces liens ( Accueil, mon compte) en bas a gauche et faire que le conteneur logo occupe réellement tout l'espace

j'ai un soucie avec les flexbox je crois :s
merci d'avance

-
Edité par KayaMan1 1 avril 2020 à 7:18:24

AbcAbc6

1 avril 2020 à 2:19:49

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : nouveau dans ce domaine)

Liens conseillés

Règles générales du forum

Bonsoir, (ou bonjour suivant l'heure à laquelle tu lis ce message). Merci de modifier le titre de votre sujet.

Tu as une erreur dans ton HTML, la balise <body> viens juste après le </head>.

Lorsque tu crées un conteneur flex, les enfants direct deviennent des flex-items. Ceux -ci sont aligné cote à cote car la propriété flex-direction à comme valeur initial de row. Les flex-items se place donc en ligne.

Si tu souhaites avoir la navigation en dessous de L'image et de la phrase, je t'invite à changer le sens de direction avec flex-direction: column; sur le conteneur flex, le header.

Par contre je ne vois pas ce que tu souhaites faire avec l'image du logo. Une image est un contenu remplacer, il ne peut pas y avoir d'élément à l'intérieur de la balise <img>, donc pas de flex-items possible. C'est pourquoi j'ai du mal à voir les raisons pour lesquelles tu indiques une image en display flex.

Si tu as du mal avec l'explication des flexfox du cours HTML/CSS de ce site, regarde https://la-cascade.io/flexbox-guide-complet/

-
Edité par AbcAbc6 1 avril 2020 à 2:23:13

KayaMan1

1 avril 2020 à 7:28:27

merci pour ce lien apres le boulot je regarde ca

<div id="page_general">

La balise est une erreur ? je pensais pouvoir creer ce "bloc" pour pouvoir modifier son aspect plus tard

flex-direction: column;

j'avais essayé ca me place bien a la ligne la navigation mais je n'arrive pas a la mettre a gauche tout en ayant l'image vraiment centré

une image en display flex.

hmmmmmmmm il etait tard dans mon désespoir j'ai essayé :s

-
Edité par KayaMan1 1 avril 2020 à 7:29:37

AbcAbc6

1 avril 2020 à 7:52:43

Bonjour,

Non l'erreur n'est pas la balise <div> mais <body> qui ne doit pas être en L25: soit

    </head>
    <body>
    <div id="page_general">

Pour ma part l'image et la phrase son bien centrer, tu as un text-align: center; sur #logo_box (retire le display: flex; sur #logo il me semble inutile )

Si tu parles de l'espace entre Accueil et le bord gauche, c'est le padding de la liste. Les listes comme les titres, paragraphes et d'autre élément ont des propriétés par défaut. Reset le padding de la liste pour voir si c'est cela que tu souhaites.

Tu peux voir cela avec l'inspecteur des éléments (F12 sur la plupart des navigateurs).

KayaMan1

1 avril 2020 à 15:09:58

bonjour

(oula je n’étais pas du tt réveillé ce mat)

Encore merci je comprends mieux certaines choses, et effectivement ca marche mieux la

j'ai bientôt le header voulu, plus que tout le reste

je profite de l'occaz concernant l'heritage

<div id="zone1">
  <div>
  <div><p>texte1</p></div>
  </div>
  <div><p>texte2</p></div>
</div>

imaginons que j'ai donner une taille maximale a Zone1

ici la div qui contient " texte1" hérite elle des "propriété" de zone 1
la div contenant "texte2" héritera toujours du parent (on est d'accord ? )

-
Edité par KayaMan1 1 avril 2020 à 15:17:46

AbcAbc6

1 avril 2020 à 15:20:04

Bonjour, bon courage pour le reste

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