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.
Related
I have a navigation menu link that has extra whitespace at the bottom of the div tag with the id of nav. It is not because margin or padding, but there is some sort of whitespace that is not allowing the ul tag to touch the bottom of the div with the id of nav. How do I get it to do so. Here is the link
* {
padding: 0;
margin: 0;
}
#nav {
border: 1px solid black;
text-align: center;
min-width: 300px;
}
#nav ul {
padding: 10px 0;
display: inline-block;
}
#nav li {
float: left;
list-style: none;
margin-left: 50px;
}
#nav a {
text-decoration: none;
color: black;
padding: 15px 10px;
}
#nav a:hover {
color: white;
background: black;
}
<div id="nav">
<ul>
<li>link
</li>
<li>link
</li>
<li>link
</li>
<li>link
</li>
</ul>
</div>
The gap is reserved space given to descender text elements (e.g. j, y, g). Remove it by adding vertical-align:top to your <ul>
* {
padding: 0;
margin: 0;
}
#nav {
border: 1px solid black;
text-align: center;
min-width: 300px;
}
#nav ul {
padding: 10px 0;
display: inline-block;
vertical-align: top;
}
#nav li {
float: left;
list-style: none;
margin-left: 50px;
}
#nav a {
text-decoration: none;
color: black;
padding: 15px 10px;
}
#nav a:hover {
color: white;
background: black;
}
<div id="nav">
<ul>
<li>link
</li>
<li>link
</li>
<li>link
</li>
<li>link
</li>
</ul>
</div>
Note that the list items poke out below the div because of the padding you applied to #nav a which can be adjusted.
To fix your problem do this:
Change #nav ul to this:
#nav ul {
padding: 10px 0;
}
Change #nav li to this:
#nav li {
display: inline-block;
list-style: none;
margin-left: 50px;
}
remove margin-left: 50px; from your #nav li.Its creating unwanted white space on your menu.The width of menu will depend on the lenth of text
Something to do with the inline-block it seems. There's no space with inline-flex or display: table;
#nav ul {
padding: 10px 0;
display: inline-flex;
background-color: black;
}
inline-block's biggest problem was it's handling of fonts, it adds a ghost 'padding' of 4 to 5px after each element, depending on browser.
Here's a rewrite that uses the font-size: 0 method to negate the effects.
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* allow percentages to be calculated without border and padding messing things up */
}
#nav {
border: 1px solid black;
min-width: 300px;
}
#nav ul {
list-style-type: none;
font-size: 0; /* font-size: 0; is a method to remove the ghost padding added after inline-blocks, one of the many reasons display: flex is becoming so popular */
}
#nav li {
display: inline-block;
width: 25%; /* control width here */
text-align: center;
}
#nav a {
display: block; /* allow element to expand to match parent size by changing from <a> default display: inline to block */
text-decoration: none;
color: black;
font-size: 15px; /* reset font-size here */
line-height: 30px; /* control element height here */
}
#nav a:hover {
color: white;
background: black;
}
<div id="nav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
fiddle
https://jsfiddle.net/Hastig/wfrxgxjm/
I'm trying to make my nav bar be horizontal and centered. Right now, it's all smushed to the right of the website. How do I control where the bar is located?
Also, why can't I just have all my css under #nav (why do I need #nav ul li, etc?)
#nav{
width: 90%;
text-align: center;
font-size: 35px;
text-align: center;
}
#nav ul li{
display: inline;
height: 60px;
text-align: center;
}
#nav ul li a{
padding: 40px;
background: #25ccc7;
color: white;
text-align: center;
}
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
You need the different css selectors because not all the styles are meant to be applied to the surrounding container #nav, but to certain elements inside it. With pure CSS, it is not possible to nest rules. If nesting is what you were asking for, take a look at LESS or SASS (DuckDuckGo is your friend).
Your list items were pushed a little to the right because that is the natural behaviour of list items unless you overwrite the responsible css attributes margin and / or padding (depending on the browser). So just reset both to 0 in your CSS for the list items.
#nav {
background-color: #e8e8e8;
width: 90%;
font-size: 35px;
text-align: center;
margin: 0 auto;
}
#nav ul {
display: inline-block;
white-space: nowrap;
margin: 0;
padding: 0;
}
#nav ul li {
display: inline;
text-align: center;
margin: 0;
padding: 0;
}
#nav ul li a {
padding: 40px;
background: #25ccc7;
color: white;
text-align: center;
}
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
My Css menu is fine when I first set it then when I close I10 and re-open the menu is vertical. Have a look at my code.
/** MENU */
#menu {
overflow: hidden;
background: #101010;
}
#menu ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
display: inline-block;
}
#menu a {
display: block;
padding: 0px 40px 0px 40px;
line-height: 70px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-size: 16px;
font-weight: 200;
color: rgba(255,255,255,0.5);
border: none;
}
#menu a:hover, #menu .current_page_item a {
text-decoration: none;
color: rgba(255,255,255,0.8);
}
#menu .current_page_item a {
}
#menu .last {
border-right: none;
}
Please let me know where I am going wrong.
The HTML:
<div id="wrapper">
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1>Investment Services</h1>
</div>
<div id="social">
<ul class="contact">
</ul>
</div>
</div>
<div id="menu" class="container">
<ul>
<li class="current_page_item">Homepage</li>
<li>Procedures</li>
<li>Task Rota</li>
<li>Docs & Links</li>
<li>Contact Us</li>
<li>Feedback</li>
</ul>
</div>
</div>
In cases like this, <ul> typically isn't the problem - it's the <li>
You'll be better using something like this to create a horizontal menu:
ul {
display: block
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
float: left;
}
Update
According to this JSFiddle, your menu is displayed horizontally?
Try this if your problem is not yet solved:
Give an Id for your "ul" which is inside the 'menu' div and then try the following class:
For suppose the ID of ur 'ul' is 'myUl'
#myUl li
{
display: inline;
}
Because li items need to be aligned horizontally and to be followed after their parent element while giving class name. Here the parent element will be ul but not the div
i have a jsfiddle below with an example of my links displayed in a in-line block, what i don't understand is why is there some sort of padding or margin at the start of every anchor tag, maybe someone could help me out, i am not sure if i have missed something but i just cant seem to find out why that padding is there?
This is the html code:
<div class="wrapper">
<header class="main-header">
<h1>blah blah blah</h1>
<nav class="main-nav">
<ul class="main-nav-links">
<li>Home</li>
<li>About Us</li>
<li>Get a Quote</li>
<li>Contact</li>
</ul>
</nav>
</header>
This is all the css code:
.wrapper {
width: 100%;
min-width: 960px;
}
.main-header {
position: relative;
width: 100%;
height: 60px;
background-color: #41a2cd;
}
.main-header > h1{
float: left;
margin: 11px 0 0 5px;
color: #073a4f;
}
.main-nav-links > li {
list-style: none;
display: inline-block;
}
.main-nav-links li > a {
text-decoration: none;
display: block;
color: #073a4f;
}
.main-nav-links > li {
border-right: 1px solid #45b1e1;
}
.main-nav-links li > a:hover {
background-color: #ffffff;
/*background-color: #50bae8;*/
}
http://jsfiddle.net/pDvZt/
When you use display: inline-block; it will leave 4px spacing between the elements, so you need to use margin-left: -4px; or consider using float instead.
Demo (Using margin-left: -4px;)
.main-nav-links > li {
list-style: none;
display: inline-block;
margin-left: -4px;
}
Demo 2 (Using float property)
.main-nav-links > li {
list-style: none;
float: left;
}
Note: Don't forget to clear your floating elements if you use float:
left; for li property.
Edit: I would like to specify that inorder to prevent this behavior you can also modify your markup(if you've access to it) than you can line up your li elements so that white space between the elements won't be there anymore, for example
<ul>
<li></li><li></li><li></li><li></li>
</ul>
One solution is to put
<li></li><li></li>
in one line. This is actually because the new lines are formatted as spaces.
<li></li><li></li>
Its the best solution you can get
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.