HunTer_NX Posted May 28, 2022 Share Posted May 28, 2022 (edited) Hello, I use W3.CSS and I would like to make a navigation bar with an image icon on the right. However when I place the image the buttons are not aligned vertically anymore. I managed to cheat a little by reducing the size of the image and place it into a div but it restricts me a bit. Here is the code. Thank you in advance for your help. <div class="w3-bar w3-black "> <div class=" w3-bar-item w3-hide-small w3-xlarge"> <a href="./achat.php" class="w3-button w3-bar-item">Page 1</a> <span class="w3-bar-item w3-blue">Page 2</span> </div> <div class="w3-bar-item w3-right"> <!-- Image --> <img src="./img/default.jpg" style="width: 50px;" class="w3-hover-opacity w3-circle w3-hide-small " alt="Icon Profil"> <div id="Profil" class="w3-dropdown-content w3-bar-block w3-card-4 w3-right w3-hide-small" style="right:1%"> <a href="./profil.php" class="w3-bar-item w3-button"><i class="fa fa-user"></i>Profil</a> <a href="includes/deconnexion.php" class="w3-bar-item w3-button"><i class="fa fa-sign-out"></i> Se déconnecter</a> </div> </div> Edited May 28, 2022 by HunTer_NX Link to comment Share on other sites More sharing options...
dsonesuk Posted May 29, 2022 Share Posted May 29, 2022 For every opening div tag there should be a equal closing tag, you have more opening than closing therefore the browser will try to fix this by adding the closing div tags and usually get it wrong. Link to comment Share on other sites More sharing options...
HunTer_NX Posted May 29, 2022 Author Share Posted May 29, 2022 Thanks, I actually copied and pasted the code wrong, I have a little trouble with indentation on this site. However even with correction I don't see how to do. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now