Impossible de fixer un <nav> à gauche

Par ItsWidee, il y a 5 ans

Les bases HTML/CSS
Javascript

Bonjour,

Je rencontre un petit problème avec mon code.
J'essaye désespérément de fixer le .nav-ul à gauche en-dessous du logo. J'ai déjà réussi à le mettre en dessous du logo mais impossible de le placer à gauche. Voici mon résultat actuel : https://imgur.com/mRMvmNV

Mon code :

header.php : https://pastebin.com/6Z1ZKUBQ

footer.php : https://pastebin.com/dLmTR8aU

style.css (lignes utiles : 126 à 283) : https://pastebin.com/Eh4Q65nn

Merci d'avance !

8 réponses

Curvata, il y a 5 ans

Sur ton header

flex-flow: row-reverse; justify-content: flex-end;
ItsWidee, il y a 5 ans

Merci de vos réponses. Celles-ci ont partiellement réglé mon problème. J'aimerais pouvoir avoir mes trois barres à droite du header tout en gardant les liens à gauche. Image : https://imgur.com/7QL1dKN

kurdtkobane, il y a 5 ans

change le flex-end en flex-start

ItsWidee, il y a 5 ans

J'ai fait ça :

header { flex-flow: row-reverse; justify-content: flex-end; } .hamburger { display: flex; justify-content: right; justify-content: flex-start; }

Mais rien ne change

kurdtkobane, il y a 5 ans

Tu as deux justify-content dans ton .hamburger

kurdtkobane, il y a 5 ans

essaie un

margin-left: auto

J'ai fait un top bar en flex-box voici mon code:

CSS

.socialmedia{ background-color: rgb(0,0,0,.75); display: flex; flex-direction: row; height: 20px; padding: 4px; } .socialmedia a{ color: white; } .insta{ margin-left: 15px; } .linkedin{ padding-left: 4px; margin-left: 15px; } .socialmedia .connection{ align-items: flex-end; margin-left: auto; height: 20px; width: 20px; margin-right: 15px; } .socialmedia img{ height: 20px; width: 20px; object-fit: cover; } .tooltip{ text-decoration:none; position:relative; visibility: hidden; } .connection:hover .tooltip { visibility: visible; opacity: 0.8; background-color: burlywood; position: absolute; transform: translate(-70%, 40%); padding: 3px; font-size: small; color: white; border-radius: 2px; width: 70px; } .tooltip:focus, .tooltip:focus-within, .tooltip:hover{ text-decoration:none; position:relative; visibility: hidden; }

HTML

<div class="socialmedia"> <a href="https://www.instagram.com/humelhanstristan/?hl=fr" class="insta"> <img src="/img/instagram_flat_icon.svg" alt="Instagram"> </a> <a href="https://www.linkedin.com/in/thumelhans/" class="linkedin"> <img src="/img/linkedin_flat_icon.svg" alt="Linkedin"> </a> <div class="connection"> <?php if($_SESSION['user_connected'] === true):?> <a href="disconnection.php"> <img src="/img/logout.svg" alt="Se déconecter"> <div class="tooltip">Se déconnecter</div> </a> <?php else: ?> <a href="userConnection.php"> <img src="/img/connection.svg" alt="Se connecter"> </a> <div class="tooltip">Se connecter</div> <?php endif ?> </div> </div>

Et voici le résultat:

https://ibb.co/8YyJGtK

Curvata, il y a 5 ans

Oui si tu veux les éléments à droite il faut faire justify-content: flex-start;