I want to my nav-bar width fit automatically.
Here is part of my CSS
#nav-bar {
width: 960px;
margin: 0 auto;
}
Here is my whole working code
http://codepen.io/anon/pen/ogBxxN
Here is my result
When I adjust the width to 900, this is what I see
When I adjust the width to 1000, this is what I see
As you can see, none of them give me the best result.
I was wondering maybe some CSS expert can help me fixing this issue.
This should do it for you using flexbox
#nav-bar ul {
width: 100%;
margin: 0;
padding: 0;
border: 1px solid #c2c2c2;
float: left;
display:flex;
flex-direction:row;
}
#nav-bar li {
text-align: center;
float: left;
order:1;
flex-grow:1;
}
by the way you are styling the list items twice, with .inline li and #nav-bar li
Demo
Trying adding white-space: nowrap; to your ul element and only use display: inline-block; on your li elements as opposed to the float: left; that is there.
Example:
http://codepen.io/jessikwa/pen/YPNqpw
Using table layout:
*{margin:0;padding:0;}
#nav-bar ul {
width: 100%;
border: 1px solid #c2c2c2;
display:table;
white-space:nowrap;
text-align:center;
}
#nav-bar li { display:table-cell; }
#nav-bar li a{
position:relative;
display:block;
background:#eee; /*put back your gradients here */
line-height: 40px;
height: 41px;
font-size: 20px;
color:#000;
padding: 0 10px;
}
<div id="nav-bar">
<ul class="inline">
<li>Europe</li>
<li>Asia</li>
<li>North America</li>
<li>Oceania</li>
<li>South America</li>
<li>South America</li>
</ul>
</div>
That's it.
Using your current code, in your CSS:
.inline li {
width: 16.666%;} // 100 divided by number of items
#nav-bar li a {
padding: 0;} // remove the padding
Related
I am having some problems getting my menu to center on the screen. I thought setting the display to block, and making the left and right margins to auto, would do this for me; however, I was wrong. Here is a JSFiddle to help show the problem. Thanks for the help.
<ul id="menuList">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
#menuList{
display:block;
width:100%;
margin-left:auto;
margin-right:auto;
}
#menuList ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menuList li
{
list-style: none;
float: left;
margin-right: 0.5em;
}
#menuList a
{
display: block;
width: 8em;
color: black;
text-decoration: none;
text-align: center;
}
set menu to inline-block and parent to text-align:center
JS Fiddle
replace body with your parent id or class
body {
text-align:center;
}
#menuList {
display:inline-block;
}
The best way to center an element is by using margin: 0 auto; but the element need to have a fixed width (not 100% as you have).
So just add:
#menuList {
width:408px;
margin:0 auto;
}
Vitorino's answer is generally a bad idea. You don't want to put text-align: center on your body.
You could, however, set that CSS on the ul, and display the menu items inline(-block). As such.
#menuList ul {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
#menuList li {
list-style: none;
display: inline-block;
margin-right: 0.5em;
}
You have to change the width, example:
#menuList{
display:block;
width:70%;
margin-left:auto;
margin-right:auto;
}
You used display block, so that your elements start new line, and then floats, that they would stay in same line. Just don't use this weird combo.
If you need items stay in line use 'display:inline;'
if you need items to stick to either left or right side of parent element, use floats. Be careful as floats often mess all the thing up. There are other ways to float things, that doesn't pull them out of document flow.
Here is fixed CSS:
#menuList{
display:block;
width:100%;
margin: 0 auto;
text-align:center;
}
#menuList ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menuList li
{
list-style: none;
display: inline;
margin-right: 0.5em;
}
#menuList a
{
display: inline-block;
width: 8em;
color: black;
text-decoration: none;
text-align: center;
}
I have a unordered list, which is inside a div element. The goal is to make list elements fill the <div> from one side to the other perfectly.
Right now the left side is positioned just as I need, but I need the right side to look the same way. Hopefully you get the idea of what I mean.
Fiddle
HTML code:
<div id="currency">
<ul>
<li>Currency £</li>
<li>Sign in</li>
<li>My Account</li>
<li>My Gifts</li>
<li>My Basket</li>
</ul>
</div>
CSS code
#currency{
height: 11px;
width: 360px;
background-color: green;
float: right;
margin-top: 11px;
margin-right: 11px;
line-height: 11px;
font-size: 11px;
text-align: justify;
}
#currency ul{
list-style-type: none;
margin: 0;
padding: 0;
display: table;
table-layout: fixed;
width: 100%;
}
#currency ul li{
display: table-cell;
}
I think want you want to achieve is using text-align properly.
#currency ul li{
text-align: center;
}
#currency ul li:first-child {
text-align: left;
}
#currency ul li:last-child {
text-align: right;
}
Fiddle
Try the flexbox model since it's meant for situations like this:
The flex CSS property is a shorthand property specifying the ability
of a flex item to alter its dimensions to fill available space. Flex
items can be stretched to use available space proportional to their
flex grow factor or their flex shrink factor to prevent overflow.
#currency {
width: 500px;
background-color: green;
float: right;
margin-top: 11px;
margin-right: 11px;
line-height: 11px;
font-size: 14px;
text-align: justify;
padding:10px;
vertical-align:middle;
}
#currency ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content:center;
width: 100%;
}
#currency ul li {
flex-grow:2;
text-align:center;
margin:3px;
background:#fc0;
height:20px;
padding:5px;
}
See fiddle
All colors, paddings and margins were added in order to show how it works since your tiny example is very difficult to see
Not sure why there is a space to the right of each li, as you can see here when you mouse over it. Obviously don't want it there and can't figure out how to get rid of it. Any help would be greatly appreciated!
Here is the code:
HTML:
<header>
<div class="nav-container">
<nav class="nav-items" role="navigation">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
position: fixed;
top:0;
background-color:#2C5463;
height:2.3em;
width: 100%;
border-bottom-color: black;
border-bottom-style: solid;
}
header .nav-container {
margin: 0 30px;
height: 100%;
display: block;
padding: 0;
}
.nav-items {
float: left;
margin: 0;
height: 100%;
}
.nav-items ul {
display: inline-block;
margin: 0;
height: 100%;
}
.nav-items ul li {
display: inherit;
border-left: 1px solid #c8c8c8;
height: 100%;
margin: 0;
}
.nav-items ul li a {
display: inherit;
text-decoration: none;
color: #ffffff;
margin: 0 auto;
padding-top: 8px;
white-space: nowrap;
height: 100%; /* Width and height of top-level nav items */
width: 90px;
text-align:center;
vertical-align: middle;
}
.nav-items ul li:hover {
background: #617F8A
}
http://jsfiddle.net/eF83x/
Inline elements are sensitive to white space. Remove the white space and the problem goes away.
Ex:
<ul>
<li>list1</li><li>list2</li><li>list3</li>
</ul>
jsFiddle example
You can remove the spaces between the list items literally, occupy the space with HTML comments (<!-- -->), or float them left.
Just needs to changes on css class here for your solution,
.nav-items ul
{
display: **inline-table**;
margin: 0;
height: 100%;
}
Demostration
What you could also do is make the lis float left and display them as block. This will fix it without messing with the html code.
.nav-items ul li {
float: left;
display: block;
border-left: 1px solid #c8c8c8;
height: 100%;
margin: 0;
}
jsFiddle example
OK so here is my code, I don't understand why the first blank space is appearing to the left hand side of the page.
CSS
.header-left ol{
width: auto;
float: left;
display: block;
background-color: #6899D3;
}
.header-left li{
list-style:none;
float:left;
}
.header-left a {
color:#000;
display:block;
height: 50px;
text-align:center;
vertical-align:middle;
text-decoration:none;
min-width: 100px;
overflow: auto;
border-radius: 20px;
}
.header-left a:hover {
color:#000000;
text-decoration:none;
}
#nav1 a:hover { background-color: #FF5B0D; }
#nav2 a:hover { background-color:#00FF40;}
#nav3 a:hover { background-color:#FF0080;}
#nav4 a:hover { background-color:#00CCFF;}
#nav5 a:hover { background-color: #FFFF00; }
HTML
<div class="header-left">
<ol>
<li id="nav1">a</li>
<li id="nav2">b</li>
<li id="nav3">c</li>
<li id="nav4">d</li>
<li id="nav5">e</li>
</ol>
</div>
You need to reset the natural padding and margin of the body and ol. Set:
body{
margin: 0;
padding: 0;
}
.header-left ol{
width: auto;
float: left;
display: block;
background-color: #6899D3;
margin: 0; //RESET DEFAULT
padding: 0; // RESET DEFAULT
}
Add padding-left:0; to your .header-left ol rules.
.header-left ol {
width: auto;
float: left;
display: block;
background-color: #6899D3;
padding-left:0;
}
jsFiddle example
The reason to that is because u are using <ol><li></li></ol> which by default has a left padding. Even if you set list-type:none, you are not getting rid of the left padding. Instead, in the ol code block set padding:0; or padding-left:0 like this:
.header-left ol{
width: auto;
float: left;
display: block;
background-color: #6899D3;
padding-left:0;
}
This should solve your problem.
In your margin try putting in something like this as this will drag it up and pull the bottom up
This is to be put in your styles CSS sheet
margin: -30px 0px -30px 0px;
It is common to have a set of links in a footer represented in a list, such as:
<div id="footer">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
I want everything inside div#footer to be centered horizontally. If it was a paragraph, you would just easily say: p { text-align: center; }. Or if I knew the width of the <ul> I could just say #footer ul { width: 400px; margin: 0 auto; }.
But how do you center the unordered list items without setting a fixed width on the <ul>?
EDIT: clarification - the list items should be next to each other, not below.
The solution, if your list items can be display: inline is quite easy:
#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }
However, many times you must use display:block on your <li>s. The following CSS will work, in this case:
#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }
Use the below css to solve your issue
#footer{ text-align:center; height:58px;}
#footer ul { font-size:11px;}
#footer ul li {display:inline-block;}
Note: Don't use float:left in li. it will make your li to align left.
One more solution:
#footer { display:table; margin:0 auto; }
#footer li { display:table-cell; padding: 0px 10px; }
Then ul doesn't jump to the next line in case of zooming text.
It depends on if you mean the list items are below the previous or to the right of the previous, ie:
Home
About
Contact
or
Home | About | Contact
The first one you can do simply with:
#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
The second could be done like this:
#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline; }
#footer a { padding: 2px 12px; background: orange; text-decoration: none; }
#footer a:hover { background: green; color: yellow; }
Try wrapping the list in a div and give that div the inline property instead of your list.
The answer of philfreo is great, it works perfectly (cross-browser, with IE 7+). Just add my exp for the anchor tag inside li.
#footer ul li { display: inline; }
#footer ul li a { padding: 2px 4px; } /* no display: block here */
#footer ul li { position: relative; float: left; display: block; right: 50%; }
#footer ul li a {display: block; left: 0; }