28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Je cherche à faire un menu horizontal qui se termine par 3 éléments de choix de langue (FR/EN/ ES) alignés verticalement sur la même ligne que la NAV.
J'ai essayé les flexbox mais le résultat n est pas concluant.

Côté HTML je pense à :


	<div class="menu">
		<nav>
			<a href="#">Accueil</a>
			<a href="#">Présentation</a>
			<a href="#">Offres Particuliers</a>
			<a href="#">Offres Entreprise</a>
			<a href="#">Ils me recommandent</a>
			<a href="#">Contact</a>
		</nav>
	        <aside class="lang">
			<a href="#" class="bouton">FR</a>
			<a href="#" class="bouton">EN</a>
			<a href="#" class="bouton">ES</a>
		</aside>
	</div>


avec côté CSS :

menu {
	display: flex;
	flex-wrap: nowrap;
}

nav {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 80%;
}

.lang {
	display: flex;
	flex-direction: column;
}


J'obtiens bien une Nav alignée horizontalement et un Aside aligné verticalement mais pas côte à cote...
J'ai tenté d'ajouter des Flex : 1; mais ça n a pas été mon succès du jour...

Comme j'ai des éléments au dessus et un footer, la technique du Float Right sur l'aside ne m'a pas convaincu...

Quelqu'un a une solution magique ? Tout passer en inline-block ?

Merci pour votre aide en tout cas...
Bonjour.

Il faut rajouter 'display : flex' sur le 'div' qui a pour class 'menu'...

Tels quels, nav et aside ne sont que des blocs qui se placent l'un en dessous de l'autre. Seuls leurs enfants bénéficient alors de la propriété flex...

Si 'display : flex' est, en plus, appliqué sur leur parent direct, 'nav' et 'aside' deviennent des éléments flex (flex-items), la direction de leur placement est, par défaut, horizontal et aussi par défaut, ils ne vont pas à la ligne...
Meilleure solution
J'avais effectivement oublié le . devant mon "menu" en CSS...
Cela fonctionne à présent.
Merci Zelena.