Hi, i'm a novice at this :) .i'm having difficulty trying to center a nav inside a div i've named 'menu'. I've tried to find the problem in the details and nothing is helping. Seeing that the problem might also reside elsewhere within the page i'm creating, i will post all of the html (hope i'm not pushing it), plus the CSS. i appreciate the help. Thank you.
Just having a look at that, I think your problem might be related to using float: left on nav ul. nav ul is the container of all of the nav links, so floating that to left with take the whole menu to the left.
I would try display: block; margin: 0 auto; on the nav ul element. From what I can see, that would centre the nav.
Thank you all for the precious feedback. David, the display:block property causes the submenu to appear over the menu, ie. it overlaps the nav, but removing the float did center the nav as i intended it to. Thank you.
Hi, i'm a novice at this :) .i'm having difficulty trying to center a nav inside a div i've named 'menu'. I've tried to find the problem in the details and nothing is helping. Seeing that the problem might also reside elsewhere within the page i'm creating, i will post all of the html (hope i'm not pushing it), plus the CSS. i appreciate the help. Thank you.
html:
CSS:
body, html { margin: 0px; padding: 0px; }
container
{ width:940px; height:1610px; margin:0 auto; }
Inside_container
{ width:940px; height:1240px; background-color:#CCCCCC; }
banner
{ width:940px; height:120px; background-image:url(images/ST_banner.jpg); }
baliza_banner_menu
{ width:940px; height:10px; }
menu
{ width:920px; height:30px; background-color:#666666; margin:0 10px 10px 10px; }
nav ul li:hover > ul { display: block; }
nav ul { background:#202121; background: linear-gradient(top, #393B3A 0%, #202121 100%); background: -moz-linear-gradient(top, #393B3A 0%, #202121 100%); background: -webkit-linear-gradient(top, #393B3A 0%,#202121 100%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15); list-style: none; position: relative; display: inline-table; float:left; }
nav ul li { float: left; }
nav ul li:hover { background:#F0F0F0; background: linear-gradient(top, #F0F0F0 0%, #FFF 40%); background: -moz-linear-gradient(top, #F0F0F0 0%, #FFF 40%); background: -webkit-linear-gradient(top, #F0F0F0 0%,#FFF 40%); }
nav ul li:hover a { color:#333333; }
nav ul li a { display: block; padding: 8px 30px; color: #FFF; text-decoration: none; }
nav ul ul { display: none; background: #F0F0F0; border-radius: 0px; padding: 0; position: absolute; top: 100%; }
nav ul ul li { float: none; border-top: 1px solid #CCC; position: relative; }
nav ul ul li a { padding: 5px 30px; color: #fff; }
nav ul ul li a:hover { background:#F5F5F5; }
home_destaque
{ width:920px; height:400px; background-color:#FFFFFF; margin:0 10px 10px 10px; }
home3
{ width:920px; height:300px; margin:0 10px 10px 10px; }
home_third
{ width:300px; height:300px; background-color:#FFFFFF; float:left; margin-right:10px; }
home_third_direita
{ width:300px; height:300px; background-color:#FFFFFF; float:left; }
home_footer
{ width:920px; height:150px; background-color:#FFFFFF; margin:0 10px 10px 10px; }
a { font: 12px Arial, Helvetica, sans-serif; color:#FFFFFF; text-decoration:none; }
Can you post the code on Codepen?
Just having a look at that, I think your problem might be related to using float: left on nav ul. nav ul is the container of all of the nav links, so floating that to left with take the whole menu to the left.
I would try display: block; margin: 0 auto; on the nav ul element. From what I can see, that would centre the nav.
Here is how. Read through it. If you hit a wall post back http://www.visibilityinherit.com/code/center-nav.php
This wouldn't be what you're trying to achieve by chance?
http://codepen.io/AaronCDR/pen/KbJyG
If you haven't defined a width on the menu, setting it to
display: table;withmargin: 0 auto;should centre it within the parent element.Edit - just noticed you have defined a width, in which case @David_Leitch is correct with
display: block;.Thank you all for the precious feedback. David, the display:block property causes the submenu to appear over the menu, ie. it overlaps the nav, but removing the float did center the nav as i intended it to. Thank you.