I have a navigation bar that has to be 900 pixels wide but the links inside don't necassarily always span the entire width of the bar so I'd like to center the links. The issue is no matter what I try, the links won't center. Here's my CSS:
.center {
text-align: center;
}
nav {
width: 900px;
text-align: center;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
margin: 0 auto 20px auto;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
background: #C0C0C0;
}
nav ul:after {
content:" \2022 ";
clear: both;
display: block;
}
nav ul:last-child:after {
content:"";
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-align: center;
display: block;
padding: 20px 15px;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
z-index: 100;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
I tried adding auto margins to the nav id, and the nav ul id to no avail, then I tried wrapping the list in a div with a class that aligns the content in the center, but that didn't work either. Then I tried text-align to no avail. I don't know what to do so any help would be greatly appreciated!
Here's a JDFiddle I've been working with: http://jsfiddle.net/VCKMU/2/
UPDATE: After taking #Adrifts advice and changing the list items from float:left to inline-block, they now align in the center but now all the child items are inline blocks instead of vertical lists. Any ideas?
Updated JSFiddle: http://jsfiddle.net/VCKMU/6/
Instead of floating the list-items, just change their display value to inline-block; as you have specified text-align: center; on their containing block.
http://jsfiddle.net/VCKMU/6/
The only problem is that this causes the child items to turn into inline lists when they're supposed to be vertical.
You just need to modify the selector to only target the list-items are the children of the first <ul>:
.center > ul > li {
display: inline-block;
}
http://jsfiddle.net/VCKMU/8/
I think it should work if you give nav { width: auto; margin: auto; }
I usually fool around in the Chrome debugger for issues like this.
Related
I cannot seem to get the navigation to vertical-align: middle; along with the title. Any idea how to fix this issue?
https://jsfiddle.net/ozvmkeaq/
header,
nav {
height: 80px;
}
header {
background-color: #E74C3C;
vertical-align: middle;
}
header nav {
float: right;
list-style: center;
text-transform: uppercase;
color: #ECF0F1;
vertical-align: middle;
}
nav li {
display: inline;
padding: 10px;
}
nav a {
display: inline-block;
text-decoration: none;
}
.title {
float: left;
}
.title h1 a {
color: #ECF0F1;
text-decoration: none;
padding: 15px;
}
<header>
<div class="title">
<h1> HTTP</h1>
</div>
<nav>
<ul>
<li class="active">Home</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
</header>
By adding the following CSS, the links vertically center.
ul { margin: 0; height: 100%; display: table; width: 100%;}
nav ul li { height: 100%; vertical-align: middle; display: table-cell;}
I've also updated your fiddle: https://jsfiddle.net/ozvmkeaq/2/
Basically, you need the combination of table and vertical-align properties to tell the browser you want the content in the middle.
As as an alternative, you can also use flex-box.
display: flex;
align-items: center;
You need to set vertical-align:middle to the list items themselves. I would also set it to the links directly to compensate for any list item padding etc.
For example:
nav ul li, nav ul li a{vertical-align:middle;}
This is because vertical-align sets the position based on the parent element, so you need to set it to the child element (different from properties such as text-align where you can set the style to the parent element to affect the elements within).
See more on vertical align at the W3C vertical-align property guide.
Or Try it here.
Try this
header {
background-color: #E74C3C;
height: 5em;
position: relative;
}
header * {
padding: 0;
margin: 0;
}
header a {
text-decoration: none;
}
header nav, header .title {
display: block;
height: 100%;
}
header .title {
position: absolute;
top: 0;
left: 0;
}
header .title h1 {
position: relative;
top: 0.70em;
}
header .title a {
color: #ECF0F1;
margin: 0 0.5em;
}
header nav {
position: absolute;
right: 0;
top: 0;
padding: 0 0.5em;
}
header ul {
list-style-type: none;
list-style-position: inside;
position: relative;
top: 2em;
right: 0;
}
header ul li {
display: inline-block;
padding-right: 0.25em;
}
update this 2 style and it should do the trick.
nav ul
{
padding: 0px;
margin: 0px;
}
nav li
{
display:inline-block;
padding-right:10px;
padding-left:10px;
line-height: 80px;
background-color: green;
}
In my PSD file I have a nav bar with some light effect in the background. I'm a bit concerned whether should I slice the whole nav bar and then add text or just slice it into smaller pieces? Which would be the best practice?
I'm new to this subject so any ideas would be so much appreciated.
You for sure want to cut the nav bar images into pieces. Add them to the background of each of the nav bar links with css. It will save you a big headache later.
Here is a good example of a jsfiddle
Css
#nav {
display: block;
height: 40px;
line-height: 35px;
list-style: none outside none;
margin: 20px auto 0 auto;
position: relative;
max-width: 750px;
min-width: 750px;
width: 78.2%;
}
#nav li {
display: inline;
text-align: center;
float:left;
}
#nav li a{
color: #fff;
display: block;
float: left;
font-family: HelveticaNeue-light,Helvetica,sans-serif;
font-size: 1em;
height: 100%;
padding: 0px 23px 0;
text-align: center;
text-decoration: none;
line-height: 40px;
background:#4D4D4D;
position: relative;
}
#nav li a span {
position: absolute;
left: 0;
top: 40px;
display: none
}
#nav li a:hover, #nav .active a {
background: url("path/to/image.png") no-repeat bottom center #a4c723;
color: #4d4d4d;
}
#nav li a:hover span, #nav .active a span {
display: block;
}
if you mean gradients, you can use gradient generator http://www.colorzilla.com/gradient-editor/
As for me, using as few images as possible is best practice. Draw your navbar with css, good luck
so this is how my navigation looks:
Quite unbalanced right.. my minds kinda fkd up. I have no idea what I am doing already. I'd like to ask some help how to center it out. This is the code of the css:
.navigation {
width: 886px;
height: 84px;
background: url('../img/nav_bg.png') no-repeat;
margin: 0 auto;
}
.navigation ul {
margin: 0;
padding: 0;
list-style: none outside;
padding-top: 22px;
padding-left: 63px;
}
.navigation ul li {
display: inline-block;
list-style-type: none;
}
.navigation ul li a {
display: block;
text-align: center;
line-height: 40px;
color: #fff;
text-decoration: none;
padding-left: 16px;
padding-right: 16px;
text-transform: uppercase;
font-size: 14px;
}
Flexbox is not yet 100% supported cross-browser
As you can see from this link: http://caniuse.com/#feat=flexbox
Flebox nowadays is quite well supported but if you carefully look at those symbols on each square you notice that the support is not full but partial on some browsers (especially mobile).
Global (with prefix)
82.47% + 10.5% = 92.97%
unprefixed:
71.8% + 0.38% = 72.18%
You should to add a prefix if you really want to use it.
**
Using a different method - display:table;
**
On the other hand, I suggest you to use another approach which is much more stable and supported on all browsers:
Look at the support of display:table;
Link: http://caniuse.com/#search=display%3Atable
To solve your problem you can remove all your padding-top with fixed values and use vertical-align:middle and display:table-cell. This way no matter what is the height of the ul it will be always vertically centered.
Center horizontally the ul element using text-align:center;
Center vertically the ul by setting the .navigation container with display:table; and the ul element with display:table-cell; and vertical-align:middle;
Code example:
.navigation {
width: 100%;
height: 84px;
background: lightgrey;
margin: 0 auto;
display:table;
}
.navigation ul {
padding: 0;
list-style: none outside;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.navigation ul li {
display: inline-block;
list-style-type: none;
}
.navigation ul li a {
display: block;
text-align: center;
line-height: 40px;
color: #fff;
text-decoration: none;
padding-left: 16px;
padding-right: 16px;
text-transform: uppercase;
font-size: 14px;
}
Check Jsfiddle: http://jsfiddle.net/a_incarnati/bmkspm69/1/
Flexbox might be able to help you here. To center your li's with flexbox all you would have to do is add these styles to .navigation ul
.navigation ul{
display:flex;
justify-content: center;
align-items:center;
}
Give a text-align: center to the ul.
In general, for centering some elements inside a parent, parent should have text-align:center and the childs should have display: inline-block or display: inline.
HTML:
<ul>
<li>A</li>
<li>B</li>
<ul>
CSS:
ul {
width: 400px;
text-align: center;
}
li {
display: inline-block;
}
I have a drop down menu that I have made but the drop downs don't drop down under their parent item.
My code can be seen here
I think it might be something to do with this part of the code:
nav ul li ul {
position: absolute;
height: auto;
background-color: #f2f2f2;
}
but I'm not too sure so any help would be appreciated...
Simply add position:relative to nav > ul li, this ensures that your absolutely positioned sub menus position themselves relative* to the list items they are children of, and not the parent ul itself.
Demo Fiddle
nav > ul li {
list-style-type: none;
display: inline;
vertical-align: top;
height: 40px;
line-height: 40px;
padding: 10px 15px;
border-right: 2px solid #e6e7e9;
margin: -2px;
position:relative;
}
*It should be noted that the child items positioning themselves relatively to the parent is not related to the parents position being set to relative, only the parent having positioning defined.
You need the parent Li to be positioned relatively
nav > ul li {
list-style-type: none;
display: inline;
vertical-align: top;
height: 40px;
line-height: 40px;
padding: 10px 15px;
border-right: 2px solid #e6e7e9;
margin: -2px;
position: relative; /* Add this */
}
JSfiddle Demo
Try
nav li {
display: inline;
position: relative;
}
nav li ul {
display: none;
position: absolute;
padding: 0;
}
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; }