I am building a CSS only two-level horizontal navigation bar with relative sub-navigation to the parent. All menu items are inline. Dependent upon the classes 'right' or 'left', the sub-nav aligns to the parent. This is what I've managed to accomplish so far:
html:
<body>
<div class="navbar">
<ul class="topnav left">
<li>nav</li>
<li>menu1
<span class="subnav">
<ul class="subnav subnav-left">
<li>item1-1</li>
<li>item1-2</li>
<li>item1-3</li>
</ul>
</span>
</li>
<li>menu2
<span class="subnav">
<ul class="subnav subnav-left">
<li>item2-1</li>
<li>item2-2</li>
<li>item2-3</li>
</ul>
</span>
</li>
</ul>
<ul class="topnav right">
<li class="right">menu3
<span class="subnav subnav-right">
<ul class="subnav subnav-left">
<li>item3-1</li>
<li>item3-2</li>
<li>item3-3</li>
</ul>
</span>
</li>
<li class="right">menu4
<span class="subnav subnav-right">
<ul class="subnav subnav-left">
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</span>
</li>
</ul>
</div>
</body>
css:
body {
font-family: arial;
margin: 0;
}
.navbar {
height: 40px;
background-color: black;
}
ul.topnav {
margin: 0;
padding: 0;
}
.subnav {
position: absolute;
}
.subnav-right {
right: 0;
}
ul.subnav {
position: relative;
margin: 4px 0 0 -8px;
padding: 0;
display: none;
}
ul.topnav li{
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
line-height: 32px;
float: left;
clear: none;
box-sizing: border-box;
}
ul.subnav li {
background-color: red;
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
position: relative;
line-height: 32px;
float: left;
clear: none;
box-sizing: border-box;
}
.topnav li:hover {
background-color: red;
}
.topnav li:hover ul.subnav {
display: inline-block;
background-color: red;
}
.nav ul li:hover {
background-color: black;
}
.nav ul li {
width: 100%;
}
.nav li ul {
display: inline-block;
clear: none;
position: absolute;
background-color: red;
margin: 4px 0 0 -8px;
padding: 0;
}
.left {
float: left;
}
.right {
float: right;
}
The jsfiddle:
jsfiddle.net/aLZqZ
Here is what I'm trying to accomplish:
image to nav menu
I got this for you http://jsfiddle.net/aLZqZ/99/. In under 100 tries, too. I became a little obsessed and spent at least 5 hours total. A good challenge for me and I have never really fiddled with sub navs before.
This issue was three fold:
Using float:right for a horizontal nav bar is usually not good in my experience because it causes unexpected issues, also it is negated and ignored by browsers if the same element is positioned relative or absolute (you had a lot of superfluous code, btw). I changed float:right to text-align:right where necessary. See this for horizontal nav I fixed for someone recently: Aligning/floating my nav bar to the right
The li element containing the sub menu was not positioned, therefore, the position:absolute and right:0 on the ul within it moves according to the closest containing element that is position:absolute or :relative. In this case there was not one so that element was html; thus the ul would be pushed all the way right to the end of the page. I added position:relative to these li elements which then made the right:0 behave as expected, but did not put all the li element on one line and stacked them instead.
You had tags with display:inline-block when :inline would have done it, but more importantly, no one ever really mentions that white-space:nowrap on the same elements to do what you are trying here is important. inline-block and nowrap together should force one line block like elements that you can align or float as whole as if they were a paragraph. BTW, IE7 needs some special attention for inline-block. See here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I made special css at the bottom of yours in your fiddle to separate the left and right navs, and I basically left your original css alone. I also adjusted the html a bit. Here it all is.
HTML for the right nav (follows the HTML for the left nav):
<ul class="rightNav">
<li>menu3
<ul class="rightSubNav">
<li>item3-1</li>
<li>item3-2</li>
<li>item3-3</li>
</ul>
</li>
<li>menu4
<ul class="rightSubNav">
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</li>
</ul>
CSS that I added to separate the right and left nav:
ul.rightNav {
margin:0;
padding:0;
text-align: right;
}
.rightNav li:hover {
background-color: red;
}
ul.rightNav li{
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
line-height: 32px;
position:relative;
}
ul.rightSubNav {
position: absolute;
right:0;
margin: 4px 0 0 -20px;
padding: 0;
display: none;
white-space:nowrap;
}
ul.rightSubNav li {
background-color: red;
list-style: none;
display: inline;
color: white;
padding: 4px 8px;
font-weight: bold;
position: relative;
line-height: 32px;
}
.rightNav li:hover ul.rightSubNav {
display: inline-block;
background-color: red;
}
If this helped I would appreciate the up votes and answer select. If you figured something else out and got it working differently please post. I would love to see it.
Related
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.
I'm really sorry if I didn't phrase my question correctly, I'm really new at all of this.
I want to put my menu items (I made an unordered list) within my nav block, but they are showing underneath it instead. It overlaps with my body content (not pictured), which is really problematic. Could someone help me?
The pink box is my nav block. I want to put my menu buttons inside it.
I know that the pink block is in fact the nav block?
HTML:
<header>
<h1>Header</h1><h2> | chapter</h2>
</header>
<nav>
<ul id="menu">
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
<li>delta</li>
</ul>
</nav>
CSS:
header{
background-color: green;
border: 1px solid purple;
width: 100%;
height: auto;
}
nav{
background-color: pink;
border: 1px solid grey;
width: 100%;
height: auto;
}
h1, h2{
display: inline;
}
/*Set li as buttons*/
#menu li{
float: left;
list-style-type: none;
width: 5em;
margin-left: -2.5em; /*Removes default indentation of lists*/
margin-right: 5em;
display: block;
}
/*display anchor tags as buttons*/
#menu a{
display: block;
background-color: white;
border: 3px solid blue;
text-align: center;
text-decoration: none;
color: black;
}
/*display setting on button hover*/
#menu a:hover{
color: white;
background-color: black;
}
Thank you!
There are many errors in your CSS:
list-style-type: none; goes on the list, not on its items. It's what disables default list-behavior and makes the list stand on one line.
float: left; will make the elements float, but will also make the parent shrink as if it didn't have any content, which is why the elements sit below the nav block.
display: block; on items makes them stand on their own line. If you want multiple elements to stand side-by-side yet still have margins and paddings like blocks, you need to use inline-block instead. This is much easier to maintain than floating elements.
The margins on the list items are also way too big, I got rid of those. Honestly though, I really don't get why people use lists anymore. You could very well just put the links in the nav directly and save a lot of code.
header {
background-color: green;
border: 1px solid purple;
width: 100%;
height: auto;
}
nav {
background-color: pink;
border: 1px solid grey;
width: 100%;
height: auto;
}
h1,
h2 {
display: inline;
}
/*Set li as buttons*/
#menu {
list-style-type: none;
}
#menu li {
width: 5em;
margin: 0;
display: inline-block;
}
/*display anchor tags as buttons*/
#menu a {
display: inline-block;
background-color: white;
border: 3px solid blue;
text-align: center;
text-decoration: none;
color: black;
}
/*display setting on button hover*/
#menu a:hover {
color: white;
background-color: black;
}
<header>
<h1>Header</h1>
<h2> | chapter</h2>
</header>
<nav>
<ul id="menu">
<li>alpha
</li>
<li>beta
</li>
<li>gamma
</li>
<li>delta
</li>
</ul>
</nav>
You need to clear the container of the floated elements, as they don't properly stretch the container.
Add the clearfix CSS to your sheets:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
and then add the clearfix class to menu:
<ul id="menu" class="clearfix">
fiddle
Alternatively, pick one of the other clearfix solutions from here (where I got the solution above).
Get rid of the float left under menu li and replace it with
#menu li{
display:inline-block;
list-style-type: none;
width: 5em;
margin-left: -2.5em; /*Removes default indentation of lists*/
margin-right: 5em;
}
and if you want to move it over to the right a bit more
#menu li{
display:inline-block;
list-style-type: none;
width: 5em;
margin-right: 5em;
}
I have a list of links that I want to stack one on top of the other for navigation structure. Here's my HTML:
<nav>
<ul>
<li><span class="code">1</span><span class="name">One</span></li>
<li><span class="code">2</span><span class="name">Two</span></li>
<li><span class="code">3</span><span class="name">Three</span></li>
</ul>
</nav>
Each list item should be a square, and they should all align vertically. The text inside each square should have the number (1) in large font with the name (one) directly below it.
But for some reason the name is being pushed way below, into the next anchor tag.
You can see what I have here: http://jsfiddle.net/pmb6pqea/
Anyone know how I can fix this issue?
You just need to remove line-height from your li styling.
http://jsfiddle.net/pmb6pqea/4/
The problem is that you have set 'line-height' for the li tag. remember, line-height will affect all lines inside that container, and not the container height.. so when you've added it - each line inside of the two you have (code, name) are pushed down.
So, I removed the line-height. I've also removed the height:100% from the .code so the .name will pulled closer to it, and set padding-top for the .code to push both to center.
nav {
display: block;
top: 0;
left: 0;
height: 100%;
position: fixed;
width: 150px;
color: #000000;
border-right: solid 2px #000000;
background-color: #FFFFFF;
}
nav ul,
nav ul li {
margin: 0;
padding: 0;
}
nav ul li {
height: 150px;
border-bottom: solid 2px #000000;
}
nav ul li a:link,
nav ul li a:hover,
nav ul li a:visited {
display: block;
color: #000000;
text-decoration: none;
width: 150px;
}
nav ul li a span.code {
padding-top: 15px;
display: inline-block;
font-size: 72px;
width: 100%;
text-align: center;
}
nav ul li a span.name {
display: inline-block;
font-size: 20px;
width: 100%;
height: 40px;
text-align: center;
}
<nav>
<ul>
<li><span class="code">1</span><span class="name">One</span>
</li>
<li><span class="code">2</span><span class="name">Two</span>
</li>
<li><span class="code">3</span><span class="name">Three</span>
</li>
</ul>
</nav>
i have a navigation bar and i want to be on one line it does this however there is only one space between each item, i want them to be spaced equally out, and flexible, so that when i change the window size they adjust.
this is my html
<div class="navigation">
<div class="navhead">
<h2>Navigation</h2>
</div>
<div class="navlist">
<ul>
<li>Home</li>
<li>Chat</li>
<li>Blog</li>
</ul>
</div>
</div>
and this is my css
.navlist li{
text-decoration: none;
color: #000000;
list-style-type: none;
display: inline;
text-indent: 10%;
}
please keep in mind i am in year 7 and don't use too complex words
Just apply width of your li and if needed add padding value. But change inline to table-cell. And to apply the space between them apply border-spacing value as followings:
.navlist{
border-spacing: 10px;
}
.navlist li{
text-decoration: none;
color: #000000;
list-style-type: none;
display: table-cell;
text-indent: 10%;
width: 20%;
padding: 1em;
}
Check this demo
You could display the ul as a table, like this:
HTML:
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
CSS:
ul {
width: 90%;
background: #222;
margin: 0;
padding: 10px;
display: table;
table-layout: fixed;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
background: #555;
text-align: center;
color: white;
padding: 10px 0;
}
Also check this demo.
i have a navigation bar and i am positioning it absolute, i have a problem with the padding on it, the top and bottom padding are not taking effect on the anchor tag, only the left and right, any idea why this might be occurring?
<nav class="main-nav">
<ul class="main-nav-links">
<li class="main-link">HOME</li>
<li class="main-link">ABOUT US</li>
<li class="main-link">ORDER</li>
<li class="main-link">CONTACT</li>
</ul>
</nav>
Here is the css for the nav:
.main-nav {
position: absolute;
bottom: 0;
margin-left: 290px;
}
.main-link {
list-style: none;
background-color: #1281f4;
display: block;
float: left;
}
.main-link > a {
text-decoration: none;
color: #073a4f;
padding: 1em;
}
Add display: inline-block; to the <a>.
The way it is, it is rendered as a piece of text, and as such, it can't have vertical padding.
An alternative would be to use line-height;
Here's a demo: fiddle.
try this
http://jsfiddle.net/xdpHJ/
CSS
.main-nav {
position: absolute;
bottom: 0;
margin-left: 290px;
}
.main-link {
list-style: none;
background-color: #1281f4;
display: block;
float: left;
}
.main-link > a {
text-decoration: none;
color: #073a4f;
padding: 1em;
display: inline-block;
}