Partage

Mise en page flex ou inline-block

3 janvier 2018 à 12:52:48

          Bonjour,

J'ai besoin de votre avis concernant ma mise en page ,

Cela concerne mon header , il contient ces éléments :

 - Une image(logo)

 - Une liste à puce contenant : 2 puces (Inscription et Connexion)

Le soucis étant que je souhaite que mon logo soit à gauche et ma liste serrer sur le bas droit de mon header.

En utilisant Flexbox cela fonctionne parfaitement bien mais me voilà avec mes 2 puces qui se colle ,

j'ai utiliser flexbox pour l'alignement de la puces en horizontale, j'ai essayer avec justify-content sur ma liste à puces mais je n'arrive pas à mes fin , j'aimerais comprendre pourquoi .

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
3 janvier 2018 à 13:02:02

tu as essayé justify-content : space-arround ?
3 janvier 2018 à 13:04:08

Oui , cela ne sépare rien ..

J'ai essayer également flex:1; et là mes élément sont bien séparer mais sur toute l'axe alors que je ne souhaite que quelque millimètre.

3 janvier 2018 à 13:07:41

Salut,

On a besoin de ton code html et css pour t'aider.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
3 janvier 2018 à 13:07:44

Hello,

Mets ton code si tu veux qu'on t'aide.

Edit : Grillé de peu par Manu !

-
Edité par MrChampy 3 janvier 2018 à 13:08:12

3 janvier 2018 à 13:13:03

  <header id="ban">
		<h1 class="element"><img src="bodypierceur.png"/></h1>
		<ul>
			<li>Connexion</li>
			<li>Inscription</li>
		</ul>
	</header>
*{
	margin:0px;
}
body{
	background-color: rgb(244, 245, 247);
}
#ban{
	background-color:rgb(182, 210, 211);
	display:flex;
	justify-content:space-between;
}
.element:nth-child(2) 
{
    border-right: 1px solid grey;
    align-self: flex-center;
    display: flex;
	list-style-type: none;
}


3 janvier 2018 à 13:18:57

Alors ça, c'est à bannir directement et définitivement :

*{
    margin:0px;
}

Si tu dois enlever une marge, fais-le au cas par cas (sur body, déjà).

Ensuite, pourquoi faire une liste ? Mets un conteneur avec deux liens dedans, et voilà.

Enfin, ton .element:nth-child(2) ne cible rien du tout. Ça ciblerait ".element" s'il était le deuxième enfant de son parent ; ce qui n'est pas le cas.

D'ailleurs, tu devrais donner des noms plus explicites que "element", parce que tu vas vite t'y perdre.

-
Edité par rhooManu 3 janvier 2018 à 13:24:51

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
3 janvier 2018 à 13:51:22

oui pour les nom je change au fur et à mesure , la se ne sont que des test ^^

Pour la marge c'est la solution que j'ai trouver pour que ma page prenne toute la place disponible.

Et quand tu parle de conteneur , tu parle de DIV ? je ne voit pas l’intérêt de mettre un <p> alors que sa ne représente pas un paragraphe..

Et oui grossière erreur de ma part pour le nth-child ^^'

je profite de l'occasion pour vous demander comment je pourrais faire pour que mes texte se comporte comme des blocks, c'est à dire que celui ci ne se sélectionne pas comme le menu de https://bodymod.fr/ je ne peut pas sélectionner le texte avec ma souris et quand je déplace l'élément celui ci est un block.

Mise en page flex ou inline-block

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown