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
Related
I am having a problem when using the css property margin-top on <li> elements.
I am trying to have my list align to the top of the page but my li element isn't moving to the top as it should.
Below is my HTML code:
<body>
<div class="main_header">
<h1>Title</h1>
<ul>
<li>About Me</li>
<li>Order</li>
<li>Designs</li>
<li>Contact</li>
</ul>
</div>
</body>
This is my CSS code:
.main_header li a {
margin-top: -20px;
display: inline-block;
}
If your looking for a inline navigation style ul change the css to:
.main_header li {
margin-top: -20px;
display: inline-block;
}
If your looking to move the whole list up try:
ul {
margin-top:-10px;
}
If your looking to move just the li elements closer to each other try:
.main_header li {
display: block;
}
Note - if your looking to have a inline navigation, use the <nav> html element instead to reduce styling, as it automatically places the links inline
Replace
.main_header li a{
margin-top: 20px;
display: inline-block;
}
by
.main_header li {
margin-top: 20px;
display: inline-block;
}
Output
Check it out.
From what I can gather - you're wanting to do something like this...
HTML
<div class="main_header">
<h1>Title</h1>
<ul>
<li>About Me</li>
<li>Order</li>
<li>Designs</li>
<li>Contact</li>
</ul>
</div>
CSS
.main_header {
width: 500px;
margin: 0 auto;
}
.main_header ul {
list-style: none;
margin: 0;
padding: 0;
}
.main_header li:first-child {
border-left: 1px solid #ccc;
}
.main_header li {
display: inline-block;
margin: 0;
padding:10px;
border-right: 1px solid #ccc;
}
Codepen
http://codepen.io/anon/pen/zKxGPY
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 know that when you put float: right to a li element it displays in a reversed order, but how can I fix the order so it displays "correctly" and on the right side of the website? Now it displays in the left side of the website. I've tried to read some old questions but didn't find anything that could help me, and also, how can I make the header display in the middle of the #333333 colored header without padding? Will auto element work?
.header {
background-color: #333333;
height: 50px;
width: 100%;
}
.upper_header ul {
margin: 0px;
float: right;
}
.upper_header li {
display: table-cell;
vertical-align: middle;
float: left;
}
.upper_header a {
text-decoration: none;
color: #fff;
}
<div class="header">
<div class="headerContainer">
<ul class="upper_header">
<li>Home
</li>
<li>About Us
</li>
<li>Team
</li>
<li>News
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
I've tried putting float: right to the ul element and float: left to the li element, then the order is correct but the position of it is in the left. (Sorry for putting two questions in one thread, didn't want to wait another 30 minutes to submit another question.)
You can set your LI's to display: inline-block then you dont need to use floats.
Inline-block elements then can be aligned using text-align
Note:
Inline-block can cause a space between elements, for more info about then please read this https://css-tricks.com/fighting-the-space-between-inline-block-elements/
.header {
background-color: #333333;
width: 100%;
text-align: right;
}
.upper_header {
width: 100%;
}
.upper_header li {
display: inline-block
}
.upper_header a {
padding: 5px 10px;
display: block;
text-decoration: none;
color: #fff;
}
<div class="header">
<div class="headerContainer">
<ul class="upper_header">
<li>Home
</li>
<li>About Us
</li>
<li>Team
</li>
<li>News
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
First - you have some mistakes in your code, in CSS you use .upper_header ul, but this is not correct syntax in your context. Right is ul.upper_header (your ul list is not under class upper_header, but on the same level), so it does not have effect for you.
If you don't need so much nested div and not so much classes, prevent using it. Example is below (this is solution with centered menu):
.header ul {
text-align: center;
list-style: none;
}
.header li {
display: inline-block;
}
http://jsfiddle.net/aqhesrjn/4/
Then you can easily play with text-align: right in ul element
.header ul {
text-align: right;
list-style: none;
}
.header li {
display: inline-block;
}
http://jsfiddle.net/aqhesrjn/3/
slightly modified CSS & you are using wrong selector(.upper_header ul)instead of ul.upper_header.
ul.upper_header ==> center to align center
ul.upper_header ==> right to align right
.header {
background-color: #333333;
height: 50px;
width: 100%;
}
ul.upper_header {
margin: 0px;
text-align: center;
}
.upper_header li {
display: inline-block;
}
.upper_header a {
text-decoration: none;
color: #fff;
}
<div class="header">
<div class="headerContainer">
<ul class="upper_header">
<li>Home
</li>
<li>About Us
</li>
<li>Team
</li>
<li>News
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
you can do this as well ,one of the many options available depending upon ofcourse what you are trying to get as an end result.and you were using that upper_header class in a wrong way,you dont even need that.
.header {
background-color: #333333;
height: 50px;
width: 100%;
}
.headerContainer{width:30%;
float:right;}
.headerContainer ul li {
display:inline;
}
.headerContainer ul li a {
text-decoration: none;
color: #fff;
}
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 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.