I'm trying to center <li> items in the page and next to each other without any luck!
I have tried all sorts of ways from display:table; to magin:0 auto; and display:block; and display:inline-block; etc etc... and unfortunately nothing seems to work.
To explain this I've created this JSFIDDLE
Please expand the HTML section of that fiddle to see the menu items in the normal mode (green bar).
the CSS Code that I have been messing around with is this part:
nav {
/*position: absolute;
top: 0;
right: 5px;*/
}
nav li {
float: left;
display: inline-block;
}
nav li a {
font-size: 11px;
color: #9aa6af;
padding: 24px 15px;
display: block;
}
nav li a:hover {color: #000;}
could someone please advise on this issue?
any help would be appreciated.
Thanks in advance.
basicly you can do :
nav {
/*position: absolute;
top: 0;
right: 5px;*/
text-align:center
}
nav li {
display: inline-block;
}
Float kills display and cannot be centered
You have to manipulate the <ul> parent, for example in your jsfiddle setting display: table; margin: 0 auto; to the nav will center the nav menu
Try this technique:
/* center nav */
nav > ul { /* center ul */
float: left;
position: relative;
left: 50%;
}
nav > ul > li { /* compensate ul position */
float: left;
display: block;
position: relative;
right: 50%;
}
nav > ul > li > a {
display: block;
}
I've updated your fiddle https://jsfiddle.net/tianes/h1m9aog6/4/
on ul apply this
ul
{
display: table;
margin: 0 auto
}
nav {
/*position: absolute;
top: 0;
right: 5px;*/
text-align:center
}
nav li {
display: inline-block;
}
Related
I am trying to make the top menu vertically center without assigning value like margin-top: 50px; because some of my friends say this is not the ideal approach.
/* Nav Section */
.nav {
width: 100%;
padding: 0;
margin: 0;
}
.nav-contain {
width: 1100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.logo {
z-index: 10;
display: inline-block;
background: #2980B9;
padding: 65px 50px 35px 45px;
font-size: 36px;
line-height: 42px;
color: #fff;
text-align: center;
}
.logo a {
color: #FFFFFF;
text-decoration: none;
}
#medical {
display: block;
text-transform: uppercase;
}
.menu {
padding: 0;
margin: 0;
float: right;
display: table-cell;
position: relative;
}
.menu a {
text-decoration: none;
color: #505050;
font-weight: bold;
}
.menu ul {
padding: 0;
margin: 0;
float: left;
top: 50%;
}
.menu ul ul {
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
display: block;
margin-left: 45px;
}
.menu ul ul {
position: absolute;
left: -999px;
}
.menu ul li:hover ul {
left: auto;
}
.menu ul li ul li {
margin-left: 0;
float: none;
margin-top: 15px;
}
<div class="nav">
<div class="nav-contain">
<div class="logo">
<span id="medical">Medical</span><span id="company"> Company</span>
</div>
<!-- Logo -->
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul class="dropdown">
<li>Sample</li>
<li>Sample</li>
</ul>
</li>
<li>Gallery</li>
<li>Prices</li>
<li>Contact</li>
</ul>
</div>
<!-- Menu -->
</div>
<!-- Nav Contain -->
</div>
<!-- Nav -->
Remove float:right on .menu, and set both .logo and .menu to this:
.logo, .menu {
display: inline-block;
vertical-align: middle;
}
If you need .menu to stay on far right side, also add this:
.nav-contain {
text-align: justify;
}
.nav-contain:after{
content: '';
display: inline-block;
width: 100%;
}
How it works:
Set text-align: justify; will line up the two inner inline blocks to the left and right edges of the container.
Create an invisible 100% width element by using :after or :before pseudo-element stretching the box to occupy the entire space of the container. Otherwise inline element occupies only the space bounded by the tags that define the inline element.
One easy way to center here is to use Flexbox:
.nav-contain {
/* what is already there */
display: flex;
align-items: center;
}
Beware of browser support (check caniuse.com to see if the compatibility level is acceptable to you).
This is superior to the margin-top solution as it ensures that you won't have to manually change that 50px each time the size of the image or anything else in the navbar changes.
Try:
.menu > ul > li {
min-height:50px;
display: table;
}
.menu > ul > li > a {
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/rawat/4h05rq2s/
Since your navbar remains the same height the whole time, I suggest you give the .nav-contain the following code:
.nav-contain {
width: 1100px;
margin: 0 auto;
line-height: 184px;
padding: 0;
overflow: hidden;
}
Note the line-height.
This will, once you smaller the available width of your device, result in a probably not so nice looking huge navigation bar. For this, I suggest media queries.
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;
}
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.
I'm trying to build a HTML/CSS dropdown menu which is flexible in width. Due to the position:absolute for the second level of the navigation, I don't get the width of the first level. Removing the position:absolute will move all following elements on hover...
How can I solve this?
Here is the code:
ul {
margin: 0;
padding: 0;
list-style: none;
}
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
}
.level_1 > li:hover ul {
display: block;
}
.level_2 {
display: none;
position: absolute;
width: 45%;
}
.level_2 li {
background-color: #535B68;
}
<ul class="level_1">
<li>
Level one (1)
<ul class="level_2">
<li>Level two (1)</li>
</ul>
</li>
<li>Level one (2)</li>
</ul>
<p>Paragraph</p>
See the result here: http://jsfiddle.net/5uf2Y/
Hover "Level one (1)" and you will see, that the second level is not the same size like the first level...
You have forgotten two elements for display 100%.
Correction here
1st elements forgets it's :
Position relative on level_1 > li
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
**position:relative;**
}
2nd elements corrections it's :
change size of 2nd li
.level_2 {
display: none;
position: absolute;
width: 100%;
}
With "width:100%" on .level_2 it automatically turns out with the width of its parent.
Add position:relative to level_1 > li
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
position:relative;
}
Try to set the body { width:100%;} property, it will fix this issue, like shown below (added to your original CSS):
body{ width:100%;}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
}
.level_1 > li:hover ul {
display: block;
}
.level_2 {
display: none;
position: absolute;
width: 45%;
}
.level_2 li {
background-color: #535B68;
}
Hey man you have a margin of 6px on your first row li thats why its a little bigger. I would use a margin left rather than right. That should fix the spacing.
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; }