I am writing a navigation bar with a dropdown option.
I have 2 problems: I can't get the dropdown to position properly under the menu, + also when I try to move the mouse to click on the elements in the dropdown submenu it closes as soon as I move.
Can anyone suggest a fix?
Thanks
On codepen:
https://codepen.io/-royqooe/pen/GRxaVbm
/* CSS section for home */
.navtop {
position: relative;
background-color: #333333;
height: 50px;
width: 100%;
border: 0;
}
.navtop div {
display: flex;
margin: 0 auto;
height: 100%;
}
.navtop div h1,
.navtop div a {
display: inline-flex;
align-items: center;
}
.navtop div h1 {
flex: 1;
font-size: 24px;
padding: 0;
margin: 0;
margin-left: 2%;
color: #f5f8ff;
font-weight: normal;
}
.navtop div a {
padding: 0 12px;
text-decoration: none;
color: #c1c4c8;
font-weight: bold;
}
.navtop div a i {
padding: 2px 8px 0 0;
}
.navtop div a:hover {
color: #66ccff;
}
/* sequel for home and navbar */
nav.navtop {
font-family: monospace;
}
.navtop>.navbar>ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.navtop li {
display: block;
float: left;
padding: 0.5rem 0;
position: relative;
text-decoration: none;
transition-duration: 0.3s;
}
.navtop ul li ul {
background: red;
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
.navtop ul li:hover>ul,
.navtop ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
.navtop ul li ul li {
clear: both;
width: 100%;
}
#media screen and (max-width: 760px) {
.topbar-text {
display: none;
}
}
<nav class="navlol navtop" role="navigation">
<div class="navbar">
<h1>Websitee Title</h1>
<ul>
<li><i class="fa-solid fa-file"></i><span class="topbar-text">Home</span></li>
<li>Two
<ul class="dropdownnn">
<li>Sub-1</li>
<li>Sub-2</li>
<li>Sub-3</li>
</ul>
</li>
<li class="navelements">Three</li>
<li><i class="fas fa-user-circle"></i><span class="topbar-text">Profile</span></li>
<li><i class="fas fa-sign-out-alt"></i><span class="topbar-text">Logout</span></li>
</ul>
</div>
</nav>
got an easy fix for you:
add this
.navtop li {
min-height:25px;
}
the issue is that that menu li was way shorter than the others to the sides due to the icons, even better maybe is instead adding this instead:
.navtop li {
height:100%
}
both worked for me
In the screenshot, the yellow color is the area that <li> element is covering. You can see there is a gap between <li> element and submenu. When you try to move the mouse to submenu, your cursor goes out of yellow area and the submenu hides.
The solution would be to position the submenu so it starts exactly after yellow area and make sure there is no gap. Apply margin-top of 0.5rem on submenu instead of 1rem.
Related
I am a beginner to web development, and I am trying to make a dropdown menu.
The problem is when I hover on particular element, it consumes more than the expected space.
I want it to appear below the "shop" element. I do not understand where I am going wrong.
.nav {
width: 100%;
float: right;
}
.nav ul {
/* it edits the list, list-style: none; removes the discs from the list items */
float: right;
list-style-type: none;
display: block;
text-align: right;
}
.nav ul li {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
border: 2px solid gold;
}
.nav ul li a {
/* edits the links- text-decoration: none; removes the underline others are obvious*/
color: #000000;
text-decoration: none;
display: block;
}
.nav ul li ul li {
/* navigation sub-options disappear when not hovered */
display: none;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul li {
/* navigation options appear when hover on elements */
display: block;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact Us</li>
</ul>
</div>
Set position: relative on shop-link and position: absolute on dropdown. Then align dropdown with top, left, bottom, transform what would you like.
With transform it would look like this:
.link {
position: relative;
}
.dropdown {
position: absolute;
bottom: 0;
left: 0;
transform: translateY(100%)
}
I think the issue is with the way you organized these elements. Personally, when I make drop down menus, I use <button> for each root of the drop down menu. It makes styling everything much easier.
Then, what I do is I put the main text in an <h2> or <h3>, and style that how I want the main part of the drop down to look. Everything inside of the drop down can be styled using the <button> class' settings. Here's how I modified your code to get what I assumed your looking for.
CSS Styling:
.nav2 a {
color: #000000;
text-decoration: none;
display: block;
}
.nav2 button {
margin: 20px 40px;
padding: 0 10px 0 10px;
border: 0px;
/* change this to the color you want the background of your website to be */
background-color: white;
border: 2px solid gold;
font-size: 0px;
}
.nav2 button:hover {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
background-color: white;
border: 2px solid greenyellow;
/* change this to the color you want the background of your website to be */
background-color: white;
font-size: 16px;
}
h2 {
color: #000000;
text-decoration: none;
font-size: 16px;
font-weight: normal;
}
And then the HTML body:
<div class="nav2">
<button>
<h2>Home</h2>
</button>
<button>
<h2>Shop</h2>
<br>Products
<br>Membership
</button>
<button>
<h2>Blog</h2>
</button>
<button>
<h2>News</h2>
</button>
<button>
<h2>Activity</h2>
</button>
<button>
<h2>Contact Us</h2>
</button>
</div>
The end result looked like this
I hope my response was helpful!!
Your CSS is a bit messy, but to get it working add the following:
/* sub-nav option list */
.nav > ul > li > ul {
position: absolute;
margin-top: 1px; /* removes border intersection, can't be too large otherwise a gap will remove hover */
left: -55px;
}
position: absolute "removes" the element from the container so it is not contained in your parent's border. This will allow us to use the left, right, bottom, top CSS properties to position the sub-nav.
margin-top is used here to remove the intersection of shop and the sub-nav. However, you should be careful increasing this value greater than 1-2px since it will create empty space and hovering on the elements is required for your sub-nav to show.
Here is the working snippet:
.nav {
width: 100%;
float: right;
}
.nav ul {
/* it edits the list, list-style: none; removes the discs from the list items */
float: right;
list-style-type: none;
display: block;
text-align: right;
}
.nav ul li {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
border: 2px solid gold;
}
.nav ul li a {
/* edits the links- text-decoration: none; removes the underline others are obvious*/
color: #000000;
text-decoration: none;
display: block;
}
/* sub-nav option list */
.nav > ul > li > ul {
position: absolute;
margin-top: 1px; /* removes border intersection, can't be too large otherwise a gap will remove hover */
left: -55px;
}
.nav ul li ul li {
/* navigation sub-options disappear when not hovered */
display: none;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul li {
/* navigation options appear when hover on elements */
display: block;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact Us</li>
</ul>
</div>
Position docs for a better explanation of absolute: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Here You have:
.nav{
position: relative;
display: flex;
justify-content: flex-end;
}
.nav ul{
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav ul li{
background-color: gold;
border: 1px solid gold;
color: #FFF;
}
.nav ul li:hover{
background-color: #FFF;
color: gold;
}
.nav ul li a{
padding: 1rem 2rem;
color: inherit;
text-decoration: none;
font-family: Verdana;
}
.nav ul li ul {
/* navigation sub-options disappear when not hovered */
display: none;
opacity: 0;
visibility: hidden;
position: absolute;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul {
/* navigation options appear when hover on elements */
display: flex;
opacity: 1;
visibility: visible;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact US</li>
</ul>
</div>
I am new to web design. I am trying to create a site where in some menus in menu bar have sub menus. I want on mouse hove it should display submenu which is not happening. This is my code:
#charset "UTF-8";
body {
margin: 0;
}
. wrapper {
height: 100vh;
}
nav {
height: 44px;
background: #323232;
text-align: center;
/* to center the UL in the nav */
}
nav ul {
display: flex;
max-width: 1200px;
justify-content: space-around;
align-items: center;
padding: 0;
margin: 0 auto;
/* 0 auto allows it to self-center in the nav */
list-style-type: none;
}
nav li {}
nav a {
display: inline-block;
height: 44px;
line-height: 44px;
color: white;
font-size: 15px;
font-weight: 100;
text-decoration: none;
transition: 0.3s;
}
nav a:hover {
color: #B8B8B8;
}
.dropdown ul {
position: absolute;
top: 43px;
z-index: 100;
visibility: hidden;
}
.dropdown ul li a {
background: none;
text-align: left;
display: block;
}
li li {
width: 100%;
}
.dropdown li:hover>ul {
display: block;
}
<div class="wrapper">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a>Drinks</a>
<ul>
<li>Pan Shots</li>
<li>Tea</li>
</ul>
</li>
<li>Snacks</li>
<li>Desert</li>
<li>Special Diet</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div class="fft">Food For Thought</div>
<br>
<br>
<img src="Indian_Spices.jpg" alt="Spices" class="main_wrapper">
<!--<div class="main_wrapper" ></div>-->
On mouse hover on 'Drinks' nothing comes up. I want when I move mouse on 'Drikns' sub menus 'Pan Shots' and 'Tea' should be visible and should hide when mouse is not on 'Drinks'.
Your example is kinda messy and there's a lot of unnecessary code, i'm gonna present you with an example that can you work from.
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
list-style: none;
}
ul>li {
flex: 1;
background: dodgerblue;
height: 45px;
text-align: center;
}
ul>li>a {
text-align: center;
line-height: 45px;
text-decoration: none;
color: #fff;
}
ul>li>ul {
display: none;
}
ul>li:hover>ul {
display: block;
}
.dropdown>a:after{
content:'▿';
font-weight:bold;
}
<ul>
<li>Home</li>
<li class="dropdown">Drinks
<ul>
<li>Pan Shots</li>
<li>Tea</li>
</ul>
</li>
<li>Snacks</li>
<li>Desert</li>
<li>Contact Us</li>
</ul>
You are mixing display and visibility. Your selector is wrong as well.
.dropdown li:hover>ul
Means that CSS is looking for an li child element of .dropdown to be hovered before something is done with the > ul
Since CSS properties are inherited your text is still white in a child element. Therefor you don't see the text.
Try the following:
#charset "UTF-8";
body {
margin: 0;
}
. wrapper {
height: 100vh;
}
nav {
height: 44px;
background: #323232;
text-align: center;
/* to center the UL in the nav */
}
nav ul {
display: flex;
max-width: 1200px;
justify-content: space-around;
align-items: center;
padding: 0;
margin: 0 auto;
/* 0 auto allows it to self-center in the nav */
list-style-type: none;
}
nav li {}
nav a {
display: inline-block;
height: 44px;
line-height: 44px;
color: white;
font-size: 15px;
font-weight: 100;
text-decoration: none;
transition: 0.3s;
}
nav a:hover {
color: #B8B8B8;
}
.dropdown ul {
position: absolute;
top: 43px;
z-index: 100;
visibility: hidden;
}
.dropdown ul li a {
background: none;
text-align: left;
display: block;
}
li li {
width: 100%;
}
.dropdown:hover ul {
visibility: visible;
}
.dropdown ul a {
color: black;
}
<div class="wrapper">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a>Drinks</a>
<ul>
<li>Pan Shots</li>
<li>Tea</li>
</ul>
</li>
<li>Snacks</li>
<li>Desert</li>
<li>Special Diet</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div class="fft">Food For Thought</div>
<br>
<br>
<img src="Indian_Spices.jpg" alt="Spices" class="main_wrapper">
<!--<div class="main_wrapper" ></div>-->
i have a navbar with a horizontal submenu and issued with the submenu appearing on hover. I used display none to hide it but the hover code didn't work. Here is the whole code.
body {
margin: 0;
padding: 0;
background: #eee;
}
.nav ul {
list-style: none;
margin: 200px 0 0 14px; /* top, right, bottom, left*/
padding: 0;
overflow: hidden;
}
.nav li {
float: left;
}
.nav a {
background-color: gray;
padding: 10px;
margin-right: 10px;
display: block;
}
/*SUBNAV*/
.subnav ul {
list-style: none;
padding: 10px;
margin: 0;
overflow: hidden;
background-color: black;
display: none;
}
.subnav li {
float: left;
margin-left: 25px;
}
.nav li:hover .subnav ul {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="C:\Users\Arda\Desktop\website 2\style1.css">
<title>Sunucu</title>
</head>
<body>
<div class="nav">
<ul>
<li class="ana"><a class="active" href="#">Home</a></li>
<li class="magaza">Shop</li>
</ul>
</div>
<div class="subnav">
<ul>
<li>Yetki</li>
<li>Kredi</li>
</ul>
</div>
</body>
</html>
So as you can see when you hover shop, it's supposed to show the submenu but it doesn't.
Your CSS selects .subnav as a child of .nav li, but your HTML is not structured that way.
To use your current CSS, you'll need to move the .subnav into .nav li.
Example below:
body {
margin: 0;
padding: 0;
background: #eee;
}
.nav ul {
list-style: none;
margin: 0 0 0 14px;
/* top, right, bottom, left*/
padding: 0;
overflow: hidden;
}
.nav li {
float: left;
}
.nav a {
background-color: gray;
padding: 10px;
margin-right: 10px;
display: block;
}
/*SUBNAV*/
.subnav ul {
list-style: none;
padding: 10px;
margin: 0;
overflow: hidden;
background-color: black;
display: none;
}
.subnav li {
float: left;
margin-left: 25px;
}
.nav li:hover .subnav ul {
display: block;
}
<div class="nav">
<ul>
<li class="ana">
<a class="active" href="#">Home</a>
</li>
<li class="magaza">
Shop
<div class="subnav">
<ul>
<li>Yetki</li>
<li>Kredi</li>
</ul>
</div>
</li>
</ul>
</div>
Edit
It seems that you want the dropdown menu to be horizontal, the full width of the page, and below the main navigation.
I set the subnav to be position:absolute. That way it can be positioned outside of its container li.magaza but still be triggered by a hover event on its ancestor.
I also added an opacity/visibility transition to fade the submenu in and out (without using JavaScript).
body {
margin: 0;
padding: 0;
background: #eee;
}
.nav ul {
list-style: none;
margin: 0 0 0 14px;
/* top, right, bottom, left*/
padding: 0;
overflow: hidden;
}
.nav li {
float: left;
}
.nav a {
background-color: gray;
padding: 10px;
margin-right: 10px;
display: block;
}
/*SUBNAV*/
.subnav ul {
position: absolute;
left: 0;
width: 100%;
box-sizing: border-box;
list-style: none;
padding: 10px;
margin: 0;
background-color: black;
visibility: hidden;
opacity: 0;
transition: opacity .2s, visibility 0s .2s;
}
.subnav li {
float: left;
margin-left: 25px;
}
.nav li:hover .subnav ul {
visibility: visible;
opacity: 1;
transition: opacity .2s;
}
<div class="nav">
<ul>
<li class="ana">
<a class="active" href="#">Home</a>
</li>
<li class="magaza">
Shop
<div class="subnav">
<ul>
<li>Yetki</li>
<li>Kredi</li>
</ul>
</div>
</li>
</ul>
</div>
<p>Page content goes here</p>
You have structured your HTML wrong. You need to move your subnav div under the parent li.
Here is JQUERY for you. Updated your example. Gave fadeIn effect.
If you only want to use css check for the comment in css section.
$( "li.has-subnav" ).hover(
function() {
$('.subnav').fadeIn(200);
},
function() {
$('.subnav').fadeOut(200);
}
);
.nav ul {
list-style: none;
margin: 0 0 0 14px; /* top, right, bottom, left*/
padding: 0;
}
.nav li {
display: inline-block;
}
.nav a {
background-color: gray;
padding: 10px;
margin-right: 10px;
display: block;
}
/*SUBNAV*/
.subnav {
list-style: none;
padding: 10px;
background-color: black;
display: none;
position: absolute;
left:0;
width:100%;
box-sizing: border-box;
}
/** Uncomment the following css and remove jQuery to use only css **/
// .has-subnav:hover .subnav {
// display: block;
// }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="C:\Users\Arda\Desktop\website 2\style1.css">
<title>Sunucu</title>
</head>
<body>
<div class="nav">
<ul>
<li class="ana"><a class="active" href="#">Home</a></li>
<li class="magaza has-subnav">
Shop
<div class="subnav">
<ul>
<li>Yetki</li>
<li>Kredi</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
Its been a while - but I found myself a new exiting hobby in web development, and I am hoping that you can help me overcome the following issue:
I am working on a personal website. Content etc. is all preliminary. My main focus is the vertical menu on the left hand side. While I am pretty happy with the appearance so far, there are still some questions:
1) I had to set the transition as ease out to >0s, so that I have enough time between the main-menu hover and the hover over the sub-menu. Because of this, if I hover between main-menu items, they will briefly overlap due to the phase out. Is there a way to work around this?
(the focus selector might be an option, but that requires to click the menu item, and I prefer the hover)
2) The sub-menu is aligned to the top of the li of the main-menu. Because of that, the last item's sub (Testing) exceeds the boundaries of the page, giving whitespace below the page. Is there a way to make the sub-menu shift up if it presses against the edge of the overall body?
I probably could give it a different tag and design it differently, am I am hoping there is a more general solution.
3) Minor issue: When switching from main-menu hover to sub-menu hover, the main-icon "blinks" very briefly. Is that normal behavior? Certainly isn't pretty.
4) Last but not least: As this is my first time doing a website, I would be more than grateful to get your general feedback on inefficiencies in the code, so I can be more lean in the future.
(see updated fiddle below - full code removed to save space.)
Thanks for your help!
EDIT
THanks for your answers - issue #1 has been solved using the approaches you outlined!
However, the last submenu still gives me a bit a headache.
If I use the "last-child" selector, and the code added below, it will not change anything. However, if I give the last "bubble" a different tag, using the exact same code, the bubble will align to the bottom of the last main-menu item, but the containing UL remains defiant.
As you can see from the original CSS, the last "relative" is the main-menu IL, so shouldn't the submenu and the containing UL both align to the bottom of their respective parent/grandparent?
using a dedicated, different tag for the last-child "bubble_last
Using the last-child selector
and the accompanying new code (updated fiddle with full code: Heres the Fiddle ...use large screen for the result to see the alignment issue):
.navigation ul li:last-child {
border: solid orange;
}
.navigation .bubble_last{
position: absolute;
margin-top: 0%;
padding: 0px;
left: 60px;
bottom: 0px;
width: 400px;
height: 200px;
border: solid red;
}
.navigation .bubble_last ul{
position: absolute;
left: 0;
bottom: : 0px;
margin-top: 0px;
padding: 0px;
width: 20vw;
height: 100px;
font-size: 15px;
font-size: 1.2vw;
font-weight: 400;
border: solid blue;
margin-left: 28%;
display: block;
}
.navigation .bubble_last ul li {
list-style: none;
background-color: none;
border-radius: 3px;
height: 2vw;
line-height: 1.2vw;
width: 20vw;
position: relative;
padding-top: 0px;
margin: 0;
padding: 0;
}
Instead of adding a transition delay on .bubble, you just need to make the .bubble class wide enough (and start behind the main li trigger with a left: 60px) so that the hover will be continuous:
.navigation .bubble {
position: absolute;
margin-top: 0%;
padding: 0px;
left: 60px;
top: 0px;
width: 200px;
height: 100%;
background-color: none;
}
Then just add a margin-left to the submenu:
.navigation ul li ul {
margin-left: 20px;
}
To fix your second issue, simply add the following CSS to make the last submenu positioned relative to the bottom of the nav item:
ul li ul.subm:last-child {
top: auto;
bottom:0px;
}
Updated Demo: JSFiddle
How about this? Adjust your navigation to use the nav element, set it to use flex box, adjust that so it fits the height of your page, and then adjust the transition effects so they transition in and out properly.
I hope this helps.
#import url("http://fonts.googleapis.com/css?family=Roboto");
* {
border: none;
margin: 0;
padding: 0;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: Roboto Condensed;
box-sizing: border-box;
}
.landing {
display: table;
margin: auto;
width: 100%;
height: 100%;
background: url("https://imageshack.com/i/poXkyeIYj") 50% 50% no-repeat;
background-size: cover;
top: 0;
position: relative;
z-index: 1;
}
.landing .welcome {
margin: 10px;
width: 89%;
color: #FFF;
text-align: center;
display: table-cell;
vertical-align: middle;
position: absolute;
left: 10%;
top: 30%;
}
#mug {
background: url("https://imageshack.com/i/pmJaAuFkj") 50% 50% no-repeat;
background-size: cover;
border: solid 3px #FFF;
/*max-width: 20%;
max-height: 20%; */
width: 150px;
height: 150px;
margin: auto;
border-radius: 100%;
}
nav {
width: 50px;
height: 100%;
flex: 1;
display: flex;
justify-content: center;
flex-direction: column;
}
nav img {
max-width: 50px;
max-height: 50px;
}
.nav ul {
*zoom: 1;
list-style: none;
margin: 0;
padding: 0;
-ms-flex: 0 100px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
justify-content: space-between;
margin-top: 0px;
padding: 0px;
width: 11vw;
height: auto;
font-size: 15px;
font-size: 1.2vw;
font-weight: 400;
border-color: none;
}
nav ul li {
background-color: rgba(222, 225, 229, 0.8);
border-radius: 3px;
width: 100%;
font-size: 15px;
font-size: 1.2vw;
font-weight: 900;
}
.nav ul:before,
.nav ul:after {
content: "";
display: block;
}
.nav ul:after {
clear: both;
}
.nav ul>li {
position: relative;
}
.nav a {
display: block;
padding: 10px 20px;
line-height: 1.2em;
color: #fff;
border-left: 1px solid #595959;
text-decoration: none;
color: #FFF;
}
.nav a:hover {
text-decoration: none;
background-color: rgba(242, 93, 38, 0.8);
}
.nav li ul {
background: #273754;
}
.nav li ul li {
width: 200px;
}
.nav li ul a {
border: none;
}
.nav li ul a:hover {
background: rgba(0, 0, 0, 0.2);
}
.nav li ul {
position: absolute;
left: 11vw;
top: 0;
z-index: 1;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: 200ms ease;
-moz-transition: 200ms ease;
-o-transition: 200ms ease;
transition: 200ms ease;
}
.nav ul>li:hover ul {
visibility: visible;
opacity: 1;
filter: alpha(opacity=100);
}
span.caption {
display: none;
}
<body>
<div class="landing">
<div class="welcome">
<div id="mug">
</div>
<h1>Welcome to my personal Website!</h1>
<h2>On this site you will find a information about the person, the profession and other stuff about me. Enjoy!</h2>
</div>
<!-- cleaned up the navigation, nested it within the rest of the page, and adjusted the css -->
<nav class="nav">
<ul>
<li>
<img src="https://imageshack.com/i/potj2pVwp"> <span class="caption">Home</span>
</li>
<li>
<img src="https://imageshack.com/i/pntQ9nVMp"><span class="caption">About Me</span>
<ul>
<li>What I do</li>
<li>Motorcycling</li>
<li>Music</li>
</ul>
</li>
<li>
<img src="https://imageshack.com/i/po4WFq6Yp"><span class="caption">Professional</span>
<ul>
<li>Current Employment</li>
<li>Working Experience</li>
<li>Education</li>
</ul>
</li>
<li>
<img src="https://imageshack.com/i/pmcfm7Kbp"> <span class="caption">Projects</span>
<ul>
<li>Subnav Item</li>
<li>Subnav Item</li>
<li>Subnav Item</li>
</ul>
</li>
<li>
<img src="https://imageshack.com/i/pnM0Fmgrp"> <span class="caption">Misc</span>
<ul>
<li>Subnav Item</li>
<li>Subnav Item</li>
<li>Subnav Item</li>
</ul>
</li>
<li>
<img src="https://imageshack.com/i/poqRnk6ap"> <span class="caption">Testing</span>
<ul>
<li>Subnav Item</li>
<li>Subnav Item</li>
<li>Subnav Item</li>
</ul>
</li>
<li>
<img src="https://imageshack.com/i/pmc8tts9p"> <span class="caption">Contact</span>
</li>
</ul>
</nav>
</div>
My page header has a misaligned <li> element. Here is a screenshot:
Basicly I want to say "center both elements vertically, one to the left and the other to the right".
I'm able to align a <li> element
horizontally with style="float:right"
vertically with style="vertical-align:middle".
...But not at the same time. Based on a similar question, I was expecting this to work:
style="float:right; vertical-align:middle"
It doesn't.
I also found some ways to align an entire list, but those were not applicable to aligning an individual element of a list.
Here is the relevant html-thymeleaf code:
<div th:fragment="header">
<nav>
<ul class="navcontainer">
<li class="navtitle"><h2>Personal Expense Tracker</h2></li>
<li class="navlogout" th:inline="text" style="float:right">[[(${user != null ? 'Logout ' + user : ''})]]</li>
</ul>
</nav>
</div>
Here is the relevant css code:
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
overflow: hidden;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav > ul > li > a:hover {
background-color: #111;
}
With the code you added..
Using flexbox, you can do this:
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;/* added */
align-items: center;/* added */
justify-content: space-between;/* added */
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav > ul > li > a:hover {
background-color: #111;
}
<div th:fragment="header">
<nav>
<ul class="navcontainer">
<li class="navtitle"><h2>Personal Expense Tracker</h2></li>
<li class="navlogout" th:inline="text" >Log out</li>
</ul>
</nav>
</div>
the question is a little vague. If you could give me a visual of your problem / what you're looking for as a result I could probably help more.
Anyways here is the classic way to horizontally and vertically align an element to its parent.
Best of luck!
.container {
position: relative;
display: block;
margin: 0 auto;
width: 50%;
max-width: 1000px;
height: 100px;
background: grey;
}
.element {
position: absolute;
display: block;
width: 50%;
height: 50px;
background: red;
top: 50%;
margin-top: -25px;
left: 50%;
margin-left: -25%;
}
<ul class="container">
<li class="element"></li>
</ul>
You should give height or line-height to the element (or in some case parent element has no height) so vertical-align:middle will not work because there is no height.
First give height to the element which you want to set vertically middle if it does not work give height to the parent element.