I'm pretty new to HTML and CSS. I'm making a menu bar horizontal and I can't seem to align it to center of screen. I have tried margin:0 auto; and <body align=center> but neither seems to work.
Here is my code:
<html>
<head>
<style>
#menu {
margin:0 auto;
float:left;
list-style:none;
padding:0;
border-top:1 solid #ccc;
border-left:1 solid #ccc;
border-bottom:1 solid #ccc;
}
#menu li {
float:left;
background-color:#f2f2f2;
}
#menu li a {
display:block;
padding:10px 80px;
text-decoration:none;
color:#069;
border-right:1px solid #ccc;
font-weight:bold;
}
#menu li a:hover {
color:#c00;
background-color:#fff;
}
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
<li>FAQs</li>
<li>Donate</li>
</ul>
</body>
</html>
As you can see, I'm using margin:0 auto;, but it doesn't work.
You have float elements. Floating elements will not follow that centering unless your container is treated as a block, or inline block.
To reach the desired result, you'd want to do something like in this example.
By adding a container, center margin and using display: inline-block on the #menu they will be centered like normal content. Note that this might not work in IE, in which case, you should add a line with *display: inline;.
Example | Code
HTML
<div class='container'>
<ul id="menu">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
<li>FAQs</li>
<li>Donate</li>
</ul>
</div>
CSS
.container{
text-align: center;
width: auto;
margin: 0 auto;
}
#menu {
margin:0 auto;
display: inline-block;
list-style:none;
padding:0;
border-top:1 solid #ccc;
border-left:1 solid #ccc;
border-bottom:1 solid #ccc;
}
#menu li {
float: left;
background-color:#f2f2f2;
}
#menu li a {
display:block;
padding:10px 10px;
text-decoration:none;
color:#069;
border-right:1px solid #ccc;
font-weight:bold;
}
#menu li a:hover {
color:#c00;
background-color:#fff;
}
Give your menu a width if you want to center it inside it's parent element (in this case, the body.) Additionally, remove your float - it's not going to center if you're floating it one direction or another.
You can give the menu a width width: 400px; or what your desired width is. Then, you can set the left and right margin to auto margin-left: auto; margin-right: auto;
You need to give a width to your menu and remove float:left
eg.
#menu {
margin:0 auto;
list-style:none;
padding:0;
border-top:1 solid #ccc;
border-left:1 solid #ccc;
border-bottom:1 solid #ccc;
width:900px;
display:block;
}
Related
I got a menu bar on my website which is consisting of lists. The html looks like this:
<div id="menu">
<ul class="menu">
<li class="menu"><a class="menu" href="#">HOME</a></li>
<li class="menu"><a class="menu" href="#">MOSAIC</a></li>
<li class="menu"><a class="menu" href="#">SUCCESS</a></li>
<li class="menu"><a class="menu" href="#">MEMBERS</a></li>
<li class="menu"><a class="menu" href="#">CONTACT</a></li>
</ul>
</div>
And the css looks like this:
#menu {
margin-left: 10%;
border-top:1px solid white;
border-bottom:1px solid white;
left:0;
width:80%;
height:2.2em;
background:#576361;
overflow:hidden;
position:absolute;
}
ul.menu {
float:middle;
width:100%;
padding:0;
margin:0 auto;
list-style-type:none;
}
a.menu {
text-align:center;
float:left;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-right:1px solid white;
border-left:1px solid white;
}
And my menubar looks like following at the moment:
It just takes 80% of the sites width, but the 5 elements doesn't take 20% of the 80% as expected. How can I fix my issue ? It would be also pretty awesome if you could explain to me how the correct answer is working if it is not obvious and self explaining.
My opinion is to use table-cell and apply the style in li element not in children ones like this:
#menu {
border-top:1px solid white;
border-bottom:1px solid white;
left:0;
width:80%;
height:2.2em;
background:#576361;
position:relative;
margin: 0 auto;
}
ul.menu {
width:100%;
padding:0;
margin: 0 auto;
list-style-type:none;
}
ul{
display:table;
}
li{
display:table-cell;
text-align:center;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-left:1px solid white;
vertical-align: middle;
}
fiddle
Any borders or padding will add to the width of the elements until you tell them not to with
box-sizing: border-box;
JSFiddle Demo
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#menu {
margin: 0 auto;
border-top:1px solid white;
border-bottom:1px solid white;
width:80%;
height:2.2em;
background:#576361;
overflow:hidden;}
ul.menu {
width:100%;
padding:0;
margin:0 auto;
list-style-type:none;
}
a.menu {
text-align:center;
float:left;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-right:1px solid white;
border-left:1px solid white;
}
You are using borders.
Borders add 2px to every element.
box-sizing: border-box;
Is the solution
http://jsfiddle.net/Hc3au/
You need to change the position of #menu to relative or add an wrapper containing the list. I'm also pretty sure there is no float: middle, just right and left ( and none and inherit ).
Also I do prefer the following:
ul.menu > li
{
width: 20%;
}
ul.menu > li > a
{
width: 100%;
}
Why do you use the menu class on every element?
How can it be that there are so many answers on this topic and I still can't figure this out? I've been fiddling with the CSS on jsfiddle for hours and I still don't understand why my navigation bar won't center without going into a vertical list.
The html:
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='a'>MAKEUP</a>
<ul>
<li><a href='a'>EYES</a></li>
<li><a href='a'>LIPS</a></li>
<li><a href='a'>FACE</a></li>
</ul>
</li>
<li><a href='a'>SKINCARE</a></li>
<li><a href='a'>LIFESTYLE</a></li>
<li><a href='a'>DIY</a></li>
<li><a href='a'>CONTACT</a></li>
</ul>
</div>
and the CSS, I think:
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:950px;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
width:auto;
line-height:36px;
padding:0 20px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:left;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
I just started my blog today, and so far I've learned that getting rid of floats and putting inline-block might help, but there are so many that I really don't get which code applies to what. Any help is appreciated!
Here's the fiddle link: http://jsfiddle.net/vFDrV/9/
Here's the link to my blog: http://theprettyfoxes.blogspot.com/
if I understand correctly your question, its quite simple.
Add the follow code to your menu css class.
.menu { /* applying to a ul element */
/* ... your code ... */
display: inline-block;
}
You can read more about this at the Mozilla Docs
https://developer.mozilla.org/en-US/docs/Web/CSS/display
What it's going on when we add "inline-block" is this:
The element generates a block element box that will be flowed with
surrounding content as if it were a single inline box (behaving much
like a replaced element would)
Thats all!
remove float from following:
.menu a {
/*float: left;*/
color: #999;
text-decoration: none;
text-transform: uppercase;
width: auto;
line-height: 36px;
padding: 0px 20px;
}
.menu li {
position: relative;
/*float: left;*/
width: auto;
display: inline; /* <- add this */
}
I tried to create a navigation bar which should fit inside a div id called #page_wrap
itd width is 980px when i tried with firebug i am seeing that #nav selection is bigger than #page_wrap.Why this is happening.
my intention is the nav bar should not go outside the #page_wrap
Here is the Code
HTML
<div id="page_wrap">
<ul id="nav">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
<li>Menu6</li>
<li>Menu7</li>
<li>Menu8</li>
<li>Menu9</li>
</ul> <!-- END Navigation Bar-->
<div id="content">
</div>
</div> <!-- END page_wrap -->
CSS
ul#nav {
list-style: none;
width:980px;
height:35px;
background:#000000;
}
ul#nav li a {
float:left;
color:white;
text-decoration: none;
width:105px;
line-height: 35px;
border-right: 2px solid #979797;
text-align: center;
}
ul#nav li a:hover {
background: #979797;
}
#page_wrap {
margin:0 auto;
width:980px;
}
See the image it has empty spaces in start and end. Why there are empty spaces in the start and End. How to avoid those things. I believe this is what causing a problem of bigger than its parent.
How to Remove Start and End emtpy Spaces and how to place #nav inside #page_wrap exactly which means it should not go out from #page_wrap. Any Help?
Check this JSFIDDLE
Remove default padding for the UL.
ul#nav{padding:0;}
LIke this
demo
css
*{
margin:0;
padding:0;
}
ul#nav {
list-style: none;
width:980px;
height:35px;
background:#000000;
margin:0 auto;
padding:0;
}
ul#nav li a {
float:left;
color:white;
text-decoration: none;
width:105px;
line-height: 35px;
border-right: 2px solid #979797;
text-align: center;
}
ul#nav li a:hover {
background: #979797;
}
#page_wrap {
margin:0 auto;
width:980px;
}
Use this at the start of your css
* {
padding: 0;
}
I am trying to center then float:right my top fixed navbar with the content area of my page. Currently the navbar is floated right but is not centered with my content area.
Click to view my subject site.
CSS
#topribbon{
width: 100%;
height: 30px;
background-color: #AA1119 ;
margin: -11px 0px 1em 0px;
position: fixed;
z-index: 9999;
}
#topribbon ul{
padding-top:5px;
text-align:right;
float:right;
position:relative;
margin:0 auto;
width:980px;
}
#topribbon ul li{
float:right;
color:white;
padding:0 10px 0 10px;
list-style:none;
display:block;
line-height:20px;
text-align:center;
cursor:pointer;
width:auto;
}
#topribbon ul li:hover{
color:#5C8FA5;
HTML
<div id="topribbon"> <ul>
<li>Free Ground Shipping on all orders over $99!</li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>+1-800-555-5555</li>
</ul>
</div>
My first guess is the width of ul element doesn't work.
Try this instead
<div id="topribbon">
<div class="ribbonwrapper" style="width:980px;margin:0 auto;">
<ul>
<li>Free Ground Shipping on all orders over $99!</li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>+1-800-555-5555</li>
</ul>
</div>
</div>
Put the style of .ribbonwrapper into CSS to make the code tidy :) then you can remove irrelevant width & margin property of #topribbon ul
I'm not sure I'm entirely clear on what you're trying to do, but if what you want is to float:right the UL and then have all the LI's within it centered, you could do this:
#topribbon ul { float:right; text-align: center; }
#topribbon ul li { display: inline-block; }
Be sure to remove the float:right; from the li style block.
If you mean something else by "centered with my content area" can you explain more?
Try with float:none; on the #topribbon ul
Pretty confused what you mean exactly myself... Maybe this is what you want? jsFiddle
#topribbon {
width: 100%;
background-color: #AA1119;
margin: -11px 0px 1em 0px;
position: fixed;
z-index: 9999;
overflow:hidden;
}
#topribbon ul {
padding:10px 0 8px;
position:relative;
margin:0 auto;
width:980px;
background:red;
overflow:hidden;
}
#topribbon ul li {
color:white;
list-style:none;
display:inline-block;
line-height:20px;
cursor:pointer;
width:auto;
padding:0 10px 0 10px;
float:right;
}
#topribbon ul li:hover {
color:#5C8FA5;
}
like others have said use the ul below. I am just as stumped as you however, I am new so if my code is wrong then please feel free to tell me. Thanks
#topribbon ul { float:right; text-align: center; }
#topribbon ul li { display: inline-block; }
This is my HTML:
<div class="topmenucontainer">
<div id="topmenu">
<ul>
<li style="border-right: 1px solid black;">Login</li>
<li>Partner Countries</li>
</ul>
</div>
This is my CSS:
.topmenucontainer {
margin:0 auto;
border:1px solid red;
background-color:#000;
display:block;
}
#topmenu {
margin:0 auto;
border:1px solid red;
/*min-height:25px;*/
background-color:#fff;
width:900px;
display:inline;
}
#topmenu ul {
margin:0px; padding:0px;
list-style-type: none;
float:right;
}
#topmenu ul li {
float:left;
}
And This is how it is displayed
http://img842.imageshack.us/img842/8627/3ktn.jpg
Why the UL isn't displayed where I putted it?I mean why isn't it displayed inside my topmenu div which is white backgrounded and only 900px wide?
You need to add a clear:both div to handle the inner floating
<div class="topmenucontainer">
<div id="topmenu">
<ul>
<li style="border-right: 1px solid black;">Login</li>
<li>Partner Countries</li>
</ul>
<div style="clear:both;"></div>
</div>
</div>
I think you don't need any styles on your .topmenucontainer*. you can get rid of the .topmenucontainer styles
you can try the below styles on topmenu. Do you have a final picture of what you are trying to achieve?
#topmenu {
overflow: hidden;
margin: 0 auto;
border: 1px solid red;
background-color: #fff;
width: 900px;
}