I've tried many methods but cannot get this menu centered .. Any ideas?
You can view the page here:
http://jsbin.com/obecig/1/edit
I tried text-align:center in the #nav ul selector but no luck..
<html>
<head>
<style type="text/css">
#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; position:relative;}
#nav li ul.first {left:-1px; top:100%;}
li, li a {color:#000;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}
ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid;}
li:hover { position:relative; z-index:2000; }
</style>
</head>
<body>
<ul id="nav">
<li>Menu 1
<ul class="nav first">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</body>
</html>
Seeing how everyone answered the same thing and no one bothered to explain why... here we go:
As you all know, centering a block level element can be a pain when you don't know how. First of all, most of us know that margin: 0 auto; works, but not everyone knows why.
A quick breakdown of margin: 0 auto; has to do with the way CSS accepts shorthand notation for certain properties. Saying margin you are of course targeting the margin of the given element and the 0 part is using shorthand notation to say: 0 on the top and 0 on the bottom ... while adding auto at the end you are saying: auto margin on the left and auto margin on the right.
The above will not work if you don't have a defined width for the element in question. In this case the element has an ID attribute of #nav ... this is why the examples that everyone gave in their answers have a fixed width. The logic behind this is that a block level element extends 100% of it's parent container by default unless you specifically define otherwise in your CSS.
So in theory this also works for centering, and while it's more markup and not the best approach for simplicity's sake, I'm only showing it for illustrative purposes.
#nav {
width: 300px;
margin-left: auto;
margin-right: auto;
}
Everyone is more used to looking at it like this... and we use it like this because it's shorter.
#nav {
width: 300px;
margin: 0 auto;
}
The zero is not a must... Remember that it's the top and bottom margin of your element. So with that said, here's an example of the element with a 20 pixel margin on the bottom and centered.
#nav {
width: 300px;
margin: 0 auto 20px auto;
}
Last but not least... The shorthand notation for this property (margin) is the same as for the: border , padding , etc. It stars from Top... going clockwise to Left with Right and Bottom in between the two.
So it's: top, right, bottom, left. Like so: margin: 10px 20px 30px 40px
You need to give it a width, and then set the horizontal margins to auto. That's the quickest way anyways.
add this to your css:
#nav
{
width:100px;
margin: 0 auto;
}
To center something, it needs a width, and margin: 0 auto, so if you add this code:
#nav {
width: 100px;
margin: 0 auto;
}
It should (and did for me) work
#nav{
width:80px;
margin: 0 auto;}
Related
I have some sort of space in between my li tags I don't where it's coming from? How can i remove this?
Also, I'd like to change the color of the font to white on hover of the li
JSFIDDLE http://jsfiddle.net/omarel/tfyxL66c/
CSS
.nav_container {
text-align: center;
width:100%;
}
.nav_container ul {
/* margin-top:15px; */
margin-left:30px;
}
.nav_container ul li {
display: inline-block;
text-align: center;
padding-left:40px;
padding-right:40px;
margin:0px;
height:80px;
cursor:pointer;
}
.nav_container ul li:hover {
background-color:#08298A;
}
.nav_container a:hover {
color:#fff;
}
header {
width:100%;
margin: auto;
box-shadow:0 0 8px rgba(0,0,0,0.1);
min-width:410px;
}
.navlogo {
z-index:99;
}
.navlogo img {
width:100px;
margin:10px 10px 10px 10px;
}
.floatleft {
float:left;
}
.floatright {
float:right;
}
.centerdiv {
margin:0 auto;
}
#media only screen and (min-width:700px) {
header {
max-width:1250px;
}
.container {
max-width:1250px;
}
.box2 {
width:32%;
height:300px;
float:left;
}
.box2left {
width:65%;
height:600px;
float:left;
}
}
div {
border:solid 1px #E6E6E6;
position:relative;
}
ul li {
border:solid 1px #E6E6E6;
}
HTML
<div class="navlogo floatleft">
<img src="images/logo.png" />
</div>
<div class="floatleft">
<div class="nav_container">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
<div class="floatright">
<div class="nav_container">
<ul>
<li>Profile</li>
<li>Sign out</li>
</ul>
</div>
</div>
</header>
<div style="clear:both;"></div>
Answering your second question first as the answer is shorter: use the :hover pseudo class.
EXAMPLE
li:hover a{color:#fff;}
More information on pseudo classes
To answer your first question, then; setting an element's display property to inline or inline-block will cause the white space surrounding it to be treated just like the space surrounding any other inline element.
You can workaround it in a number of ways
Remove all line breaks from within your list:
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
Use comments to hide the line breaks from the browser:
<ul><!--
--><li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li><!--
--></ul>
Use CSS to set the font-size of the parent element to 0 and then "reset" it for the child elements:
html{font-size:20px;}
ul{font-size:0;}
li{font-size:1rem;}
Alternatively, if you're not 100% set on using display:inline-block, you can use floats or flexbox instead.
To change the color of the links to white, use this css:
.nav_container ul li:hover a {
color:white;
}
However, only the text will be clickable, the li element won't be clickable. Another way to do the same thing is to apply all width/height/background styling to the link, instead of the li.
As Shaggy mentioned, to eliminate extra spacing when using inline-block you should remove all spaces in your html between your menu li items.
As for changing the link color on hover you should add the following to your css code:
.nav_container li:hover a {
color:#FFF;
}
I´m trying to put a border-bottom to my ul li a menu element that appears when menu item is clicked.
I already have this effect working, but my border-bottom appears a bit down and its like behind my nav menu.
Can someone give me a little help understanding what is happening?
My Html:
<nav id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
My CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
// this boder is behind the menu!
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
My jsfiddle:
http://jsfiddle.net/mibb/Y4HKF/
It's because you set the display:block for your a, so the border will be around the box (which has height set to 46px). Looks like you explicitly set padding-bottom to 0 and then it still should work (the bottom border should be close to the link text?) but not really, because you also set the line-height to be equal to the height (both are 46px), so the text is centered vertically and give a space between the baseline and the border-bottom.
To solve this problem, simply remove the line display: block; in your css for the a tag. You don't need that at all, removing will solve your problem:
#menu ul li a {
text-decoration:none;
color:#ccc;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
Just add the box-sizing:
#menu ul li.active a {
box-sizing: border-box;
}
you set the border to an anchor. an anchor will just take the space of whatever element its in/around,
so setting border to an anchor is like setting it to the <li> itself.
you should wrap your text in the anchor with a span, that takes the space of the text and set the border to the span.
here is an example:
http://jsfiddle.net/TheBanana/Y4HKF/5/
I'm not sure your JSFiddle represents your problem accurately, but I'll suggest a solution based on that anyway.
Your JSFiddle example doesn't show a border on "li.active a" at all (if you remove the green background on the ul element, you'll see that there is no border present.) The reason, at least in the JSFiddle example, is that the comment "// this boder is behind the menu!" was not recognized as a CSS comment, thus preventing the code following it from working. I actually could swear I've seen this work fine in some environments, but it definitely wasn't working in this case.
See this thread on Stack Overflow: Is it bad practice to comment out single lines of CSS with //?
Besides that, your code seems to work just fine (I assume your JavaScript works, so I added class="active" to one of your li tags.)
In the following code, the black border is showing just below the bottom of the ul. If you want to change where it shows up, you should only have to change the height of the a element.
The HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
The CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
/* this boder is behind the menu! */
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
The JSFiddle:
http://jsfiddle.net/mibb/Y4HKF/
Question
I am trying to put every li at the bottom of the ul, making the bottom of every element (not the text, the actual block element of the ui, whether that's the image or the whole li of text) touching. This should be a simple problem with vertical-align:bottom and display:table-cell being the fix, but for some reason I haven't been able to get it to work. What is the best way to accomplish this?
Its likely there's a question that already answered this, but I've spent a lot of time searching. If there's one that applies, please just point me to it.
Example
Fiddle With It:
http://jsfiddle.net/rxg9m/
HTML
<head runat="server">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body>
<div id="outer">
<div id="inner">
<nav>
<ul>
<li>Home
</li>
<li>Product
</li>
<li><img src="logo.png" alt="Javid Logo"/>
</li>
<li>Contact
</li>
<li>Info
</li>
</ul>
</nav>
</div>
</div>
</body>
CSS
* {
font-family:Calibri;
}
#outer {
text-align:center;
}
#inner {
display:inline-block;
}
nav ul {
margin:0px;
padding:0px;
bottom:0;
list-style:none;
}
nav li {
float:left;
display:table-cell;
vertical-align:bottom;
margin:0px;
padding:0px;
}
nav li a {
padding:16px 8px 16px 8px;
margin:0px;
width:120px;
display:block;
background-color:lightblue;
text-decoration:none;
text-emphasis:none;
color:black;
border:0px none black;
border-bottom:1px solid black;
}
nav li a.left {
text-align:left;
}
nav li a.right {
text-align:right;
}
#logo {
padding:0px;
width:auto;
height:auto;
line-height:0px;
border:0px none black;
}
Fiddle Here: http://jsfiddle.net/SinisterSystems/rxg9m/2/
nav li a {
padding:32px 8px 0px 8px;
You are setting a padding on the bottom. You should counteract that and double your padding on top and set your padding-bottom to 0.
Because you had padding applied, it WAS on the bottom technically. The only problem is it also expanded all the way to the top.
Edit: http://jsfiddle.net/SinisterSystems/rxg9m/4/
Aligning WITHIN the ul is very tricky, and your best bet would be to just align the ul inside of a wrapper of sorts. That way, you can use position:relative; on the wrapper and absolutely position your ul to the bottom. And yeah, style from there.
Basic Example:
<div class="wrapper">
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
* {
margin:0;
padding:0;
}
.wrapper {
height:200px;
background:#CCC;
position:relative;
}
ul {
position:absolute;
bottom:0;
width:100%;
}
ul li {
list-style:none;
float:left;
display:inline-block;
min-width:25%;
text-align:center;
}
http://jsfiddle.net/rxg9m/1/
Your issue was with this
nav li a {
padding:16px 8px 16px 8px;
change it to
nav li a {
padding:16px 8px 0px 8px;
also, if you want the height to be the same, you can just do 32px instead of 16px for the first padding value, like Nicholas did in his answer.
Simply remove the float:left from nav li. Everything else is in order.
Fiddle
http://jsfiddle.net/mXTG6/
I am trying to center my navigation links inside the div but no matter what I've tried it won't work. I've tried margin-left:auto, margin-right:auto, but nothing...
Here is the section of CSS code:
#nav {
display:block;
background-color:#505050;
height:17.5px;
box-shadow: 0px 0px 15px 5px #CCCCCC inset;
border:1px solid #EEEEEE;
border-radius:20px;
padding:1.5%;
}
#nav li {
padding:0px 20px 0px 20px;
display:inline;
/*float:left;*/
list-style:none;
position:relative;
}
#nav li a {
padding:0px 0px 20px 0px;
color:#FFFFFF;
text-decoration:none;
}
and here is my ul code:
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Current Litters</li>
<li>Gallery
<ul>
<li>Bandi</li>
<li>Studs Used</li>
<li>Test Dog2</li>
<li>Test Dog3</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
Here is the rest of my code
actually without it i noticed that my drop down menu under (gallery) doesn't display correctly, ...here is the rest of that css file...that shows what happens to the drop down...maybe you can tell me why the float screws it all up...
...and the text align did great....but only after removing the float...
#nav li a:hover {
text-decoration:underline;
}
#nav li ul{
padding:10px;
font-size:medium;
display:none;
position:absolute;
left:0px;
top:30px;
background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
display:block;
border-radius:20px;
border:1px solid;
width:150px;
}
This is actually quite simple, since your list items are display:inline. Add this style:
#nav {
text-align:center;
}
Demo: http://jsfiddle.net/fH6f5/
There are many other ways to do it, but this appears to be all you need. Just make sure not to float the <li>s (I see you have it commented out).
Adding text-align: center to the nav unordered list seems to work for me in chrome
#nav {
text-align: center;
}
To center a block element, you also need to explicitly set the width to some value, like this:
#nav {
width: 50%;
margin: 0 auto;
}
There are quite a few changes you're going to need to make to your code in order for it to display properly. Your list elements are currently inline elements. inline elements have a lot of restrictions, including not being able to explicitly set their width, height, and their top and bottom margin. Keep in mind that per the W3 spec:
Generally, inline elements may contain only data and other inline elements.
That being said, you can use display: inline-block with no problems for your current code. There is one very important thing to keep in mind about using inline-block elements: whitespace. Any space between inline-block elements in your code will be shown as a space on your browser. So, if you want the elements to be touching, their tags must be touching also:
<!-- Version A: This will produce a gap between the two elements -->
<li>Home</li>
<li>About Us</li>
<!-- Version B: This will not produce a gap between the two elements -->
<li>
Home
</li><li>
About Us
</li>
If you choose Version A from the code above, I'd recommend you float the elements rather than relying on inline-block for positioning. Centering a floated list is a bit more difficult than centering an inline list. Here's a way that I like to center floated elements:
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
position: relative;
float: left;
left: 50%;
list-style: none;
padding: 0; }
nav ul li {
position: relative;
float: left;
right: 50%;
margin: 0 5px; }
nav ul li a { display: block; }
Preview: http://jsfiddle.net/Wexcode/rsDbY/
You should post the design that you want for your dropdown menu, I don't really know what you want your final result to look like so I can't really help you with that.
You need to set a fixed width on your ul for margin-right:auto and margin-left:auto
Have you tried to add margin: 0 auto; to #nav style? You also have to set the ul width to get this working.
It's a bit more complicated then simply "text-align" as you have the text inside of a . You need to add "margin: 0px auto;" to your element in your css file. This will then center the divider on the screen first, then center the next element within the divider and so on.
Here is my code:
HTML
<div class="menu">
<ul>
<li class="active">HOME</li>
<li class="active">COMPANY</li>
<li class="active">SOLUTIONS</li>
<li class="active">SERVICES</li>
<li class="active">NEWS & EVENTS</li>
<li class="active">BLOGS</li>
<li class="active">CONTACTS</li>
</ul>
</div>
CSS
.header .menu ul { margin:33px 10px 0 0; padding:0; float:right; width:auto; height:12px; list-style:none;}
.header .menu ul li { margin:0 4px; float:left;}
It does not recognize the height feature. Why? How can I set the height of menu item?
You're missing a semicolon :-)
You can also try setting the line-height property of the li tags to change the position of the text in the element:
.line-height-li {
line-height: 30px;
}
Just increase the padding-top and padding-bottom as you want. Line height effect other. I found out it by testing it. It work for me.
.header .menu ul { margin:33px 10px 0 0; padding:0; float:right; width:auto;list-style:none;}
.header .menu ul li { margin:0 4px; float:left;}
.active{height:50px;}
ul is set to a height of 12 pixels, at least in Firefox.
Is the height set on the correct element? You're asking how to set the height of a menu item (presumably, an li) but your CSS says you're setting the height of the ul. Perhaps, moving height: 12px; from where it is to .header .menu ul li could help.
The height of the list does not necessarily change the height of the visible list items. I created a small example to show how those heights look like, if you hover on the items, you'll see the height's changing. That because of the overflow attribute of the list.
.menu ul {
margin: 10px 10px 10px 5px;
padding: 10px;
float: right;
width: auto;
height: 12px;
list-style: none;
background: cyan;
overflow: hidden;
}
.menu ul:hover {
overflow: visible;
}
.menu ul li {
margin: 4px;
padding: 4px;
float: left;
background: yellow;
}
<div class="menu">
<ul>
<li class="active">HOME</li>
<li class="active">COMPANY</li>
<li class="active">SOLUTIONS</li>
<li class="active">SERVICES</li>
<li class="active">NEWS & EVENTS</li>
<li class="active">BLOGS</li>
<li class="active">CONTACTS</li>
</ul>
</div>
Anyway, in your example, there's no div with a class "header" in your HTML, that's confusing for beginners. Your CSS rules begin with ".header".