Sur mon site-web j'aimerais que le logo de mon site soit a gauche et le menu au center. Si j'utilise flexbox et en le mettant centrer le logo vient se coller au menu j'aimerais qu'il soit complétement a gauche. Si je mais les espaces entre le logo est bien a gauche mais le menu n'est plus centré et a droite. Merci de votre aide.
vous compliquez inutilement, nous avons un conteneur flex, qui contient le logo et la navigation, il suffit d'indiquer que la navigation occupe tout l'espace disponible (chercher la propriété à utiliser dans une doc sur flex) , et que son contenu est centré, et mettre simplement des liens standards <a> dans la navigation avec du padding pour écarter les onglets si on veut
donc pas besoin de div supplémentaires ou autre, flex se débrouille très bien : une <img> et une <nav> dans le <header>
a part les div c'est exactement ce que j'ai fais en utilisant des <p> pour aller plus vite dans mon explication, si j'avais fais un menu complet évidemment que j'aurais utiliser des <a> et <img> pour l'image... après se limiter à dire cherchez dans la doc ça reviens a n'apporter aucune aide ( ici space-between fais ce que tu recommandes )
Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.
non pas besoin de space-between, désolé, pas de raison de se vexer et pour vraiment aider, il ne faut pas donner le code, mais indiquer les pistes et la manière de raisonner, et j'ai indiqué ce qu'il fallait chercher
Détend toi champion personne est vexé à part toi visiblement, tout comme toi j'ai le droit de donner mon avis. Et quand je donne mon avis ou apporte mon aide en fournissant un code pour aiguiller j'accepte d'être contrarié sans avoir besoin de jouer le faux dur.
Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.
header
{
background-color: black;
display: flex;
}
#logo
{
display: flex;
flex-direction: column;
}
nav ul
{
display: flex;
list-style-type: none;
padding: 0;
}
nav a
{
font-size: 1.2em;
color: white;
padding: 10px;
text-decoration: none;
text-align: center;
display: block;
}
nav a:hover
{
background-color: #343434;
}
Merci de vos réponse. Mais je veux que le logo soit a gauche complètement et le menu centrer donc le space-between ne marche puisque les deux seront chacun d'un coté. Merci de votre aide
avec le header en flex (align-items:center pour l'alignement vertical des 2 éléments), <nav> occupant toute la place restante (propriété "flex", regarde la doc) et en text-align:center pour que les <a> soit centrés, avec du padding gauche/droite sur les <a> pour mettre un peu d'espace entre eux
Qu'est ce que tu ne comprends pas dans cette structure et dans ce que j'ai dit ? c'est simple, souple, léger, CSS réduit et facilement maintenable, inutile de compliquer avec des <div> et autres éléments. Relis la doc sur flex, tout est là
Merci, j'ai choisis le inline puisqu'il était simple et répondait bien a mes besoins. Mais avec le flex j'utilisait ceci
@media all and (max-width: 440px)
{
nav ul
{
flex-direction: column;
}
#logo
{
display: none;
}
}
pour que en-dessous de 440px le menu se met en column et que le logo disparaissait mais avec la technique j'ignore comment je devrait faire cela. Merci de votre aide.
Merci sa marche mais par contre lorsque c'est en dessous de 440px le menu n'est plus center du moins ils sont tous un plus grand décalage a gauche ou est le logo c'est comme si il était encore la mais n'apparaissait pas pourtant j'ai bien mis le
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
au logo. Merci